如何使用 mui datagrid 在工具欄中添加自定義 select 所有復選框

Question

我目前正在使用 mui 數據網格來創建我的表。 屬性如下

   <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);
              }}
              
            />

我想在工具欄中創建一個自定義 select All 復選框，該復選框在選擇時選擇表中的所有行。 我如何實現這一目標？

Answer 1

您可以像這樣更改您的復選框：

<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'
      ),
    }}
/>

但我不建議你這樣做，為什么？ 原因，當您使用數據網格復選框中的自定義復選框時，失去了自己的功能，您必須自己編寫所有邏輯