我正在尝试使用 Material 表,我想使用 colspan
和 rowspan
在 Material 表中。我已经搜索了 example 和 sample,但我什么也没看到。
目前,我以前喜欢在 Material 表中
<TableHead>
<TableRow>
<TableCell rowSpan={2}>Approve</TableCell>
<TableCell rowSpan={2} align="center">Date</TableCell>
<TableCell rowSpan={2} align="center">Emp id</TableCell>
<TableCell rowSpan={2} align="center">Emp Name</TableCell>
<TableCell rowSpan={2} align="center">Shift</TableCell>
<TableCell rowSpan={2} align="center">Cost Center</TableCell>
<TableCell colSpan={2} align="center">In</TableCell>
<TableCell colSpan={2} align="center">Out</TableCell>
<TableCell rowSpan={2} align="center">Action</TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Time</TableCell>
<TableCell align="center">Date</TableCell>
<TableCell align="center">Time</TableCell>
<TableCell align="center">Date</TableCell>
</TableRow>
</TableHead>
我如何才能在
material-table
中实现相同的设计?
最佳答案
您可以使用 material-table 的 components 属性来创建自定义标题。
function App() {
const columns = [...];
const data = [...];
return (
<div className="App">
<MaterialTable
columns={columns}
data={data}
components={{
Header: props => {
return (
<TableHead>
<TableRow>
<TableCell rowSpan={2}>Approve</TableCell>
<TableCell colSpan={2} align="center">
In
</TableCell>
<TableCell colSpan={2} align="center">
Out
</TableCell>
<TableCell rowSpan={2} align="center">
Action
</TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Time</TableCell>
<TableCell align="center">Date</TableCell>
<TableCell align="center">Time</TableCell>
<TableCell align="center">Date</TableCell>
</TableRow>
</TableHead>
);
},
Row: ({ data }) => {
return (
<TableRow>
<TableCell>{data.approve}</TableCell>
<TableCell align="center">{data.inTime}</TableCell>
<TableCell align="center">{data.inDate}</TableCell>
<TableCell align="center">{data.outTime}</TableCell>
<TableCell align="center">{data.outDate}</TableCell>
<TableCell align="center">{data.action}</TableCell>
</TableRow>
);
}
}}
/>
</div>
);
}
演示:codesandbox link
关于reactjs - Material 表标题 react 中的 Col span 和 Row span,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58370839/