有没有办法对 MUI-dataTable 中的列进行分组？答案

【问题标题】：Is there a way to group columns in MUI-dataTable?有没有办法对 MUI-dataTable 中的列进行分组？
【发布时间】：2021-01-14 22:54:27
【问题描述】：

我在我的 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",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "city",
  label: "City",
  options: {
   filter: true,
   sort: false,
   customBodyRender: (value) => {
          return (
            <div style={{ borderRight: "solid 2px" }} >
              {value}
            </div>
          )
        }
  }
 },
 {
  name: "state",
  label: "State",
  options: {
   filter: true,
   sort: false,
  }
 },
];

const data = [
 { name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
 { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
 { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
 { name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" },
 { name: "", company: "", city: "Tampa", state: "" },
    { name: "", company: "", city: "", state: "" },
    { name: "", company: "", city: "Hartford", state: "" },
    { name: "", company: "", city: "", state: "" },
    { name: "", company: "", city: "", state: "" },
    { name: "", company: "", city: "", state: "" },
];
 
const options = {
  filterType: 'checkbox',
};
 
<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

这没有按预期工作。要么边框高度不合适，要么表格行中没有数据，根本没有边框。我还希望边框出现在表格标题上。

我已附上输出的快照以供参考。 OutputImage

有没有办法解决这个问题？

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

有一个 PR 但它只是测试版 https://github.com/gregnb/mui-datatables/pull/1441，尚未合并到主分支中

【讨论】：