Data Grid - Server-side data recipes

Recipes for advanced data source use-cases.

Tree data nested pagination

By default, the pagination works only on the first level of the tree. You can create the nested pagination with row pinning 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