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:
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.
Table plugin allows you to customize the appearance of the table, table head and table body using the plugin’s
containerComponent properties. The following example demonstrated how to use the
tableComponent and create a ‘striped’ table:
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:
rowComponent property enables you to handle row events like
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.
columnExtensions allows you to specify the column alignment.
Static widths for specific columns can be defined via the
columnExtensions property as shown in the demo below:
The Grid cuts off values that do not fit in a cell. 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.