添加一个按钮来反应材料表工具栏

Question

我想向材料表工具栏添加一个按钮。它没有做任何与桌子相关的事情。它只是打开一个包含一些信息的模式

我想在“添加项目”按钮的左侧添加一个名为“引用”的按钮。

沙盒代码：https://codesandbox.io/embed/charming-yalow-4pnk4?fontsize=14&hidenavigation=1&theme=dark

Answer 1

正如 Will Evers 所提到的，可以通过使用 Toolbar 属性向 MaterialTable 组件的 Toolbar 添加任何必要的内容：

          Toolbar: (props) => (
            <div
              style={{
                display: "flex",
                justifyContent: "flex-end",
                alignItems: "center"
              }}
            >
              <Button
                style={{ height: "fit-content" }}
                color="primary"
                variant="contained"
              >
                Quotations
              </Button>
              <div style={{ width: "13rem" }}>
                <MTableToolbar {...props} />
              </div>
            </div>
          ),

Working Demo

Answer 2

根据文档，您似乎需要覆盖表格的工具栏组件，并且您应该能够在列标题上方添加您想要的任何内容：

https://material-table.com/#/docs/features/component-overriding

https://i.stack.imgur.com/J0mqf.png