@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Table/Table.js

@@ -0,0 +1,971 @@
+// @flow
+import React, { PureComponent, Children, Fragment } from 'react'
+import { Global } from '@emotion/core'
+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 ? 'arrow-up' : 'arrow-down'
+  }
+
+  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