材料表列标题旁边的添加按钮

【问题标题】：Add button next to material table column headers材料表列标题旁边的添加按钮
【发布时间】：2020-11-17 06:32:10
【问题描述】：

我想覆盖材料表标题，以便它们旁边包含一个按钮，同时还保留开箱即用的功能，例如排序按钮和单击并拖动以移动列。在您覆盖标题时，您必须覆盖整个标题组件，如何单独覆盖每个列标题，以便在每个标题旁边添加一个按钮，同时保留材料表标题功能？

谢谢

【问题讨论】：

您找到解决方案了吗？
我要做的是去材料表 github 并复制他们的 mtable-header 组件的代码并在其中添加我的按钮。然后我通过props覆盖了MTable中的header组件。

标签： javascript reactjs material-ui material-table

【解决方案1】：

你可以创建一个函数

const createHeaderCell = (title, buttonTitle) => {
   return (<TableCell>
     <div style={{display: "flex", flexDirection: "row">
     {title}
     <Button style={{marginRight: 5}} onClick={() => console.log("clicked")}> 
     {buttonTitle}
     </Button>
     </div>
   </TableCell>)
 }

然后在您的 TableHeader 中使用它，例如：

<TableHeader>
    <TableRow>
        {createHeaderCell("first", "1st button")}
        {createHeaderCell("second", "2nd button")}
    </TableRow>
</TableHeader>

【讨论】：

是的，我知道，但是有没有办法做到这一点，而不会丢失材料表具有的功能，例如排序按钮并单击并拖动以移动列标题？