最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - MUI Datatable custom toolbar - Stack Overflow

programmeradmin1浏览0评论

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 badges
Add a ment  | 

3 Answers 3

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}
      />
发布评论

评论列表(0)

  1. 暂无评论