Top
DataGrid - Customizing cells and headers
DataGrid
<DataGrid /> cells and headers are fully customizable in both styling and content - by using styling props or custom render functions. In the sections below you can see a complete walk-through in how to achieve full customization.
The alignment of text can be controlled for each <DataGrid /> column separately by using the column.textAlign prop.
In the example above, the Name and City columns have their textAlign property controlled by the first select-box. All other columns have a fixed textAlign property.
Additionally, the City column renders another select-box in the column header for controlling the headerAlign prop. If no headerAlign is specified, the textAlign value is also used for headerAlign.
When no column.headerAlign prop is specified for a column, its textAlign prop will be used.
Similarly, when no column.headerVerticalAlign prop is specified for a column, its textVerticalAlign prop will be used.
When a column header is aligned to the end (the column has headerAlign="end" or there is no headerAlign but it has textAlign="end"), the sort arrow (when the column is sortable) is positioned before the column header.
In the example above, you can also see custom column header rendering via the column.header function used for the City column. Using this render function, the <DataGrid /> can render any valid React.Node (so basically any valid jsx contents). This gives you complete flexibility over what gets rendered in the <DataGrid /> headers.
Valid values for column.header are the following:
  • any valid React.Node - for static headers, that don't need to change based on some dynamic condition or logic.
  • a function returning a valid React.Node - very useful for dynamic content that can change based on the column state (eg: sort order).
When no column.header is specified, the column.name will be rendered (after being humanized: capitalized, split into several words where appropriate).
When column.header is a function, it is called with a cellProps object that holds the column state. Basically, in this way you gain access to any column props, including the following:
  • cellProps.sortInfo - info about the current sort state
  • cellProps.sortable - if the column is sortable or not.
  • cellProps.resizable - if the column is resizable or not.
  • cellProps.computedWidth - info about the current column width
  • cellProps.visibleIndex - the index of the column in the list of visible columns
  • ... and many others. All column state is kept in this object. All properties in cellProps are read-only.
When using custom rendering via column.header (or column.render for cell contents), the ellipsis for headers - as configured by column.headerEllipsis (or for cells, as configured by column.textEllipsis) is no longer displayed.
Because you have specified a custom rendering logic, you are in charge of showing the ellipsis and adding the correct styles to the correct elements to make it work as expected.
Use column.headerProps.style to add a custom style to the column header.
For adding a custom CSS className, use column.headerProps.className.
If you use column.style, the style value will be applied to both cells and headers. If you only want to style headers, use column.headerProps.style. If you only want to style cells, use column.cellProps.style.
The same applies to className: if you use column.className, the className value will be applied to both cells and headers. If you only want to specify className for headers, use column.headerProps.className. If you only want to specify className for cells, use column.cellProps.className.
The <DataGrid /> supports four strategies for displaying cell borders:
In the example below, you can see a combination of showCellBorders, showZebraRows and showHoverRows, all used together.
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
  • empty: Boolean - a boolean value indicating if the current row is an empty row or not
  • 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',
    width: 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>
  }
]
  
Use column.cellProps.style to add a custom style to the column cells.
For adding a custom CSS className, use column.cellProps.className.
If you use column.style, the style value will be applied to both cells and headers. If you only want to style cells, use column.cellProps.style. If you only want to style headers, use column.headerProps.style.
The same applies to className: if you use column.className, the className value will be applied to both cells and headers. If you only want to specify className for cells, use column.cellProps.className. If you only want to specify className for headers, use column.headerProps.className.
However, column.style can also be a function. In this case, the returned style object is ONLY applied to <DataGrid /> cells.
You often need to hook to events related to <DataGrid /> cells. Read the examples below to see how this can be done.
For attaching any valid DOM properties to cells (which also includes events), use column.cellDOMProps.
column.cellDOMProps can be an object or a function. In case it's a function, it is called with the cellProps used for rendering the corresponding cell. (eg: cellDOMProps: (cellProps) => { ... }).
For attaching any valid DOM properties to column headers (which also includes events), use column.headerDOMProps.
column.headerDOMProps can be an object or a function. In case it's a function, it is called with the headerProps used for rendering the corresponding column header. (eg: headerDOMProps: (headerProps) => { ... }).
Additionally, the following event props are available on the grid:
When native DOM events are supported directly on the grid, they are called with the event object as the first argument.
Note the difference between onRowContextMenu(rowProps, event) (which is a custom <DataGrid /> event) and onContextMenu(event), which is a native DOM event.
Besides attaching to DOM events as mentioned above, at any time you can render jsx content in cells & headers and attach your events to the custom-rendered content if it better serves your needs.