问题描述
我在我的React项目中使用MUIDataTable。我只想通过在表中添加边框来对列进行分组。请在下面找到我正在使用的代码。
const columns = [
{
name: "name",label: "Name",options: {
filter: true,sort: true,[customBodyRender: (value) => {
return (
<div style={{ borderRight: "solid 2px" }} >
{value}
</div>
)
}][1]
}
},{
name: "company",label: "Company",sort: false,}
},{
name: "city",label: "City",customBodyRender: (value) => {
return (
<div style={{ borderRight: "solid 2px" }} >
{value}
</div>
)
}
}
},{
name: "state",label: "State",];
const data = [
{ name: "Joe James",company: "Test Corp",city: "Yonkers",state: "NY" },{ name: "John Walsh",city: "Hartford",state: "CT" },{ name: "Bob Herm",city: "Tampa",state: "FL" },{ name: "James Houston",city: "Dallas",state: "TX" },{ name: "",company: "",state: "" },city: "",];
const options = {
filterType: 'checkBox',};
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
这无法正常工作。边框高度不合适或在表行中没有数据的情况下,根本没有边框。 我也希望边框出现在表格标题上。
我已附上输出快照以供参考。 OutputImage
有没有办法解决这个问题?
解决方法
有一个 PR 但它只是测试版 https://github.com/gregnb/mui-datatables/pull/1441,尚未合并到主分支