How to add custom select all checkbox in toolbar using mui datagrid

akshay_acharya 0
Viewed 26

I am currently using mui data grid to create my table. The properties are as follows

   <DataGrid
              rows={serialsList || []}
              columns={columns}
              rowsPerPageOptions={[25, 50, 100]}
              //pageSize={93}
              checkboxSelection={this.state.cancelShipFlag ? true : false}
              disableSelectionOnClick={false}
              components={{
                Toolbar: NewToolbar,
              }}
              onSelectionModelChange={(ids) => {
                const selectedIDs = new Set(ids);
                console.log('Selected ID ' + selectedIDs);
                const selectedRows = rowData.filter((row) => selectedIDs.has(row.id));

                this.setState({ rowinfo: selectedRows });
                console.log(selectedRows);
              }}
              
            />

I want to create a custom select All checkbox in the toolbar which selects all the rows in the table upon selection. How do I achieve this?

datagrid material-ui reactjs typescript javascript
1 Answers

you can change your checkbox like this :

<DataGrid
  loading={loading}
  pagination
  checkboxSelection
  isRowSelectable={isRowSelectable as SclTableProps['isRowSelectable']}
  columns={columns as SclTableProps['columns']}
  rows={rows}
  selectionModel={selectionModel}
  components={{
    BaseCheckbox: (a) => loading ? <>loading...</> : (
        <Checkbox checked={a.checked} /> // <-- this is imported from '@material-ui'
      ),
    }}
/>

but I don't suggest you do this why? cause, when you use the custom checkbox in the data grid check box, lost its own functionality and you must write all logic by yourself

Ali Safarpour0
Related