mui-datatables自定义工具栏添加多个按钮如何实现同排显示

问题原因 #

mui-datatables的工具栏默认采用flex布局，你当前使用React空标签（Fragment）包裹两个按钮，相当于两个独立的子元素被插入到工具栏容器中，触发了flex容器的自动换行逻辑，因此第二个按钮会单独掉行显示。

修复方案 #

给HeaderElements组件的外层新增一个flex布局容器，将两个按钮包裹为一个整体插入工具栏，就可以和原有按钮同排展示。

方案1：使用MUI官方Box组件（推荐） #

// 先引入MUI的Box组件
import { Box } from '@mui/material';

const HeaderElements = () => (
  // sx属性配置flex布局，gap参数调整两个按钮的间距
  <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
    <AddNewButton />
    <ExportJsonButton />
  </Box>
);

<MUIDataTable
  title=""
  data={rows}
  columns={columns}
  options={{
    selectableRowsHeader: false,
    selectableRowsHideCheckboxes: true,
    customToolbar: () => (<HeaderElements />),
  }}
/>

方案2：使用原生div实现 #

如果不想额外引入组件，用原生div加行内样式也可以达到相同效果：

const HeaderElements = () => (
  <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
    <AddNewButton />
    <ExportJsonButton />
  </div>
);

补充适配 #

如果调整后仍然存在换行问题，可以新增样式强制工具栏不自动换行：

<MUIDataTable
  title=""
  data={rows}
  columns={columns}
  options={{
    selectableRowsHeader: false,
    selectableRowsHideCheckboxes: true,
    customToolbar: () => (<HeaderElements />),
    // 新增配置覆盖工具栏默认样式
    setTableProps: () => ({
      sx: {
        '& .MUIDataTableToolbar': {
          flexWrap: 'nowrap'
        }
      }
    })
  }}
/>

内容的提问来源于stack exchange，提问作者lrefopam