React-table。 header 列从第二行开始，而不是第一行

Question

我希望第一个单元格的 header 从第一行开始，而不是从第二行开始。这样细胞就是一个整体，而不是一分为二。

沙盒：https://codesandbox.io/s/react-table-pagination-and-sort-forked-slnpt4?file=/src/App.js

Answer 1

解决方法如下：

<thead>
          {headerGroups.map((headerGroup, index) =>
            index > 0 ? (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  // Add the sorting props to control sorting. For this example
                  // we can add them into the header props
                  <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                    {column.render("Header")}
                    {/* Add a sort direction indicator */}
                  </th>
                ))}
              </tr>
            ) : null
          )}
        </thead>

here is the running code

Answer 2

可以在 Header 属性中留空 space。所以代码看起来像这样：

const columns = React.useMemo(
    () => [
      {
        Header: "First Name",
        columns: [
          {
            Header: "",
            accessor: "firstName"
          }
        ]
      },
      {
        Header: "Фамилия",
        columns: [
          {
            Header: "lastName",
            accessor: "lastName"
          }
        ]
      }
    ],
    []
  );

看起来像这样：

Please, see the complete example at codesandbox

更新：

可以通过CSS:

删除单元格中的边框线

table thead tr:first-child th:first-child {  
  border-bottom: 0px solid #777;
}

table thead tr:nth-child(even) th:first-child {  
  border-top: 0px;
}

Please, see an updated example at sandbox

React-table。 header 列从第二行开始，而不是第一行

React-table. the column header starts with the second line, not the first

reactjs

react-table