Toolbar

The MUI grid toolbar is completely customizable. You can specify which component should be rendered by setting the Toolbar property of the components grid property.

The default toolbar is already customized a little in this package. An "Add" button is automatically added if insert is allowed on the data object, and a "Refresh" button is also added. In addition, the export to excel export option is added by this package.

Adding buttons

If you simply want to add buttons to the toolbar, you can render the AfGridToolbar component, and add your buttons as children.

import { AfGrid, AfGridToolbar } from "@olenbetong/appframe-mui";
import { Button } from "@mui/material";
import Add from "@mui/icons-material/Add";

function MyToolbar() {
  return (
    <AfGridToolbar>
      <Button size="small" startIcon={<Add />} onClick={() => alert("Sike!")}>
        Automatically add everything needed
      </Button>
    </AfGridToolbar>
  );
}

function MyGrid() {
  return (
    <AfGrid
      id="SomeGrid"
      dataObject={dsMyDataObject}
      columns={
        [
          // columns are for suckers...
        ]
      }
      components={{
        Toolbar: MyToolbar,
      }}
    />
  );
}

More customization

If you want to change the order of buttons or remove buttons, you'll have to make a component similar to AfGridToolbar. As a starting point, an AfGridToolbar implementation looks roughly like this:

import {
  GridToolbarContainer,
  GridToolbarAddIfAllowedButton,
  GridToolbarColumnsButton,
  GridToolbarFilterButton,
  GridToolbarDensitySelector,
  GridToolbarExportContainer,
  GridExcelExportMenuItem,
  GridCsvExportMenuItem,
  GridToolbarRefreshButton,
} from "@olenbetong/appframe-mui";

export function AfGridToolbar({ children }: React.PropsWithChildren<{}>) {
  return (
    <GridToolbarContainer>
      <GridToolbarAddIfAllowedButton />
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExportContainer>
        <GridExcelExportMenuItem />
        <GridCsvExportMenuItem />
      </GridToolbarExportContainer>
      <GridToolbarRefreshButton />
      {children}
    </GridToolbarContainer>
  );
}