Top
DataGrid - Configuring columns
DataGrid
To boost performance of the <DataGrid />, we treat props as immutable and only update the <DataGrid /> when you pass different props.
To improve the rendering performance, make sure you pass the same reference to a columns array when rendering the grid, instead of building the columns array in the render function of your app and passing it new each time to the grid.
Passing a difference instance of the columns at each render will slow down the rendering performance of the <DataGrid />.
Columns should have a unique id or name (if an id is not specified, the column.name will be used as the column unique identifier). Columns that render data directly from the dataSource will generally use a name property matching the desired property in dataSource objects (items).
However, columns support custom rendering, and don't need to match a corresponding property in the dataSource items. This can be achieved by using the column.render function, as illustrated in the example below.
Columns support fixed or flexible sizing. Specifying a fixed size can be done by configuring a column.width. A flexible column needs to have column.flex set to a valid numeric value - it's using flexbox layout to determine the dimension of the flexible column (subtracts the total fixed column widths from the total available space, then divide this by the sum of all flexes and multiply that value with the flex value of each flexible column). Additionally, column.minWidth and column.maxWidth can be configured for both fixed and flexible columns to ensure some minimum or maximum dimensions are always respected.
column.width is a controlled prop, so when the user resizes the column, you have to make sure you listen to onColumnResize and update the column width accordingly.
As such, you may want to use the uncontrolled column.defaultWidth to specify the column size for a fixed column, so it updates the column width on resize without any other configuration.
For flexible columns, it's important to consider & understand how shareSpaceOnResize works (defaults to false). .
When the <DataGrid /> has flexible columns, and shareSpaceOnResize=false, when a column is resized (eg: made smaller), the flexible columns keep their current size and don't grow to fill the newly available space. However, they do keep their proportional size to all other flexible columns. Also, when the <DataGrid /> has more available space, they do resize to keep the same empty space in the <DataGrid />.
When the <DataGrid /> is configured with shareSpaceOnResize=true, and a column is resized, flexible columns are resized to fill all available space to ensure that columns always fill the <DataGrid /> viewport horizontally.
See shareSpaceOnResize for an example.
By default, columns are resizable. Specifying resizable=false makes all <DataGrid /> columns unresizable.
Besides making all columns resizable/unresizable, the resizable prop can be controlled at column level. Specify column.resizable=false to make a certain column unresizable by the user or column.resizable=true to specifically enable user resizing on a certain column.
When the user drags & drops the column resize handle, the onColumnResize callback prop is called to notify the column size update. The width of the column resize handle is configurable via columnResizeHandleWidth.
Columns configured with a name prop by default render the value in the corresponding property in the dataSource items.
Custom rendering (for all columns, either with a name or an id) is supported via the column.render function prop. The column.render is passed an object with the following properties:
  • value - if the column has a name, the value would be the value rendered if no column.render property were configured.
  • data - the data object in the dataSource corresponding to the current row being rendered.
  • cellProps: Object - the props being passed to the cell corresponding to the current row and column.
  • rowIndex: Number - the index of the current row being rendered.
  • rowSelected: Boolean - a boolean value indicating if the current row is selected or not.
  • rowActive: Boolean - a boolean value indicating if the current row is keyboard active or not.
  • cellSelected: Boolean - a boolean value indicating if the current cell is selected or not.
  • empty: Boolean - a boolean value indicating if the current row is an empty row or not. See showEmptyRows for details.
  • totalDataCount: Number - the total count of rows that will be rendered.
The object passed to the column.render function is reused - so you should not keep a reference to it. Instead, use ES6 destructuring to take the values you are interested in from this object.
const columns = [
  { name: 'firstName', flex: 1 },
  { name: 'lastName', flex: 1 },
  {
    name: 'country',
    defaultWidth: 60,
    resizable: false,
    textAlign: 'center',
    render: ({ value }) => flags[value]
      ? <img src={flags[value]} style={{ verticalAlign: 'middle'}} />
      : 'unknown'
  },
  {
    id: 'fullName',
    minWidth: 100,
    flex: 1,
    render: ({ data }) => data.firstName + ' ' + data.lastName
  },
  {
    name: 'age',
    render: ({ value }) => <span
      style={{ color: value < 30 ? 'green' : 'inherit'}}
    >{value}</span>
  }
]
  
The <DataGrid /> column cells are optimized to only render when there is a change in the underlying dataSource, therefore, the column.render function should be pure. If not pure, and if the column.render uses variables defined outside of the function, make sure you specify columns.shouldComponentUpdate to return true.
By default, if columns don't specify a header, the column.name is used (after it's upper-cased and humanized) as the column header.
By adding a column.header prop (any valid React.Node or even a function) you can have full control over what gets rendered as the column header - even for different states of the column (sorted, filtered, etc).
In the example above, the first column uses custom header rendering, while the second column turns off sorting by adding column.sortable=false. The third column uses custom cell rendering, via the column.render function.