reactjs 如何合并空表头

fkvaft9z 于 2023-04-20 发布在 React

关注(0)|答案(1)|浏览(90)

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的表数据，我需要删除上面的名字，姓氏，电子邮件和性别的空标题。作为参考，我附上了下面的enter image description here的图像。
我尝试使用react table呈现数据，当我有一个id的子列时，我得到了其余列的空标题，现在为了删除空标题，我应该做什么。

reactjs

来源：https://stackoverflow.com/questions/76054100/how-to-merge-the-empty-header

1条答案

按热度按时间

eyh26e7m1#

创建一个包含空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'
          }
       ]
    }
]

也可以将组的Header设置为space（默认值）：

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

3.）使用CSS

或者使用css，当react生成的头文件不是你声明的时候，你可以隐藏border-right：

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

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 如何合并空表头

1条答案

1.）创建不带Header的组（唯一id）

2.）创建不带Header（空格）的组

3.）使用CSS

相关问题

热门标签

最新问答