自定义 MUI 网格工具栏

Question

I'm using MUI Datagrid and i wanna know if there is a way to customize the gridtoolbar with custom buttons and text.

Thanks.

Federico

Answer 1

我想您知道，要启用工具栏，您需要将其添加Toolbar: GridToolbar到网格组件道具中 - 就像

<DataGrid
  {...data}
  components={{
    Toolbar: GridToolbar,
  }}
/>

因此，如果您想自定义并添加其他内容，您必须编写自己的工具栏，例如：

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExport />
    </GridToolbarContainer>
  );
}

并做同样的事情：

<DataGrid
  {...data}
  components={{
    Toolbar: CustomToolbar,
  }}
/>

来源： https: //mui.com/x/react-data-grid/components/#toolbar