如何将图标添加到MUI-Datatable的标题中

Question

我正在尝试添加一个图标添加按钮到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}
/>

Answer 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}
/>