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?
Share Improve this question edited Jul 18, 2021 at 10:57 Nimantha 6,4836 gold badges31 silver badges76 bronze badges asked Jul 14, 2021 at 10:38 FeyoayoFeyoayo 211 silver badge5 bronze badges3 Answers
Reset to default 3Nothing 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}
/>