如何更改反应物料表中自由动作图标的位置

Question

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

我知道它就像component-overriding。但是无法做到这一点，也找不到任何示例。

Answer 1

感谢大家的关注。这很容易，但是以前没有找到。 我在材料表标记中添加了一个选项

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

Answer 2

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

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