react-table#useRowSelect JavaScript Examples

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>
  );
}