时间戳

首页 > 解决方案 > 创建通用表

reactjs - 创建通用表

问题描述

我正在创建一个通用动态表，其中在行尾有列、行和操作按钮。所有数据都按预期显示，但标题未显示在操作按钮上。

在此处输入图像描述

有没有办法在操作按钮上显示标题下划线？

数据：

[
    {
        "id": "1231",
        "name": "Michael",
        "phone": "11223311",
        "medical": "YES"
    },
    {
        "id": "32123",
        "name": "Johnson",
        "phone": "3311323",
        "medical": "NO"
    }
]

const headCells = [
    {dataIndex: 'id', name: 'ID' },
    {dataIndex: 'name', name: 'Name' },
    {dataIndex: 'phone', name: 'Phone' },
    {dataIndex: 'medical', name: 'Medical' }
];

const Header = ({ cols }) => {
  return cols.map((col) => (
     <TableCell>{col.name}</TableCell>
   ));
}

const Rows = ({ data, cols }) => {
    if (data) {
        return data.map((row) =>
            <TableRow key={row.uuid}>
                {cols.map(col => <TableCell>{row[col.dataIndex]}</TableCell>)}
                    <TableCell >
                            <IconButton>
                                <SearchIcon color="primary"/>
                            </IconButton>
                    </TableCell>
            </TableRow>
       );
    }
    else return [];
};

return(
<TableContainer component={Paper}>
    <Table stickyHeader aria-label="sticky table">
        <TableHead>
           <TableRow>
             <Header cols={headCells} />
           </TableRow>
        </TableHead>
        <TableBody>
            <Rows data={data} cols={headCells} />
        </TableBody>
    </Table>
</TableContainer>
)

标签： reactjs

解决方案

为什么不手动添加？：

const Header = ({ cols }) => {
  return cols.map((col) => (
     <TableCell >{col.name}</TableCell>
   )).concat( <TableCell className='underline-header'>Actions</TableCell>);
}

CSS：

.underline-header {
    text-decoration: underline;
}

推荐阅读