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?

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?

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Jul 18, 2021 at 10:57 Nimantha 6,48366 gold badges3131 silver badges7676 bronze badges asked Jul 14, 2021 at 10:38 FeyoayoFeyoayo 2111 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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.

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

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

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

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