Data Grid - Rendering

The grid is highly customizable. Take advantage of a React-first implementation.

Layout

By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves.

⚠️ When using % (percentage) for your height or width. You need to make sure the container you are putting the grid into also has an intrinsic dimension. The browsers fit the element according to a percentage of the parent dimension. If the parent has no dimensions, then the % will be zero.

Flex layout

It's recommended to use a flex container to render the grid. This allows a flexible layout, resizes well, and works on all devices.

<div style={{ display: 'flex', height: '100%' }}>
  <div style={{ flexGrow: 1 }}>
    <DataGrid {...data} />
  </div>
</div>

Predefined dimensions

You can predefine dimensions for the parent of the grid.

<div style={{ height: 350, width: '100%' }}>
  <DataGrid {...data} />
</div>

Auto height

The autoHeight prop allows the grid to size according to its content. This means that the number of rows will drive the height of the grid and consequently, they will all be rendered and visible to the user at the same time.

⚠️ This is not recommended for large datasets as row virtualization will not be able to improve performance by limiting the number of elements rendered in the DOM.

<DataGrid autoHeight {...data} />
<p>more content</p>

Virtualization

DOM virtualization is the feature that allows the grid to handle an unlimited* number of rows and columns. This is a built-in feature of the rendering engine and greatly improves rendering performance.

unlimited*: Browsers set a limit on the number of pixels a scroll container can host: 17.5 million pixels on Firefox, 33.5 million pixels on Chrome, Edge, and Safari. A reproduction.

Row virtualization

Row virtualization is the insertion and removal of rows as the grid scrolls vertically.

The grid renders twice as many rows as are visible. It isn't configurable yet. Row virtualization is limited to 100 rows in the DataGrid component.

Column virtualization

Column virtualization is the insertion and removal of columns as the grid scrolls horizontally.

• Overscanning by at least one column allows the arrow key to focus on the next (not yet visible) item.
• Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.
• Overscanning more allows the built-in search feature of the browser to find more matching cells.
• Overscanning too much can negatively impact performance.

By default, 2 columns are rendered outside of the viewport. You can change this option with the columnBuffer prop. The following demo renders 1,000 columns in total:

<DataGrid {...data} columnBuffer={2} />

You can disable column virtualization by setting the column buffer to a higher number than the number of rendered columns, e.g. with columnBuffer={columns.length} or columnBuffer={Number.MAX_SAFE_INTEGER}.

Components prop

As part of the customization API, the grid allows you to replace and override nested components with the components prop. The prop accepts an object of type GridSlotsComponent .

Toolbar

To enable the toolbar you need to add the Toolbar: GridToolbar to the grid components prop. This demo showcases how this can be achieved.

<DataGrid
  {...data}
  components={{
    Toolbar: GridToolbar,
  }}
/>

Alternatively, you can compose your own toolbar.

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridColumnsToolbarButton />
      <GridFilterToolbarButton />
    </GridToolbarContainer>
  );
}

<DataGrid
  {...data}
  components={{
    Toolbar: CustomToolbar,
  }}
/>

Loading overlay

By default, the loading overlay displays a circular progress. This demo replaces it with a linear progress.

<DataGrid
  components={{
    LoadingOverlay: CustomLoadingOverlay,
  }}
  loading
  {...data}
/>

No rows overlay

In the following demo, an illustration is added on top of the default "No Rows" message.

<DataGrid
  components={{
    NoRowsOverlay: CustomNoRowsOverlay,
  }}
  rows={[]}
  columns={data.columns}
/>

Footer

The grid exposes props to hide specific elements of the UI:

• hideFooter: If true, the footer component is hidden.
• hideFooterRowCount: If true, the row count in the footer is hidden.
• hideFooterSelectedRowCount: If true, the selected row count in the footer is hidden.
• hideFooterPagination: If true, the pagination component in the footer is hidden.

By default, pagination uses the TablePagination component that is optimized for handling tabular data. This demo replaces it with the Pagination component.

<DataGrid
  pagination
  pageSize={5}
  components={{
    Pagination: CustomPagination,
  }}
  {...data}
/>

Customization example

The following grid leverages the CSS customization API to match the Ant Design specification.

<DataGrid
  className={classes.root}
  checkboxSelection
  pageSize={5}
  components={{
    Pagination: CustomPagination,
  }}
  {...data}
/>

API

• <DataGrid />
• <XGrid />