I would like the header of the first cell to start from the first row, and not from the second. So that the cell is one whole, and not divided into two.

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

CodePudding user response：

here is the solution:

<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

CodePudding user response：

It is possible to leave empty space in Header property.

So the code would look like this:

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