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

Posted 2023-02-21

【中文标题】如何将图标添加到 MUI 数据表的标题

【英文标题】：How to add an Icon to the header of a MUI-Datatable

【发布时间】：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
/>

【参考方案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
/>