Full Width Resizable Table + Virtualized Rows (React-Window) | Is it possible?

[mtshv]

Hey guys!

I am struggling to combine the functionality of the Full Width Resizable Table example with Virtualized Rows (React-Window) example

The problem, that I have is that header columns and body columns are not aligned.

Case A:
Setting width of the FixedSizeList to totalColumnsWidth results in not full-width table body

      <div className="tbody">
        <FixedSizeList
          height={400}
          itemCount={rows.length}
          itemSize={35}
          width={totalColumnsWidth + scrollBarSize} // <=====
        >
          {RenderRow}
        </FixedSizeList>

Case B:
Removing width property from the FixedSizeList OR Setting it to "100%" results in the full-width table body BUT headers columns and body columns are not aligned during/after resizing.

      <div className="tbody">
        <FixedSizeList
          height={400}
          itemCount={rows.length}
          itemSize={35}
          // width={totalColumnsWidth + scrollBarSize} // Try commenting this line
        >
          {RenderRow}
        </FixedSizeList>

---

And I am wondering if this is possible. If you have any ideas on the subject or successful implementation, please share.

Here is my sandbox https://codesandbox.io/s/react-table-full-width-resizable-table-virtualized-rows-rqdsr

P.S. I did search for hints through the repo issues discussions with no success:

• Issue creating virtualized table + responsive + responsive columns #2913
• Virtualized Table + Resizeable Columns #2607
• Virtualized Rows (React-Window): crooked columns #2227
• Why useFlexLayout set width #2022

Any help would be greatly appreciated 🙏

[gopusrikanth04]

Hi @mtshv,
Did you find a solution to this. I am also trying to solve this issue but not solved. If you solved please tell me.

Thank You.

[luisdiazco]

I used react portals and render the table in a modal that is the size of the screen

[Chalkzhu]

Hi! Brother, I tried to write an example, I don't know if it is what you need
Resizable Table + Virtualized

[russell-holz]

link to the source code?

[Chalkzhu]

链接到源代码？

https://github.com/Chalkzhu/ck-table/blob/main/lib/table/ckBody.js

[ivan-palatov]

Here is my working solution

  const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    getTableBodyProps,
    state,
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
    },
    useFlexLayout,
    useResizeColumns,
  );

  // the reason why this callback is a function returning a function
  // is because I also needed the useRowSelect to display the state of checkboxes properly
  const renderRow = useCallback(
    (rows: Row<T>[]) =>
      ({ index, style }: any) => {
        const row = rows[index];

        // just a normal table row stuff, like in any example, except you should pass style to the parent element of it, obviously
        return (
          <TableRow
            prepareRow={prepareRow as any}
            row={row as any}
            style={style}
          />
        );
      },
    [prepareRow]
  );

  return (
    <div
      style={{
        height: "calc(100vh - 152px);", // depending on your use case, you might not need it
        overflowY: "hidden",
        overflowX: "auto", // important
      }}
    >
      <table
        {...getTableProps()}
        style={{
          height: "100%",
          overflow: "hidden", // important
          tableLayout: "fixed",
        }}
      >
        <thead style={{ overflow: "hidden" /* also important, otherwise you would get head resizing, while other rows would not  */ }}>
          {headerGroups.map((headerGroup) => (
            <tr
              {...headerGroup.getHeaderGroupProps({ style: { width: "100%" /* also important */ } })}
            >
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                    {/* below is a regular resizer from examples */}
                    <Resizer column={column} />
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody
          {...getTableBodyProps()}
          style={{ height: "100%", overflow: "hidden" /* important for react-window autosizer */ }}
        >
          <ReactVirtualizedAutoSizer disableWidth>
            {({ height }) => (
              <InfiniteLoader
                itemCount={itemCount}
                isItemLoaded={isItemLoaded}
                loadMoreItems={loading ? () => {} : loadMoreItems}
                minimumBatchSize={20}
              >
                {({ onItemsRendered, ref }) => (
                  <FixedSizeList
                    height={height}
                    itemCount={rows.length}
                    onItemsRendered={onItemsRendered}
                    ref={ref}
                   // below might be important, I have no idea, maybe "auto" is fine too
                    width="100%"
                    itemSize={52}
                  >
                    {renderRow(rows)}
                  </FixedSizeList>
                )}
              </InfiniteLoader>
            )}
          </ReactVirtualizedAutoSizer>
        </tbody>
      </table>
    </div>
  );

[aepp]

This puts a div as a direct child in the tbody and the resulting layout doesn't pass DOM nesting validation...

[AbdelrhmanX7]

i fixed it by using this code
export function getWindowDimensions() { const { innerWidth: getFullWidth } = window; return { getFullWidth }; }

Table ==> {...{ style: { width: table.getCenterTotalSize() + (getFullWidth / 2), //get a half width by using table.getCenterTotalSize() and second half by using get Full Width / 2 and collect them to get a full width }, }}