如何合并空表头

Question

export const Columns = [
    {
        Header:"Id",
        // accessor:'id',
        columns:[
            {
                Header:'Id1',
                accessor:'id'
            },
            {
                Header:'Id2',
                // accessor:'id'
            },
        ]
    },
    {
        Header:"First Name",
        accessor:'first_name',
        colSpan:2
    },
    {
        Header:"Last Name",
        accessor:'last_name'
    },
    {
        Header:"Email",
        accessor:'email'
    },
    {
        Header:"Gender",
        accessor:'gender'
    }
]

使用 react-table liberay 重新显示表数据的逻辑我需要删除名字、姓氏、电子邮件和性别上方的空标题。作为参考，我在下面附上了一张图片.

我尝试使用反应表呈现数据，当我有一个 id 的子列时，我现在为其余列提供了空标题，以便删除空标题我应该怎么做。

Answer 1

1.) 没有标题的组（唯一ID）

创建一个空的

header

和独特的

accessor

的新组。

export const Columns = [
    {
        Header: "Id",
        columns: [
            {
                Header: 'Id1',
                accessor: 'id'
            },
            {
                Header: 'Id2',
            },
        ]
    },
    {
        Header: "", // empty header (if have got unique accessor)
        accessor: 'global-header', // important unique id for enable empty header
        columns: [
          {
              Header: "First Name",
              accessor: 'first_name',
              colSpan: 2
          },
          {
              Header: "Last Name",
              accessor: 'last_name'
          },
          {
              Header: "Email",
              accessor: 'email'
          },
          {
              Header: "Gender",
              accessor: 'gender'
          }
       ]
    }
]

2.) 没有标题的组（空格）

或者您可以将组的标题设置为空格（默认）：

export const Columns = [
    {
        Header: "Id",
        columns: [
            {
                Header: 'Id1',
                accessor: 'id'
            },
            {
                Header: 'Id2',
            },
        ]
    },
    {
        Header: " ", // add space
        columns: [
          // ... - here your ungrouped columns
       ]
    }
]

3.) 使用 CSS

或者用 css 你能隐藏

border-right

当标题由反应生成而你没有声明时：

<th style={
  column.render('Header') instanceof Object ? { borderRight: 'none' } : {}
}>
  ...
</th>