The Grid component displays data specified via the rows
property. You should also specify the columns
property to define for which row fields the grid creates columns.
The Grid requires the following plugins for basic data visualization:
The TableHeaderRow
plugin should follow the Table
plugin. See the Plugin Order article for more information.
The Grid's visualization plugins provide a rich API to customize grid elements' appearance. Examples of the most popular customization tasks are described below.
The Table
plugin allows you to customize the appearance of the table, table head and table body using the plugin's tableComponent
, headComponent
, bodyComponent
and containerComponent
properties. The following example demonstrated how to use the tableComponent
and create a 'striped' table:
Note: Other plugins (TableHeaderRow, TableEditRow, TableFilterRow, TableGroupRow and TableRowDetail) use the same API to customize UI elements' appearance.
The Table
plugin also allows you to customize table cell appearance using the cellComponent
property. For instance, you can implement conditional cell formatting as demonstrated in the following example:
The Table
plugin's rowComponent
property enables you to handle row events like onClick
, onContextMenu
, etc., as demonstrated in the following demo:
You can create a custom appearance from scratch or modify the default appearance settings the grid's Table.Row
component provides. Read Plugin Components for more information.
The Table
plugin's columnExtensions
allows you to specify the column alignment.
To specify static widths for specific columns, use the Table
plugin's columnExtensions
property. You can define the widths in pixels or CSS-accepted units:
The Grid cuts off values that overflow their cells. Set the column extensions' wordWrapEnabled
property to true to enable word wrap for these columns.
You can pass a custom component to the TableHeaderRow plugin's contentComponent
property to display additional elements in the Grid's header.