reactjs - How to add an Icon to the header of a MUI-Datatable

Question

I'm trying to add an icon Add button to the Mui-Datatable to be placed among the rest of the icons found at the top-left.

How would i go about implementing that?

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