如何在 React material-table 中更改自由动作图标的位置

Question

我想在左上角的 material-table 中放置一个 freeAction 按钮。这是我想要的插图。

我知道它类似于 component-overriding。但是无法做到这一点，也找不到任何例子。

Answer 1

感谢大家的关注。太简单了，之前没找到。我在 Material-Table 标记中添加了一个选项作为

  options={{
    search: true,
    actionsColumnIndex: -1,
    toolbarButtonAlignment:"left" // here is the option to change toolbar buttons' alignment
  }}

Answer 2

您可以通过覆盖 Toolbar 组件而不是使用 actions 属性来实现。以下是您的 <MaterialTable /> 上需要的 components 属性的示例代码，您可以根据需要更改样式和组件：

components={{
    Toolbar: (toolbarProps) => (
      <Box display="flex" alignItems="center">
        <Button
          style={{ marginLeft: '8px', marginRight: 'auto' }}
          variant="contained"
          color="secondary"
        >
          Refresh
        </Button>
        <MTableToolbar {...toolbarProps} />
      </Box>
    ),
  }}

如何在 React material-table 中更改自由动作图标的位置

How to change the position of a free action icon in react material-table

reactjs

material-ui

material-table