By Ana Atayde - 11 Jul 2019
Front-End Back-End Tubular React Javascript


Tubular is a grid definition which is established between a web client and REST API server for transporting data using the HTTP protocol.

The communication is established using two main models: the Grid Data Request and the Grid Data Response.

Those models arrange the data interchange between the client and the server; first of all, the client makes a request specifying through the model’s properties what actions it wants to perform on the data and the response gives back a model which contains the result data after the server performs the required transformations.

Basically, the client and the server start a conversation about how the client needs to show the data and the server responses with the appropriate data representation. It is important to say that the request should be always executed on Post request.


As we mentioned the grid data request is a model that contains several properties which describes the structure of a tubular request.

The model contains the following properties:

  • Counter: It counts the request made by the client.

  • Skip: Sets how many records skip to return the right page, it helps us to achieve pagination and allows to navigate between pages.

  • Take: Sets how many records are taking by page.

  • TimezoneOffset: Sends the minutes difference between UTC and local time, this property is useful when the server performs date conversions and date formats.

  • Search: Represents the kinds of filters that we can apply to our data, below are the properties in the filter:

  • Name: The filter name.

  • Text: The text that we type in the search input on the client grid.

  • Argument: Filter search params.

  • Operator: Represented by a compare operators enumeration, to compare the data against a specified value, example: equals, contains, start with, etc.

  • OptionsUrl: Gets or set the options URL. The URL returns a list of filter objects.

  • HasFilter: Flags that indicates if the filter is applied.

  • Columns: It is the set of Grid Columns that refers to each column on the grid, it is defined by GridColumn data type , here the details of this type:

    • Name: The column name.

    • Label: Represents the custom name that will appear on the top of the column.

    • Sortable: A flag indicating if the column could be sortable.

    • SortOrder: Indicates the sort’s order, it doesn’t take values like zero or less than zero.

    • SortDirection: It is an enumeration that exposes 3 sort options, none, ascending, descending.

    • Filter: It is the same that the filter described before, but applied to a distinctive column.

    • Searchable: Resolves if the columns are searchable or if it will be omitted in the free-text search.

    • DataType: It is an enumeration that establishes the data type on the column.

    • AggregationFunction: The aggregation function is an enumeration which allows choosing an aggregate to be applied on the data column, for example (sum, average, count, etc.)


In its side the grid data response is the obtained result after having applied the transformations requested by the client, this result is described in the response model. It contains the resulting data payload and other helpful information.

GridDataResponse has the next properties:

  • Counter: Response counter.

  • Payload: The payload is the most important part of the response it contains a list of objects which are all the rows that fulfill the request made by the client.

  • TotalRecordCount: the total number of rows that are in the resulting payload.

  • FilteredRecordCount: Set how many records are in the filtered set.

  • TotalPages: As a result of the total rows and the rows that are taken by page we have the total number of pages.

  • CurrentPage: The current page to return.

  • AggregationPayload: A dictionary with the aggregation functions.

Our server

Tubular Backend obtains a grid data request and a data source, depending on the request tubular perform a series of transformations on the source, giving as a final result a model response that contains all the data that matches with the request.

The transformations are described below:

  1. Select get the first instance of the data, it can come from SQL or a map or whatever select function you wanted to use.

  2. Filter the data first by the free search text and then by each filter applied on the columns.

  3. Sort the data on descending or ascending direction, you can apply the sort on several columns at the same time, always saving the order in which the columns were sorted.

  4. Aggregation performs a calculation on the data source returning a single result per aggregation function.

In the end, a grid data response is returned and the client can use a one of the tubular client to display the details.