Search code examples
reactjsmaterial-uidatagrid

How to export all the pages to CSV in MUI DataGrid?

I hava a DataGrid table from Material UI with more than 3000 rows, each page contains max 50 rows per page.

What I want is to be able to export all the rows to CSV when I click the export btn.

Actual behavior: Only current page data is being exported

Can anybody give me a hint on what I am doing wrong ?

My code :

 <DataGrid
   rows={users}
   columns={columns}
   pageSize={limit}
   page={page - 1}
   rowCount={rowsCount}
  //rowsPerPageOptions={[limit]}
  pagination
  paginationMode="server"
  components={{
    Toolbar: GridToolbar,
  }}
  onPageChange={(data) => {
   updateUsers(data + 1, formSubmitted);
  }}
/>

DataGrid in the web example : Screensot of DataGrid Table

Solution

  • Actually there was no problem with DataGrid, but it was with the api call which was programmed to bring 50 new users each time we change the page to prevent brining too much data at once in the front

    To overcome this issue, I created a new button outside datagrid which made an api call when clicked for getting all the data and exporting to CSV using REACT-CSV lib.