MUI Datatable custom toolbar

user_16310217 0
Viewed 3528

I need help with customizing MUI-Datatable. This block that in red square you see I want to push in toolbar of MUI-datatable, and fill this empty space. Can I do this?

enter image description here

material-ui reactjs javascript
3 Answers

If you're using gregnb/mui-datatables as I think you are, you can using the customToolbar option to render a component.

const customToolbar = () => {
return(
   <>
     <p>I'm a toolbar</p>
   </>
 );
}
const options = {
  customToolbar: () => {<CustomToolbar/>},
};

<MUIDataTable
  title={"I'm a datatable"}
  data={data}
  columns={columns}
  options={options}
/>
user_16119990

Yep, I just solve this issue by adding my JSX component into "title" option and it works. Maybe someone will stuck on this

<MUIDataTable
        title={<ActionPanel showOnlyFailedExecutions={showOnlyFailedExecutions} />}
        options={overivewOptions}
        data={data}
        columns={columns}
      />
user_163102170

Nothing worked for me. Even the documentation example was not showing the custom toolbar.

I managed it with the following

const CustomToolbar = ({displayData}) => {
    return (
        <>
            <p>I'm a toolbar</p>
        </>
    );
}

const options = {
    customToolbar: CustomToolbar,
};

Don't know its a bug or something. May be the recent versions changed this and documentation was not updated.

user_87994710
Related