如何将图标添加到 MUI 数据表的标题答案

【问题标题】：How to add an Icon to the header of a MUI-Datatable如何将图标添加到 MUI 数据表的标题
【发布时间】：2020-11-28 01:26:18
【问题描述】：

我正在尝试向 Mui-Datatable 添加一个图标添加按钮，以放置在左上角的其余图标中。

我将如何实施？

const columns = ["Name", "Company", "City", "State"];

const data = [
 ["Joe James", "Test Corp", "Yonkers", "NY"],
 ["John Walsh", "Test Corp", "Hartford", "CT"],
 ["Bob Herm", "Test Corp", "Tampa", "FL"],
 ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

您可以将customHeadRender 用于特定列。请参阅下面示例中的 Status/DocumentState 列：

const columns = [
        {
            name: "name",
            label: "Document Name",
            options: {
                filter: false
            }
        },
        {
            name: "documentType",
            label: "Document Type",
            options: {
                filter: true,
                sort: true,
            }
        },
        {
            name: "uploadedBy",
            label: "Uploaded by",
            options: {
                filter: true,
                sort: true,
            }
        },
        {
            name: "documentStatus",
            label: "Status",
            options: {
                
                customHeadRender: ({index, ...column}) => {
                    return (
                        <TableCell key={index}>
                            {column.label} <IconButton onClick={() => {
                            showDocumentStatusInfo()
                        }}><InfoIcon/></IconButton>
                        </TableCell>
                    )
                }
            }
        },
    ];

function showDocumentStatusInfo(){
  console.log('column info is printed');
}

然后您将照常列、选项和数据。

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

【讨论】：