React-Table v7 - can't useFlexBox to include resizing to the table

Question

I'm working on react-table to build a reusable table with all of the functionalities put together (Grouping, resizing, filtering, sorting, pagination, etc.).

Here's a codesandbox

 <table {...getTableProps()}>
  <thead>
    {headerGroups?.map((headerGroup) => (
      <tr {...headerGroup?.getHeaderGroupProps()}>
        {headerGroup?.headers?.map((column) => (
          <th
            {...column?.getHeaderProps([
              {
                className: column.className,
                style: column.style
              },
              column?.getSortByToggleProps(),
              column?.canResize && column?.getResizerProps()
            ])}
          >
            {column.canGroupBy ? (
              // If the column can be grouped, add a toggle
              <span {...column.getGroupByToggleProps()}>
                {column.isGrouped ? `On ` : `Off `}
              </span>
            ) : null}
            {column.render("Header")}
            <div>{column?.canFilter ? column.render("Filter") : null}</div>
            <span>
              {column?.isSorted
                ? column?.isSortedDesc
                  ? `${sortIconAscending}`
                  : `${sortIconDescending}`
                : ""}
            </span>
          </th>
        ))}
      </tr>
    ))}
  </thead>
  <tbody>
    {page.map((row, i) => {
      prepareRow(row);
      return (
        <tr style={row.isSelected ? { backgroundColor: "red" } : {}}>
          {row.cells.map((cell) => (
            <td {...cell.getCellProps([])}>
              {" "}
              {cell.isGrouped ? (
                // If it's a grouped cell, add an expander and row count
                <>
                  <span {...row.getToggleRowExpandedProps()}>
                    {row.isExpanded ? " " : " "}
                  </span>
                  {cell.render("Cell")}
                  <span>{`(${row.subRows.length})`}</span>
                </>
              ) : cell.isAggregated ? (
                // If the cell is aggregated, use the Aggregated
                // renderer for cell
                cell.render("Aggregated")
              ) : cell.isPlaceholder ? null : ( // For cells with repeated values, render null
                // Otherwise, just render the regular cell
                cell.render("Cell")
              )}
            </td>
          ))}
        </tr>
      );
    })}
  </tbody>
</table>

However I can't get it to work even though I've followed the examples provided in Full Widht Resizable Table

Basically I'm trying to get the table to be full width of the parent container, but also trying to get it to be resizable. It works fine with using useBlockLayout but the table isn't full width. However, resizing stops working when I switch to useGridLayout/useFlexLayout.

Thanks in advance!

Answer 1

React-table's useFlexLayout and useGridLayout are both used to build non-table layouts, so you should not use tr, td, tbody, etc.

Instead, you need to use divs or any other non-table element with the corresponding react-table props. For example, your <tr> elements should turn into <div {...row.getRowProps()}>. Here's a code sandbox with a working solution with useFlexLayout.

Regarding useGridLayout, you'll probably need more changes to get it to work. Unfortunately, I couldn't find any documentation about it, so I can't help a lot. Having that in mind, I would probably not use it to avoid future headaches