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 DxTableHeaderRow plugin should follow the DxTable plugin. See the Plugin Order article for more details.
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 DxTable 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:
The DxTable 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 DxTable plugin’s rowComponent property enables you to handle row events like click, contextmenu, etc., as demonstrated in the following demo:
You can create a custom appearance from scratch or modify the default appearance settings the grid’s DxTable.components.DxRow component provides. Read Plugin Components for details.
The DxTable plugin’s columnExtensions allows you to specify the column alignment.
Static widths for specific columns can be defined via the DxTable plugin’s columnExtensions property as shown in the demo below:
The Grid cuts off values that do not fit in a cell. Assign true to the DxTable plugin’s columnExtensions.wordWrapEnabled property for the required column to enable word wrap.
Other plugins (DxTableHeaderRow, DxTableEditRow, DxTableFilterRow, DxTableGroupRow and DxTableRowDetail) have a similar APIs for appearance customization.