@planningcenter/tapestry-react 3.0.0 → 4.0.0-rc.2

package/src/Table/Table.js

@@ -1,971 +0,0 @@
-// @flow
-import React, { PureComponent, Children, Fragment } from 'react'
-import { Global } from '@emotion/react'
-import camelCase from 'lodash/camelCase'
-import snakeCase from 'lodash/snakeCase'
-
-import type { PaginationProps } from '../Pagination/Pagination'
-
-import Button from '../Button'
-import DragDrop from '../DragDrop'
-import Pagination from '../Pagination'
-import Spinner from '../Spinner'
-import Summary from '../Summary'
-import HeadingUppercase from '../HeadingUppercase'
-import StackView from '../StackView'
-import { Measure } from '../vendor/react-measure'
-import { range, reorderArray } from '../utils'
-
-import AvatarCell from './AvatarCell'
-import BodyCell from './BodyCell'
-import BodyInnerCell from './BodyInnerCell'
-import BodyRow from './BodyRow'
-import CheckboxCell from './CheckboxCell'
-import ColumnPicker from './ColumnPicker'
-import DateCell from './DateCell'
-import DragCell from './DragCell'
-import DragHandle from './DragHandle'
-import HeaderCell from './HeaderCell'
-import HeaderInnerCell from './HeaderInnerCell'
-import SubRowToggleCell from './SubRowToggleCell'
-import TableBase from './TableBase'
-import TableWrapper from './TableWrapper'
-import { useHover } from '../hooks'
-
-const HEADER_PADDING_OFFSET = 16
-const DRAG_HANDLE_WIDTH = 48
-const SUB_ROW_TOGGLE_WIDTH = 48
-const SUPPORTS_CSS_STICKY =
-  typeof window !== 'undefined' && window.CSS && window.CSS.supports
-
-function Hover({ children }) {
-  const { hover, hoverProps } = useHover()
-  return children({
-    isHover: hover,
-    bindHover: hoverProps,
-  })
-}
-
-type ColumnData = {
-  columnIndex: number,
-  rowIndex: number,
-  isRowHovered: boolean,
-}
-
-type ColumnProps = {
-  /**
-   * Forces the column to always be visible regardless of `hiddenColumnIds`.
-   * This is also used to build a list of eligible columns for the ColumnPicker component.
-   */
-  alwaysVisible?: boolean,
-
-  /**
-   * Controls how the incoming row data is rendered in a cell. Accepts a string
-   * that will be used as an accessor of the row data or a function that returns
-   * the row data as well as extra information about the row and column.
-   */
-  cell: ((row: Object<mixed>, data: Object<ColumnData>) => null) | string,
-
-  /**
-   * Toggles the divider on the column if `columnDividers` is `true`.
-   * Dividers will only beadded/removed on the left side of each column.
-   */
-  divider?: boolean,
-
-  /**
-   * Controls the column header rendering. Accepts a string, element, component
-   * or function.
-   */
-  header?: mixed,
-
-  /**
-   * Used to identify a column. Required when using onRowSort or hiddenColumnIds.
-   */
-  id?: string | number,
-
-  /**
-   * Used to describe a column in ColumnPicker when `header` is used for
-   * something like an icon.
-   */
-  label?: string,
-
-  /**
-   * Determines if a column can be sorted or not. Defaults to `false`.
-   */
-  sortable?: boolean,
-
-  /**
-   * Determines how a sub row cell is rendered. Uses cell as the default accessor
-   * if nothing is provided.
-   */
-  subRowCell?:
-    | ((row: Object<mixed>, data: Object<ColumnData>) => null)
-    | string
-    | null,
-
-  /**
-   * Whether or not the cell's text should truncate, when `false` the cell contents
-   * will wrap. Defaults to `false`.
-   */
-  truncate?: boolean,
-
-  /**
-   * Rotates column header vertically in order to fit more columns. Defaults to `false`.
-   */
-  vertical?: boolean,
-
-  /**
-   * Specifies how wide a column is. If omitted, cell will be measured and
-   * calculated based on the largest column's cell width.
-   */
-  width?: number,
-}
-
-type TableProps = PaginationProps & {
-  /**
-   * Describes the table for screen reader users.
-   */
-  caption?: string,
-
-  /**
-   * Adds a border in between each column.
-   */
-  columnDividers?: boolean,
-
-  /**
-   * Determines how the incoming data is rendered as columns.
-   */
-  columns: Array<ColumnProps | boolean>,
-
-  /**
-   * Uses a smaller header min height and font size.
-   */
-  compactHeader?: boolean,
-
-  /**
-   * Accepts an array of data to be rendered. Data cells are ordered by the
-   * columns array.
-   */
-  data: Array<Object>,
-
-  /**
-   * The default column to sort by.
-   */
-  defaultSortColumnId?: string | number,
-
-  /**
-   * The default direction the table should be sorted by.
-   */
-  defaultSortDirection?: 'ASC' | 'DESC',
-
-  /**
-   * The default order the table should be sorted by when coming from the server.
-   * Parses a string into `columnId` and `sortDirection`.
-   * *Example:*
-   * `-first_name` would be parsed into `{ columnId: 'firstName', direction: Table.DESC }`
-   */
-  defaultSortOrder?: string,
-
-  /**
-   * Provide an empty state when the table has no data.
-   */
-  empty?: mixed,
-
-  /**
-   * Turns each row or subrow into a pseudo link. Returning a string will use
-   * `window.location` by default. You may also pass your own mechanism for
-   * navigating to the link.
-   *
-   * `getRowLink={() => '/my/link'}`
-   *
-   * `getRowLink={() => Turbolinks.visit('/my/link'))}`
-   */
-  getRowLink?: (rowData: Object) => mixed,
-
-  /**
-   * Controls the color of the header
-   */
-  headerColor: string,
-
-  /**
-   * Hide specific columns by their id.
-   */
-  hiddenColumnIds?: Array<string | number>,
-
-  /**
-   * Determines if a column should highlight when hovered.
-   */
-  highlightColumnOnHover?: boolean,
-
-  /**
-   * Accepts an object of keyboard shortcuts that can be performed when hovering
-   * a row. Returns ({ row, rowIndex }, event).
-   */
-  keyboardShortcuts?: Object,
-
-  /**
-   * Puts the table in a loading state and shows a spinner in the middle of the table.
-   */
-  loading?: boolean,
-
-  /**
-   * Provide an accompanying title to the spinner while loading data.
-   */
-  loadingTitle?: string,
-
-  /**
-   * Controls the minimum height of the table.
-   */
-  minHeight?: number | string,
-
-  /**
-   * Controls minimum row height.
-   */
-  minRowHeight?: number | string,
-
-  /**
-   * Callback when a column header has been pressed. Returns ({ columnId, direction })
-   */
-  onColumnSort?: () => void,
-
-  /**
-   * Callback when a row has been sorted. Returns sorted indicies.
-   */
-  onRowSort?: () => void,
-
-  /**
-   * Adds a border in between each row.
-   */
-  rowDividers?: boolean,
-
-  /**
-   * Controls rendering of collapsible sub row content.
-   */
-  subRowData?: (rowData: Object) => Array<Object>,
-}
-
-/**
- * Use to present large sets of data in a logical and digestable way.
- */
-class Table extends PureComponent<TableProps> {
-  static ColumnPicker = ColumnPicker
-
-  static AvatarCell = AvatarCell
-
-  static CheckboxCell = CheckboxCell
-
-  static DateCell = DateCell
-
-  static ASC = 'ASC'
-
-  static DESC = 'DESC'
-
-  static getOppositeSortDirection(direction) {
-    return direction === Table.ASC ? Table.DESC : Table.ASC
-  }
-
-  static getIconDirection(direction) {
-    return direction === Table.ASC ? 'general.upCaret' : 'general.downCaret'
-  }
-
-  static defaultProps = {
-    currentPage: 0,
-    defaultSortColumnId: null,
-    defaultSortDirection: Table.ASC,
-    defaultSortOrder: null,
-    empty: 'No results',
-    headerColor: 'grey-0',
-    hiddenColumnIds: [],
-    minHeight: 48,
-    minRowHeight: 8,
-    onPageChange: () => null,
-    rowDividers: true,
-    totalPages: 0,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      currentSort: this.getDefaultSort(props),
-      highlightedColumnIndex: null,
-      isSorting: false,
-      headerHeights: [],
-      headerHeight: -1,
-      columnWidths: [],
-      rowWidth: -1,
-      offsets: [],
-      openSubRowIndices: [],
-      getLeftOffset: () => null,
-      getRightOffset: () => null,
-    }
-  }
-
-  getSortOrder({ columnId, direction }) {
-    return `${direction === Table.ASC ? '' : '-'}${snakeCase(columnId)}`
-  }
-
-  parseSortOrder(query) {
-    const isDescending = query[0] === '-'
-    return {
-      columnId: camelCase(isDescending ? query.substring(1) : query),
-      direction: isDescending ? Table.DESC : Table.ASC,
-    }
-  }
-
-  getDefaultSort({
-    defaultSortColumnId,
-    defaultSortDirection,
-    defaultSortOrder,
-  }) {
-    const sortOrder = defaultSortOrder
-      ? this.parseSortOrder(defaultSortOrder)
-      : { columnId: defaultSortColumnId, direction: defaultSortDirection }
-    return {
-      ...sortOrder,
-      order: this.getSortOrder(sortOrder),
-    }
-  }
-
-  handleSortStart = () => {
-    this.setState({ isSorting: true })
-  }
-
-  handleSortEnd = ({ source, destination }) => {
-    this.setState({ isSorting: false })
-    this.props.onRowSort(
-      reorderArray({
-        list: this.props.data,
-        startIndex: source.index,
-        endIndex: destination.index,
-      })
-    )
-  }
-
-  handleColumnSort = (id) => {
-    const defaultSort = this.getDefaultSort(this.props)
-    this.setState((state) => {
-      const currentSort = { ...state.currentSort }
-      if (currentSort.columnId === id) {
-        currentSort.direction = Table.getOppositeSortDirection(
-          currentSort.direction
-        )
-      } else {
-        currentSort.columnId = id
-        currentSort.direction = this.props.defaultSortDirection
-      }
-      currentSort.order = this.getSortOrder({
-        columnId: currentSort.columnId,
-        direction: currentSort.direction,
-      })
-      if (this.props.onColumnSort) {
-        const newSort = currentSort.columnId ? currentSort : defaultSort
-        this.props.onColumnSort(newSort)
-      }
-      return { currentSort }
-    })
-  }
-
-  getColumns() {
-    return this.props.columns
-      .filter(
-        (column) =>
-          column !== false &&
-          column !== undefined &&
-          column !== null &&
-          (column.alwaysVisible ||
-            this.props.hiddenColumnIds.indexOf(column.id) === -1)
-      )
-      .map(
-        ({
-          alwaysVisible,
-          cell,
-          divider,
-          header,
-          id,
-          label,
-          sortable,
-          sticky,
-          subRowCell,
-          truncate,
-          vertical,
-          width,
-          ...columnProps
-        }) => ({
-          cell,
-          columnProps,
-          divider,
-          header,
-          id,
-          label,
-          sortable,
-          sticky,
-          subRowCell,
-          truncate,
-          vertical,
-          width,
-        })
-      )
-  }
-
-  getBodyCellMouseHandlers = (columnIndex) => {
-    return this.props.highlightColumnOnHover
-      ? {
-          onMouseOver: () => {
-            this.setState({ highlightedColumnIndex: columnIndex })
-          },
-          onMouseOut: () => {
-            this.setState({ highlightedColumnIndex: null })
-          },
-        }
-      : {}
-  }
-
-  isAnySubRowOpen = () => {
-    return this.state.openSubRowIndices.length > 0
-  }
-
-  handleSubRowToggleAll = () => {
-    this.setState({
-      openSubRowIndices:
-        this.state.openSubRowIndices.length > 0
-          ? []
-          : range(0, this.props.data.length),
-    })
-  }
-
-  isSubRowOpen = (index) => {
-    return this.state.openSubRowIndices.indexOf(index) > -1
-  }
-
-  handleSubRowToggle = (index) => {
-    this.setState((state) => {
-      const openSubRowIndices = [...state.openSubRowIndices]
-      const currentIndex = openSubRowIndices.indexOf(index)
-      if (currentIndex > -1) {
-        openSubRowIndices.splice(currentIndex, 1)
-      } else {
-        openSubRowIndices.push(index)
-      }
-      return { openSubRowIndices }
-    })
-  }
-
-  handleMeasure = (measurements) => {
-    const columns = this.getColumns()
-    const columnCount = columns.length
-    const centerIndex = (columnCount - 1) / 2
-    let defaultLeftOffset = 0
-
-    if (this.props.subRowData) {
-      defaultLeftOffset += SUB_ROW_TOGGLE_WIDTH
-    }
-
-    if (this.props.onRowSort) {
-      defaultLeftOffset += DRAG_HANDLE_WIDTH
-    }
-
-    const headerHeights = measurements
-      ? columns.map((column, columnIndex) => {
-          const measurement = measurements[`${columnIndex}-0`]
-          return measurement ? measurement.height : 0
-        })
-      : []
-
-    const headerHeight = measurements
-      ? Math.max(...[...headerHeights, this.props.compactHeader ? 32 : 48])
-      : null
-
-    const columnWidths = measurements
-      ? Object.keys(measurements)
-          .reduce((cellWidths, key) => {
-            const [columnIndex] = key.split('-')
-            const measurement = measurements[key]
-            const column = columns[columnIndex]
-            if (column) {
-              let cellWidth = column.width || measurement.width
-              if (!cellWidths[columnIndex]) {
-                cellWidths[columnIndex] = []
-              }
-              cellWidths[columnIndex].push(cellWidth)
-            }
-            return cellWidths
-          }, [])
-          .map((cellWidths) => Math.max(...cellWidths))
-      : []
-
-    const rowWidth = measurements
-      ? columnWidths.reduce(
-          (previousWidth, columnWidth, columnIndex) =>
-            previousWidth + columnWidth,
-          defaultLeftOffset
-        )
-      : null
-
-    const offsets = SUPPORTS_CSS_STICKY
-      ? columns.reduce(
-          (offsets, column, index) => {
-            if (column.sticky) {
-              if (index < centerIndex) {
-                offsets.left += columnWidths[index]
-              } else {
-                offsets.right += columnWidths[index]
-              }
-            }
-            return offsets
-          },
-          {
-            left: defaultLeftOffset,
-            right: 0,
-          }
-        )
-      : {
-          left: 0,
-          right: 0,
-        }
-
-    const getLeftOffset = (column, columnIndex) => {
-      return SUPPORTS_CSS_STICKY && column.sticky && columnIndex < centerIndex
-        ? columnWidths.reduce(
-            (total, width, index) =>
-              index < columnIndex ? total + width : total,
-            defaultLeftOffset
-          ) || defaultLeftOffset
-        : undefined
-    }
-
-    const getRightOffset = (column, columnIndex) => {
-      return SUPPORTS_CSS_STICKY && column.sticky && columnIndex >= centerIndex
-        ? columnWidths.reduce(
-            (total, width, index) =>
-              index > columnIndex ? total + width : total,
-            0
-          ) || 0
-        : undefined
-    }
-
-    this.setState({
-      headerHeights,
-      headerHeight,
-      columnWidths,
-      rowWidth,
-      offsets,
-      getLeftOffset,
-      getRightOffset,
-    })
-  }
-
-  render() {
-    const {
-      caption,
-      children,
-      columnDividers,
-      columns: _columns,
-      compactHeader,
-      currentPage,
-      data = [],
-      defaultSortColumnId,
-      defaultSortDirection,
-      defaultSortOrder,
-      empty,
-      getRowLink,
-      headerColor,
-      hiddenColumnIds,
-      highlightColumnOnHover,
-      innerRef,
-      keyboardShortcuts,
-      layout,
-      loading,
-      loadingTitle,
-      minHeight,
-      minRowHeight,
-      onColumnSort,
-      onPageChange,
-      onRowSort,
-      rowDividers,
-      subRowData,
-      totalPages,
-      ...restProps
-    } = this.props
-    const {
-      highlightedColumnIndex,
-      currentSort,
-      isSorting,
-      headerHeight,
-      columnWidths,
-      rowWidth,
-      offsets,
-      getLeftOffset,
-      getRightOffset,
-    } = this.state
-    const columns = this.getColumns()
-    const isLoadingOrNoData = loading || data.length <= 0
-    return (
-      <TableWrapper {...restProps} position="relative">
-        <Global
-          styles={{
-            html: {
-              userSelect: this.state.isSorting ? 'none' : null,
-            },
-          }}
-        />
-        {isLoadingOrNoData ? (
-          <StackView
-            grow={1}
-            alignment="center"
-            distribution="center"
-            minHeight={minHeight}
-            paddingVertical={8}
-          >
-            {loading ? (
-              <Summary
-                image={<Spinner size="xl" color="primary" />}
-                title={loadingTitle}
-              />
-            ) : (
-              empty
-            )}
-          </StackView>
-        ) : (
-          <Measure updateOnMeasure={false} onMeasure={this.handleMeasure}>
-            {({ measureRef }) => {
-              const headerColumns = Children.toArray([
-                subRowData && (
-                  <SubRowToggleCell
-                    toggled={this.isAnySubRowOpen()}
-                    height={headerHeight + 'px'}
-                    onClick={this.handleSubRowToggleAll}
-                  />
-                ),
-                onRowSort && (
-                  <DragCell
-                    role="columnheader"
-                    height={headerHeight + 'px'}
-                    backgroundColor="inherit"
-                  />
-                ),
-                ...columns.map((column, columnIndex) => (
-                  <Hover key={columnIndex}>
-                    {({ bindHover, isHover }) => {
-                      const columnWidth = columnWidths[columnIndex]
-                      const headerProps = {
-                        ...column.columnProps,
-                        ...bindHover,
-                        cursor: column.sortable ? 'pointer' : 'default',
-                        position: column.sticky ? 'sticky' : 'relative',
-                        zIndex: column.sticky ? 35 : column.columnProps.zIndex,
-                        justifyContent: column.vertical
-                          ? 'start'
-                          : column.columnProps.justifyContent,
-                        style: {
-                          width: columnWidth,
-                          height: column.vertical
-                            ? headerHeight + HEADER_PADDING_OFFSET
-                            : headerHeight,
-                          left: getLeftOffset(column, columnIndex),
-                          right: getRightOffset(column, columnIndex),
-                        },
-                        onClick: (e) => {
-                          if (column.sortable) {
-                            this.handleColumnSort(column.id)
-                          }
-                          if (
-                            column.columnProps &&
-                            column.columnProps.onClick
-                          ) {
-                            column.columnProps.onClick(e)
-                          }
-                        },
-                      }
-                      if (column.sortable) {
-                        headerProps['aria-sort'] =
-                          currentSort.columnId === column.id
-                            ? currentSort.direction === 'ASC'
-                              ? 'ascending'
-                              : 'descending'
-                            : 'none'
-                      }
-                      return (
-                        <HeaderCell {...headerProps}>
-                          <HeaderInnerCell
-                            innerRef={measureRef(`${columnIndex}-0`)}
-                            height={compactHeader ? 4 : 6}
-                            transform={
-                              column.vertical &&
-                              `translate(${
-                                column.width / 2
-                              }px, ${HEADER_PADDING_OFFSET}px) rotate(-90deg)`
-                            }
-                          >
-                            {typeof column.header === 'string' ? (
-                              <HeadingUppercase
-                                truncate
-                                color="grey-7"
-                                fontSize={compactHeader ? '11px' : '12px'}
-                                cursor={column.sortable ? 'pointer' : 'default'}
-                              >
-                                {column.header}
-                              </HeadingUppercase>
-                            ) : typeof column.header === 'function' ? (
-                              column.header(columnIndex)
-                            ) : (
-                              column.header
-                            )}
-                            {column.sortable && (
-                              <Button
-                                title="sort table"
-                                theme={false}
-                                icon={{
-                                  name: Table.getIconDirection(
-                                    currentSort.columnId === column.id
-                                      ? currentSort.direction
-                                      : defaultSortDirection
-                                  ),
-                                }}
-                                size="xs"
-                                opacity={
-                                  currentSort.columnId === column.id
-                                    ? 1
-                                    : isHover
-                                    ? 0.35
-                                    : 0
-                                }
-                              />
-                            )}
-                          </HeaderInnerCell>
-                        </HeaderCell>
-                      )
-                    }}
-                  </Hover>
-                )),
-              ])
-
-              const getBodyRows = (
-                groupData,
-                {
-                  subRowProps,
-                  shouldRenderSubRowData,
-                  shouldRenderSubRowToggle,
-                }
-              ) =>
-                Object.keys(groupData).map((key, rowIndex) => {
-                  const isSubRowOpen = this.isSubRowOpen(rowIndex)
-                  const row = groupData[key]
-                  const rowProps = {
-                    key: rowIndex,
-                    index: rowIndex,
-                    style: { minWidth: rowWidth },
-                    keyboardShortcuts,
-                    row,
-                    rowIndex,
-                    onRowSort,
-                  }
-                  if (getRowLink) {
-                    const goToLink = () => {
-                      const link = getRowLink(row)
-                      if (typeof link === 'string') {
-                        window.location = link
-                      }
-                    }
-                    rowProps.tabIndex = 0
-                    rowProps.role = 'link'
-                    rowProps.cursor = 'pointer'
-                    rowProps.focus = { backgroundColor: 'hsla(0,0%,97%,1)' }
-                    rowProps.hover = { backgroundColor: 'hsla(0,0%,97%,1)' }
-                    rowProps.onClick = goToLink
-                    rowProps.onKeyDown = (event) => {
-                      if (event.key === 'Enter') {
-                        goToLink()
-                      }
-                    }
-                  }
-                  if (isSorting) {
-                    rowProps.pointerEvents = 'none'
-                  }
-                  if (
-                    (rowDividers && rowIndex !== 0) ||
-                    shouldRenderSubRowToggle
-                  ) {
-                    rowProps.borderTopWidth = 1
-                  }
-                  return [
-                    <BodyRow {...rowProps} {...subRowProps}>
-                      {({ isRowHovered, dragHandleProps }) =>
-                        Children.toArray([
-                          subRowData &&
-                            (shouldRenderSubRowToggle ? (
-                              <SubRowToggleCell contentsHidden />
-                            ) : (
-                              <SubRowToggleCell
-                                toggled={isSubRowOpen}
-                                rowIndex={rowIndex}
-                                onClick={(event) => {
-                                  event.stopPropagation()
-                                  this.handleSubRowToggle(rowIndex)
-                                }}
-                              />
-                            )),
-                          onRowSort && (
-                            <DragCell {...dragHandleProps}>
-                              <DragHandle />
-                            </DragCell>
-                          ),
-                          columns.map((column, columnIndex) => {
-                            const columnWidth = columnWidths[columnIndex]
-                            const cellToRender =
-                              shouldRenderSubRowToggle &&
-                              column.subRowCell !== undefined
-                                ? column.subRowCell
-                                : column.cell
-                            return (
-                              <BodyCell
-                                key={columnIndex}
-                                {...column.columnProps}
-                                {...this.getBodyCellMouseHandlers(columnIndex)}
-                                position={column.sticky ? 'sticky' : undefined}
-                                justifyContent={
-                                  column.vertical
-                                    ? 'center'
-                                    : column.columnProps.justifyContent
-                                }
-                                minHeight={
-                                  shouldRenderSubRowToggle ? 5 : minRowHeight
-                                }
-                                borderColor="grey-3"
-                                borderLeftWidth={
-                                  column.divider !== false &&
-                                  (columnDividers &&
-                                  (onRowSort || columnIndex !== 0)
-                                    ? 1
-                                    : undefined)
-                                }
-                                backgroundColor={
-                                  highlightedColumnIndex === columnIndex
-                                    ? 'grey-0'
-                                    : 'inherit'
-                                }
-                                color={
-                                  shouldRenderSubRowToggle ? 'grey-9' : 'black'
-                                }
-                                zIndex={column.sticky ? 35 : undefined}
-                                style={{
-                                  width: columnWidth,
-                                  left: getLeftOffset(column, columnIndex),
-                                  right: getRightOffset(column, columnIndex),
-                                  ...column.columnProps.style,
-                                }}
-                              >
-                                <BodyInnerCell
-                                  innerRef={
-                                    column.width === undefined
-                                      ? measureRef(
-                                          `${columnIndex}-${rowIndex + 1}`,
-                                          {
-                                            formula: (node) => ({
-                                              width: node.offsetWidth,
-                                            }),
-                                          }
-                                        )
-                                      : null
-                                  }
-                                  column={column}
-                                  justifyContent={
-                                    column.vertical
-                                      ? 'center'
-                                      : column.columnProps.justifyContent
-                                  }
-                                >
-                                  {cellToRender &&
-                                    (typeof cellToRender === 'string'
-                                      ? row[cellToRender]
-                                      : cellToRender(row, {
-                                          columnIndex,
-                                          rowIndex,
-                                          isRowHovered,
-                                        }))}
-                                </BodyInnerCell>
-                              </BodyCell>
-                            )
-                          }),
-                        ])
-                      }
-                    </BodyRow>,
-                    shouldRenderSubRowData && isSubRowOpen
-                      ? getBodyRows(subRowData(row), {
-                          subRowProps: { backgroundColor: 'hsla(0,0%,99%,1)' },
-                          shouldRenderSubRowData: false,
-                          shouldRenderSubRowToggle: true,
-                        })
-                      : null,
-                  ]
-                })
-
-              const table = (props) => (
-                <TableBase
-                  {...props}
-                  columnWidths={[
-                    subRowData && SUB_ROW_TOGGLE_WIDTH,
-                    onRowSort && DRAG_HANDLE_WIDTH,
-                    ...columnWidths,
-                  ].filter(Boolean)}
-                  rowWidth={rowWidth}
-                  minHeight={minHeight}
-                  offsets={offsets}
-                  caption={caption}
-                  header={headerColumns}
-                  headerColor={headerColor}
-                  headerHeight={headerHeight}
-                  body={getBodyRows(data, {
-                    shouldRenderSubRowData: !!subRowData,
-                  })}
-                />
-              )
-              if (onRowSort) {
-                return (
-                  <DragDrop.Provider
-                    onDragStart={this.handleSortStart}
-                    onDragEnd={this.handleSortEnd}
-                  >
-                    <DragDrop.Droppable droppableId="table">
-                      {(provided) => (
-                        <Fragment>
-                          {table({
-                            innerRef: provided.innerRef,
-                            ...provided.droppableProps,
-                          })}
-                          {provided.placeholder}
-                        </Fragment>
-                      )}
-                    </DragDrop.Droppable>
-                  </DragDrop.Provider>
-                )
-              } else {
-                return table({})
-              }
-            }}
-          </Measure>
-        )}
-
-        {!isLoadingOrNoData && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={onPageChange}
-            position="sticky"
-            bottom={0}
-            zIndex={35}
-            marginTop="-1px"
-            backgroundColor="white"
-            borderTopWidth={1}
-            borderTopColor="grey-3"
-            css={{
-              '@media print': {
-                position: 'relative',
-              },
-            }}
-          />
-        )}
-      </TableWrapper>
-    )
-  }
-}
-export default Table