react-table#useBlockLayout TypeScript Examples

Table: FC<Props> = memo(({ data, height, onCellClick, width, columnMinWidth }) => {
  const theme = useTheme();
  const [ref, headerRowMeasurements] = useMeasure();
  const tableStyles = getTableStyles(theme);

  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns: useMemo(() => getColumns(data, width, columnMinWidth ?? 150), [data, width, columnMinWidth]),
      data: useMemo(() => getTableRows(data), [data]),
    },
    useSortBy,
    useBlockLayout
  );

  const RenderRow = React.useCallback(
    ({ index, style }) => {
      const row = rows[index];
      prepareRow(row);
      return (
        <div {...row.getRowProps({ style })} className={tableStyles.row}>
          {row.cells.map((cell: Cell, index: number) => (
            <TableCell
              key={index}
              field={data.fields[cell.column.index]}
              tableStyles={tableStyles}
              cell={cell}
              onCellClick={onCellClick}
            />
          ))}
        </div>
      );
    },
    [prepareRow, rows]
  );

  let totalWidth = 0;

  for (const headerGroup of headerGroups) {
    for (const header of headerGroup.headers) {
      totalWidth += header.width as number;
    }
  }

  return (
    <div {...getTableProps()} className={tableStyles.table}>
      <CustomScrollbar>
        <div>
          {headerGroups.map((headerGroup: any) => (
            <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()} ref={ref}>
              {headerGroup.headers.map((column: any) =>
                renderHeaderCell(column, tableStyles.headerCell, data.fields[column.index])
              )}
            </div>
          ))}
        </div>
        <FixedSizeList
          height={height - headerRowMeasurements.height}
          itemCount={rows.length}
          itemSize={tableStyles.rowHeight}
          width={totalWidth ?? width}
          style={{ overflow: 'hidden auto' }}
        >
          {RenderRow}
        </FixedSizeList>
      </CustomScrollbar>
    </div>
  );
})

Table: React.FC<TableProps> = observer(function Table({ columns, data }) {
    const { proposals, filters } = useStores()
    const defaultColumn = React.useMemo(
        () => ({
            width: 50,
        }),
        [],
    )
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, setHiddenColumns, state } =
        useTable<UIProposal>(
            {
                columns,
                data,
                defaultColumn,
                autoResetSortBy: false,
                initialState: {
                    sortBy: [{ id: "countryName" }, { id: "qualityLevel", desc: true }],
                    hiddenColumns: filters.country == null ? hiddenColsAllCountries : hiddenColsSingleCountry,
                },
            },
            useBlockLayout,
            useSortBy,
        )
    useEffect(() => {
        if (filters.country == null) {
            if (state.hiddenColumns != hiddenColsAllCountries) {
                setHiddenColumns(hiddenColsAllCountries)
            }
        } else {
            if (state.hiddenColumns != hiddenColsSingleCountry) {
                setHiddenColumns(hiddenColsSingleCountry)
            }
        }
    }, [filters.country])
    const listRef = useRef<FixedSizeList>(null)
    useEffect(() => {
        if (proposals.suggestion) {
            const idx = rows.findIndex((row) => row.original.providerId === proposals.suggestion?.providerId)
            if (idx != -1) {
                listRef.current?.scrollToItem(idx, "center")
            }
        }
    }, [proposals.suggestion, data])
    const renderRow = React.useCallback(
        ({ index, style }: { index: number; style: CSSProperties }): JSX.Element => {
            return <RowRenderer prepareRow={prepareRow} rows={rows} index={index} style={style} />
        },
        [prepareRow, rows],
    )
    return (
        <div className="table" {...getTableProps()}>
            <div className="thead">
                {headerGroups.map((headerGroup) => {
                    const { style, key, ...restHeaderGroupProps } = headerGroup.getHeaderGroupProps()
                    return (
                        <div key={key} className="tr" style={{ ...style, width: "100%" }} {...restHeaderGroupProps}>
                            {headerGroup.headers.map((column) => {
                                const { key, ...restHeaderProps } = column.getHeaderProps(
                                    column.getSortByToggleProps({
                                        title: column.canSort ? `Sort by ${column.Header}` : undefined,
                                    }),
                                )
                                return (
                                    <div
                                        key={key}
                                        className={`th ${
                                            column.isSorted ? (column.isSortedDesc ? "sorted-desc" : "sorted-asc") : ""
                                        }`}
                                        {...restHeaderProps}
                                    >
                                        {column.render("Header")}
                                    </div>
                                )
                            })}
                        </div>
                    )
                })}
            </div>
            <div className="tbody" {...getTableBodyProps()}>
                <AutoSizer>
                    {({ width, height }): JSX.Element => (
                        <FixedSizeList
                            itemCount={data.length}
                            itemSize={30}
                            width={width}
                            height={height}
                            ref={listRef}
                        >
                            {renderRow}
                        </FixedSizeList>
                    )}
                </AutoSizer>
            </div>
        </div>
    )
})