Grid Basics

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.

<Grid
  rows={[
    { region: 'South America', sector: 'Banking' },
    { region: 'Africa', sector: 'Manufacturing' },
    /* ... */
  ]}
  columns={[
    { name: 'region', title: 'Region' },
    { name: 'sector', title: 'Sector' },
    /* ... */
  ]}
>
</Grid>

The grid requires the following plugins for basic data visualization:

<Grid
  rows={rows}
  columns={columns}
>
  <Table />
  <TableHeaderRow />
</Grid>

The TableHeaderRow plugin should follow the Table plugin. See the Plugin Order article for more details.

Appearance Customization

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 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 details.

Other plugins (TableHeaderRow, TableEditRow, TableFilterRow, TableGroupRow and TableRowDetail) have a similar API for appearance customization.