Getting Started - Grids

You should start any Tubular Grid with the base directive tbGrid, this directive will generate a container where a scope with all the properties (like data source and columns definition) can be used. Inside the tbGrid you can define any layout that you wish.

The Tubular generator delivers a layout with 3 Bootstrap rows. The first one contains the pager (using the directive tbGridPager), a button group with Print Button (tbPrintButton) and Export CSV Button (tbExportButton), and finally a text-search input (tbTextSearch). The layout continues with the grid table (tbGridTable) and the third row shows the pager again (yeah, if you only want one pager, it's fine to remove the directive) and a pager information and page size selector (tbPageSizeSelector and tbGridPagerInfo)

Remember, the layout is fully customizable. You don't need to setup your grid with the same components, you can mix them as you wish as longer you keep them inside the tbGrid node.

The tbGrid component contains several parameters that you can check here. One important attribute is requireAuthentication because it determines if the tbGrid will connect to a REST service using Bearer token or not. The default value is true, and you should disable it if you are not using securited connection.

Grid Table

When you design your layout, the next step is setup the columns that you will display and how those columns should behave. The table is define as a columns set and one or more rows sets. The columns set should start with the directive tbColumnDefinitions. You must provide at least one column definition using tbColumn with a name to bind the data source. You can setup details like sorting, column data type and filtering inside the tbColumn, please refer to the directive documentation.

With all the columns ready, you need to define how your data will be displayed, you need to add to the tbGridTable a row set directive (tbRowSet). This directive is a container to display tbRowTemplate, the template should be used with a ngRepeat directive in order to loop the data set and display all the rows. Inside a tbRowTemplate you finally can setup how the table cells are going to look.

The cells are attached to a template in the directive tbCellTemplate. The cell template is important to bind the column using the columnName property, because if you are controlling the columns visibility the cells required to know it. You can use any filter or HTML element inside the cell template, as long they are valid in regular td tags, or you can also use in-line editor from Tubular and connect your grid to a form.

Almost all the options are available with the Tubular Grid Generator. So you can visually customizate your grid.