react-table#useResizeColumns JavaScript Examples

export default function Table({
  columns,
  data,
  dispatch: dataDispatch,
  skipReset,
}) {
  const sortTypes = useMemo(
    () => ({
      alphanumericFalsyLast(rowA, rowB, columnId, desc) {
        if (!rowA.values[columnId] && !rowB.values[columnId]) {
          return 0;
        }

        if (!rowA.values[columnId]) {
          return desc ? -1 : 1;
        }

        if (!rowB.values[columnId]) {
          return desc ? 1 : -1;
        }

        return isNaN(rowA.values[columnId])
          ? rowA.values[columnId].localeCompare(rowB.values[columnId])
          : rowA.values[columnId] - rowB.values[columnId];
      },
    }),
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    totalColumnsWidth,
  } = useTable(
    {
      columns,
      data,
      defaultColumn,
      dataDispatch,
      autoResetSortBy: !skipReset,
      autoResetFilters: !skipReset,
      autoResetRowState: !skipReset,
      sortTypes,
    },
    useBlockLayout,
    useResizeColumns,
    useSortBy
  );

  const RenderRow = React.useCallback(
    ({ index, style }) => {
      const row = rows[index];
      prepareRow(row);
      return (
        <div {...row.getRowProps({ style })} className="tr">
          {row.cells.map(cell => (
            <div {...cell.getCellProps()} className="td">
              {cell.render('Cell')}
            </div>
          ))}
        </div>
      );
    },
    [prepareRow, rows]
  );

  function isTableResizing() {
    for (let headerGroup of headerGroups) {
      for (let column of headerGroup.headers) {
        if (column.isResizing) {
          return true;
        }
      }
    }

    return false;
  }

  return (
    <>
      <div
        {...getTableProps()}
        className={clsx('table', isTableResizing() && 'noselect')}
      >
        <div>
          {headerGroups.map(headerGroup => (
            <div {...headerGroup.getHeaderGroupProps()} className="tr">
              {headerGroup.headers.map(column => column.render('Header'))}
            </div>
          ))}
        </div>
        <div {...getTableBodyProps()}>
          <FixedSizeList
            height={window.innerHeight - 100}
            itemCount={rows.length}
            itemSize={40}
            width={totalColumnsWidth + scrollbarWidth}
          >
            {RenderRow}
          </FixedSizeList>
          <div
            className="tr add-row"
            onClick={() => dataDispatch({ type: ActionTypes.ADD_ROW })}
          >
            <span className="svg-icon svg-gray icon-margin">
              <PlusIcon />
            </span>
            New
          </div>
        </div>
      </div>
    </>
  );
}

DfTableV2 = ({
  columns,
  data,
  renderRowSubComponent,
  showPagination,
  manual,
  totalRows,
  page,
  defaultPageSize,
  onPageChange,
  enableSorting,
  onSortChange,
  noDataText,
  disableResizing,
  columnCustomizable,
  name,
  loading,
  noMargin,
  multiSelectOptions,
  onRowClick,
  onCellClick,
  getRowStyle,
  getCellStyle,
}) => {
  defaultPageSize = getDefaultPageSize({
    showPagination,
    inputDefaultPageSize: defaultPageSize,
    data
  });

  const rtColumns = useColumnFilter({
    columns,
    columnCustomizable,
    renderRowSubComponent,
    name,
    multiSelectOptions,
  });

  const defaultColumn = React.useMemo(
    () => ({
      // When using the useFlexLayout:
      minWidth: 30, // minWidth is only used as a limit for resizing
      width: 100, // width is used for both the flex-basis and flex-grow
      maxWidth: 500, // maxWidth is only used as a limit for resizing
    }),
    []
  )

  const additionalTableParams = {};

  if (manual) {
    additionalTableParams.pageCount = getPageCount({
      manual,
      showPagination,
      defaultPageSize,
      totalRows,
      data
    });
  } else if (showPagination) {
    additionalTableParams.initialState = {
      pageSize: defaultPageSize
    };
  }

  const tableInstance = useTable(
    {
      columns: rtColumns,
      data,
      defaultColumn,
      autoResetExpanded: false,
      autoResetPage: false,
      manualPagination: !!manual,
      paginateExpandedRows: false,
      disableSortBy: !enableSorting,
      manualSortBy: !!manual,
      autoResetSortBy: false,
      disableMultiSort: true,
      autoResetSelectedRows: false,
      ...additionalTableParams
    },
    useResizeColumns,
    useFlexLayout,
    useSortBy,
    useExpanded,
    usePagination,
    useRowSelect
  );
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    visibleColumns,
    page: rtPage,
    gotoPage,
    pageCount,
    state: {
      pageIndex,
      sortBy,
    },
    toggleAllRowsExpanded,
    setPageSize,
    toggleAllPageRowsSelected,
    selectedFlatRows
  } = tableInstance;

  useEffect(() => {
    // in case of manual pagination, parent should be passing current page number
    if (manual && page !== null && page !== undefined) gotoPage(page);
  }, [page]);

  useEffect(() => {
    // whenever pageIndex changes, existing expanded rows should be collapsed
    // all rows are deselected
    toggleAllRowsExpanded(false);
    toggleAllPageRowsSelected(false);
  }, [pageIndex]);

  useEffect(() => {
    // reset page index to 0 when number of rows shown in the page changes
    gotoPage(0);
  }, [defaultPageSize]);

  useEffect(() => {
    if (defaultPageSize !== data.length) {
      setPageSize(defaultPageSize);
    }
  }, [defaultPageSize, data]);

  useEffect(() => {
    if (manual && onSortChange) onSortChange(sortBy);
  }, [sortBy]);

  return (
    <div className={styles.tableContainer}>
      <div className={classNames(styles.table, {
        [styles.noMargin]: noMargin
      })} {...getTableProps()}>
        {
          loading ? <AppLoader small className={styles.loader} /> : <>
            <div>
              {
                headerGroups.map(headerGroup => {
                  const { key, ...rest } = headerGroup.getHeaderGroupProps();
                  return <div key={key} {...rest}>
                    {
                      headerGroup.headers.map(column => {
                        const { key, onClick, ...rest } = column.getHeaderProps(enableSorting ? column.getSortByToggleProps() : undefined);
                        return <div className={classNames(styles.headerCell, {
                          [styles.headerOverflowShown]: !!column.showOverflow
                        })} key={key} {...rest}>
                          <span className={styles.headerContent} onClick={onClick}>
                            <span>
                              {column.render('Header')}
                            </span>
                            <span className={`${styles.sortIndicator}`}>
                              {
                                column.isSorted
                                  ? column.isSortedDesc
                                    ? <i className="fa fa-angle-down" />
                                    : <i className="fa fa-angle-up" />
                                  : null
                              }
                            </span>
                          </span>
                          {column.canResize && !disableResizing ? (
                            <div
                              {...column.getResizerProps()}
                              className={styles.headerCellResizer}
                            />
                          ) : null}
                        </div>
                      })}
                  </div>
                })}
            </div>
            <div {...getTableBodyProps()}>
              {
                rtPage.map((row, index) => {
                  prepareRow(row);
                  const { key, style, ...rest } = row.getRowProps();
                  return (
                    <React.Fragment key={key} >
                      <div
                        className={classNames(styles.row, {
                          [styles.oddRow]: index % 2 !== 0,
                          [styles.expandableRow]: !!renderRowSubComponent,
                          [styles.clickableRow]: !!onRowClick
                        })}
                        onClick={() => {
                          if (renderRowSubComponent) {
                            row.toggleRowExpanded();
                          } else if (onRowClick) {
                            onRowClick(row);
                          }
                        }}
                        style={{ ...(getRowStyle ? getRowStyle(row) : {}), ...style }}
                        {...rest}
                      >
                        {
                          row.cells.map(cell => {
                            const { key, style, ...rest } = cell.getCellProps();
                            const { column } = cell;
                            return (
                              <div
                                className={classNames(styles.cell, {
                                  [styles.wrap]: !column.noWrap
                                })}
                                key={key}
                                onClick={() => {
                                  if (onCellClick) {
                                    onCellClick(cell);
                                  }
                                }}
                                style={{ ...(getCellStyle ? getCellStyle(cell) : {}), ...style }}
                                {...rest}>
                                {
                                  cell.render('Cell')
                                }
                              </div>
                            )
                          })
                        }
                      </div>
                      {
                        row.isExpanded ? (
                          <div>
                            <div colSpan={visibleColumns.length}>
                              {renderRowSubComponent({ row })}
                            </div>
                          </div>
                        ) : null
                      }
                    </React.Fragment>
                  )
                })}
            </div>
          </>
        }
        {
          !data.length && !loading ? (
            <div className={styles.noDataPlaceholder}>
              {noDataText || 'No rows found'}
            </div>
          ) : null
        }
      </div>
      {
        showPagination && data.length && !loading ? (
          <div className={styles.paginationWrapper}>
            <Pagination
              pageCount={pageCount}
              pageIndex={pageIndex}
              onPageChange={(selectedIndex) => {
                if (manual && onPageChange) {
                  onPageChange(selectedIndex);
                }
                if (!manual) {
                  gotoPage(selectedIndex);
                }
              }}
            />
          </div>
        ) : null
      }
      {(multiSelectOptions && selectedFlatRows.length) ? (<div className={styles.multiSelectActions}>
        <MultiselectActions
          toggleAllPageRowsSelected={toggleAllPageRowsSelected}
          selectedFlatRows={selectedFlatRows ?? []}
          multiSelectOptions={multiSelectOptions}
          data={data}
        />
      </div>) : null}
    </div>
  );
}

export default function Table({
    columns,
    data,
    filters = [],
    filterState,
    globalFilter,
    defaultColumn,
    initialState,
    ExpandedRow,
    customFilterProps = {},
    enableResizeColumns = true,
}) {
    const [records, setRecords] = useState(data);

    useEffect(() => {
        if (filters.length) {
            setRecords(data.filter(record => filters.every(filter => filter(record, filterState, customFilterProps))));
        } else {
            setRecords(data);
        }
    }, [filterState, data, customFilterProps]);

    const table = useTable(
        {
            initialState: { pageSize: 25, ...initialState },
            columns,
            data: records,
            defaultColumn,
            globalFilter,
            manualFilters: true,
            autoResetGlobalFilter: false,
            autoResetSortBy: false,
            autoResetPage: false,
            autoResetExpanded: false,
            getRowId: useCallback(row => row.id, []),
        },
        useFlexLayout,
        useResizeColumns,
        useGlobalFilter,
        useSortBy,
        useExpanded,
        usePagination
    );

    useEffect(() => {
        // Reset to first page when filters are changed
        table.gotoPage(0);
    }, [filterState]);

    const moveRow = (dragIndex, hoverIndex) => {
        const dragRecord = records[dragIndex];
        setRecords(
            update(records, {
                $splice: [
                    [dragIndex, 1],
                    [hoverIndex, 0, dragRecord],
                ],
            })
        );
    };

    return (
        <>
            <div className='flex flex-row flex-wrap justify-between pb-3 px-3 items-end'>
                <span className='italic text-sm'>Showing: {table.page.length} rows</span>
                <SearchBox globalFilter={table.state.globalFilter} setGlobalFilter={table.setGlobalFilter} />
            </div>
            <div className='overflow-auto px-3'>
                <DndProvider backend={HTML5Backend}>
                    <div {...table.getTableProps()} style={{ minWidth: 'min-content' }}>
                        <div>
                            {table.headerGroups.map(headerGroup => (
                                <div
                                    {...headerGroup.getHeaderGroupProps()}
                                    className='heading-accent-md leading-loose border-b border-accent w-full'
                                >
                                    {headerGroup.headers.map(column => (
                                        <div
                                            {...column.getHeaderProps(column.getSortByToggleProps())}
                                            className='relative font-bold text-center'
                                        >
                                            {column.render('Header')}
                                            {column.isSorted && (
                                                <span className='icon-base absolute'>
                                                    {column.isSortedDesc ? 'arrow_drop_down' : 'arrow_drop_up'}
                                                </span>
                                            )}
                                            {enableResizeColumns && (
                                                <span {...column.getResizerProps()} className='resizer icon-lg'>
                                                    drag_handle
                                                </span>
                                            )}
                                        </div>
                                    ))}
                                </div>
                            ))}
                        </div>
                        <div {...table.getTableBodyProps()}>
                            {table.page.map(
                                (row, index) =>
                                    table.prepareRow(row) || (
                                        <Row
                                            index={index}
                                            row={row}
                                            moveRow={moveRow}
                                            isReorderEnabled={filterState?.reorderEnabled}
                                            ExpandedRow={ExpandedRow}
                                            {...row.getRowProps()}
                                        />
                                    )
                            )}
                        </div>
                        <div className='flex flex-col justify-center text-center'>
                            <div>
                                <PageButton
                                    onClick={() => table.gotoPage(0)}
                                    disabled={!table.canPreviousPage}
                                    text='<<'
                                />
                                <PageButton
                                    onClick={() => table.previousPage()}
                                    disabled={!table.canPreviousPage}
                                    text='<'
                                />
                                <span className='text-xs'>
                                    {table.state.pageIndex + 1} of {table.pageOptions.length}
                                </span>
                                <PageButton onClick={() => table.nextPage()} disabled={!table.canNextPage} text='>' />
                                <PageButton
                                    onClick={() => table.gotoPage(table.pageCount - 1)}
                                    disabled={!table.canNextPage}
                                    text='>>'
                                />
                            </div>

                            <span className='text-xs'>
                                Show:
                                <select
                                    className='input-primary text-xs p-0 ml-1 text-center'
                                    value={table.state.pageSize}
                                    onChange={e => {
                                        table.setPageSize(Number(e.target.value));
                                    }}
                                >
                                    {[25, 50, 100, 200].map(pageSize => (
                                        <option key={pageSize} value={pageSize}>
                                            {pageSize}
                                        </option>
                                    ))}
                                </select>
                            </span>
                        </div>
                    </div>
                </DndProvider>
            </div>
        </>
    );
}