🚀 Influence MUI X's 2025 roadmap! Participate in the latest Developer Survey

Data Grid - Server-side Data Source Recipes

Recipes for some advanced use-cases.

Tree data nested pagination

By default, the pagination works only on the first level of the tree. You can enable the nested pagination in the userland by using the pinned rows feature, as shown in the following demo.

<DataGridPro
  {...props}
  columns={columns}
  dataSource={dataSource}
  dataSourceCache={null}
  treeData
  apiRef={apiRef}
  pagination
  pageSizeOptions={pageSizeOptions}
  initialState={initialState}
  showToolbar
/>

<DataGridPro
  {...props}
  columns={columns}
  dataSource={dataSource}
  dataSourceCache={null}
  treeData
  apiRef={apiRef}
  pagination
  pageSizeOptions={pageSizeOptions}
  initialState={initialState}
  showToolbar
/>

Press Enter to start editing