@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Table/Table.js

@@ -0,0 +1,679 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { PureComponent, Children, Fragment } from 'react';
+import { Global } from '@emotion/core';
+import camelCase from 'lodash.camelcase';
+import snakeCase from 'lodash.snakecase';
+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';
+var HEADER_PADDING_OFFSET = 16;
+var DRAG_HANDLE_WIDTH = 48;
+var SUB_ROW_TOGGLE_WIDTH = 48;
+var SUPPORTS_CSS_STICKY = typeof window !== 'undefined' && window.CSS && window.CSS.supports;
+
+function Hover(_ref) {
+  var children = _ref.children;
+
+  var _useHover = useHover(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  return children({
+    isHover: hover,
+    bindHover: hoverProps
+  });
+}
+
+var _ref6 = /*#__PURE__*/React.createElement(Spinner, {
+  size: "xl",
+  color: "primary"
+});
+
+var _ref11 = /*#__PURE__*/React.createElement(SubRowToggleCell, {
+  contentsHidden: true
+});
+
+var _ref12 = /*#__PURE__*/React.createElement(DragHandle, null);
+
+/**
+ * Use to present large sets of data in a logical and digestable way.
+ */
+var Table = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(Table, _PureComponent);
+
+  Table.getOppositeSortDirection = function getOppositeSortDirection(direction) {
+    return direction === Table.ASC ? Table.DESC : Table.ASC;
+  };
+
+  Table.getIconDirection = function getIconDirection(direction) {
+    return direction === Table.ASC ? 'arrow-up' : 'arrow-down';
+  };
+
+  function Table(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "handleSortStart", function () {
+      _this.setState({
+        isSorting: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (_ref2) {
+      var source = _ref2.source,
+          destination = _ref2.destination;
+
+      _this.setState({
+        isSorting: false
+      });
+
+      _this.props.onRowSort(reorderArray({
+        list: _this.props.data,
+        startIndex: source.index,
+        endIndex: destination.index
+      }));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleColumnSort", function (id) {
+      var defaultSort = _this.getDefaultSort(_this.props);
+
+      _this.setState(function (state) {
+        var currentSort = _objectSpread({}, 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) {
+          var newSort = currentSort.columnId ? currentSort : defaultSort;
+
+          _this.props.onColumnSort(newSort);
+        }
+
+        return {
+          currentSort: currentSort
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getBodyCellMouseHandlers", function (columnIndex) {
+      return _this.props.highlightColumnOnHover ? {
+        onMouseOver: function onMouseOver() {
+          _this.setState({
+            highlightedColumnIndex: columnIndex
+          });
+        },
+        onMouseOut: function onMouseOut() {
+          _this.setState({
+            highlightedColumnIndex: null
+          });
+        }
+      } : {};
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isAnySubRowOpen", function () {
+      return _this.state.openSubRowIndices.length > 0;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubRowToggleAll", function () {
+      _this.setState({
+        openSubRowIndices: _this.state.openSubRowIndices.length > 0 ? [] : range(0, _this.props.data.length)
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isSubRowOpen", function (index) {
+      return _this.state.openSubRowIndices.indexOf(index) > -1;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubRowToggle", function (index) {
+      _this.setState(function (state) {
+        var openSubRowIndices = [].concat(state.openSubRowIndices);
+        var currentIndex = openSubRowIndices.indexOf(index);
+
+        if (currentIndex > -1) {
+          openSubRowIndices.splice(currentIndex, 1);
+        } else {
+          openSubRowIndices.push(index);
+        }
+
+        return {
+          openSubRowIndices: openSubRowIndices
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMeasure", function (measurements) {
+      var columns = _this.getColumns();
+
+      var columnCount = columns.length;
+      var centerIndex = (columnCount - 1) / 2;
+      var defaultLeftOffset = 0;
+
+      if (_this.props.subRowData) {
+        defaultLeftOffset += SUB_ROW_TOGGLE_WIDTH;
+      }
+
+      if (_this.props.onRowSort) {
+        defaultLeftOffset += DRAG_HANDLE_WIDTH;
+      }
+
+      var headerHeights = measurements ? columns.map(function (column, columnIndex) {
+        var measurement = measurements[columnIndex + "-0"];
+        return measurement ? measurement.height : 0;
+      }) : [];
+      var headerHeight = measurements ? Math.max.apply(Math, [].concat(headerHeights, [_this.props.compactHeader ? 32 : 48])) : null;
+      var columnWidths = measurements ? Object.keys(measurements).reduce(function (cellWidths, key) {
+        var _key$split = key.split('-'),
+            columnIndex = _key$split[0];
+
+        var measurement = measurements[key];
+        var column = columns[columnIndex];
+
+        if (column) {
+          var cellWidth = column.width || measurement.width;
+
+          if (!cellWidths[columnIndex]) {
+            cellWidths[columnIndex] = [];
+          }
+
+          cellWidths[columnIndex].push(cellWidth);
+        }
+
+        return cellWidths;
+      }, []).map(function (cellWidths) {
+        return Math.max.apply(Math, cellWidths);
+      }) : [];
+      var rowWidth = measurements ? columnWidths.reduce(function (previousWidth, columnWidth, columnIndex) {
+        return previousWidth + columnWidth;
+      }, defaultLeftOffset) : null;
+      var offsets = SUPPORTS_CSS_STICKY ? columns.reduce(function (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
+      };
+
+      var getLeftOffset = function getLeftOffset(column, columnIndex) {
+        return SUPPORTS_CSS_STICKY && column.sticky && columnIndex < centerIndex ? columnWidths.reduce(function (total, width, index) {
+          return index < columnIndex ? total + width : total;
+        }, defaultLeftOffset) || defaultLeftOffset : undefined;
+      };
+
+      var getRightOffset = function getRightOffset(column, columnIndex) {
+        return SUPPORTS_CSS_STICKY && column.sticky && columnIndex >= centerIndex ? columnWidths.reduce(function (total, width, index) {
+          return index > columnIndex ? total + width : total;
+        }, 0) || 0 : undefined;
+      };
+
+      _this.setState({
+        headerHeights: headerHeights,
+        headerHeight: headerHeight,
+        columnWidths: columnWidths,
+        rowWidth: rowWidth,
+        offsets: offsets,
+        getLeftOffset: getLeftOffset,
+        getRightOffset: getRightOffset
+      });
+    });
+
+    _this.state = {
+      currentSort: _this.getDefaultSort(props),
+      highlightedColumnIndex: null,
+      isSorting: false,
+      headerHeights: [],
+      headerHeight: -1,
+      columnWidths: [],
+      rowWidth: -1,
+      offsets: [],
+      openSubRowIndices: [],
+      getLeftOffset: function getLeftOffset() {
+        return null;
+      },
+      getRightOffset: function getRightOffset() {
+        return null;
+      }
+    };
+    return _this;
+  }
+
+  var _proto = Table.prototype;
+
+  _proto.getSortOrder = function getSortOrder(_ref3) {
+    var columnId = _ref3.columnId,
+        direction = _ref3.direction;
+    return "" + (direction === Table.ASC ? '' : '-') + snakeCase(columnId);
+  };
+
+  _proto.parseSortOrder = function parseSortOrder(query) {
+    var isDescending = query[0] === '-';
+    return {
+      columnId: camelCase(isDescending ? query.substring(1) : query),
+      direction: isDescending ? Table.DESC : Table.ASC
+    };
+  };
+
+  _proto.getDefaultSort = function getDefaultSort(_ref4) {
+    var defaultSortColumnId = _ref4.defaultSortColumnId,
+        defaultSortDirection = _ref4.defaultSortDirection,
+        defaultSortOrder = _ref4.defaultSortOrder;
+    var sortOrder = defaultSortOrder ? this.parseSortOrder(defaultSortOrder) : {
+      columnId: defaultSortColumnId,
+      direction: defaultSortDirection
+    };
+    return _objectSpread(_objectSpread({}, sortOrder), {}, {
+      order: this.getSortOrder(sortOrder)
+    });
+  };
+
+  _proto.getColumns = function getColumns() {
+    var _this2 = this;
+
+    return this.props.columns.filter(function (column) {
+      return column !== false && column !== undefined && column !== null && (column.alwaysVisible || _this2.props.hiddenColumnIds.indexOf(column.id) === -1);
+    }).map(function (_ref5) {
+      var alwaysVisible = _ref5.alwaysVisible,
+          cell = _ref5.cell,
+          divider = _ref5.divider,
+          header = _ref5.header,
+          id = _ref5.id,
+          label = _ref5.label,
+          sortable = _ref5.sortable,
+          sticky = _ref5.sticky,
+          subRowCell = _ref5.subRowCell,
+          truncate = _ref5.truncate,
+          vertical = _ref5.vertical,
+          width = _ref5.width,
+          columnProps = _objectWithoutPropertiesLoose(_ref5, ["alwaysVisible", "cell", "divider", "header", "id", "label", "sortable", "sticky", "subRowCell", "truncate", "vertical", "width"]);
+
+      return {
+        cell: cell,
+        columnProps: columnProps,
+        divider: divider,
+        header: header,
+        id: id,
+        label: label,
+        sortable: sortable,
+        sticky: sticky,
+        subRowCell: subRowCell,
+        truncate: truncate,
+        vertical: vertical,
+        width: width
+      };
+    });
+  };
+
+  _proto.render = function render() {
+    var _this3 = this;
+
+    var _this$props = this.props,
+        caption = _this$props.caption,
+        children = _this$props.children,
+        columnDividers = _this$props.columnDividers,
+        _columns = _this$props.columns,
+        compactHeader = _this$props.compactHeader,
+        currentPage = _this$props.currentPage,
+        _this$props$data = _this$props.data,
+        data = _this$props$data === void 0 ? [] : _this$props$data,
+        defaultSortColumnId = _this$props.defaultSortColumnId,
+        defaultSortDirection = _this$props.defaultSortDirection,
+        defaultSortOrder = _this$props.defaultSortOrder,
+        empty = _this$props.empty,
+        getRowLink = _this$props.getRowLink,
+        headerColor = _this$props.headerColor,
+        hiddenColumnIds = _this$props.hiddenColumnIds,
+        highlightColumnOnHover = _this$props.highlightColumnOnHover,
+        innerRef = _this$props.innerRef,
+        keyboardShortcuts = _this$props.keyboardShortcuts,
+        layout = _this$props.layout,
+        loading = _this$props.loading,
+        loadingTitle = _this$props.loadingTitle,
+        minHeight = _this$props.minHeight,
+        minRowHeight = _this$props.minRowHeight,
+        onColumnSort = _this$props.onColumnSort,
+        onPageChange = _this$props.onPageChange,
+        onRowSort = _this$props.onRowSort,
+        rowDividers = _this$props.rowDividers,
+        subRowData = _this$props.subRowData,
+        totalPages = _this$props.totalPages,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["caption", "children", "columnDividers", "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"]);
+
+    var _this$state = this.state,
+        highlightedColumnIndex = _this$state.highlightedColumnIndex,
+        currentSort = _this$state.currentSort,
+        isSorting = _this$state.isSorting,
+        headerHeight = _this$state.headerHeight,
+        columnWidths = _this$state.columnWidths,
+        rowWidth = _this$state.rowWidth,
+        offsets = _this$state.offsets,
+        getLeftOffset = _this$state.getLeftOffset,
+        getRightOffset = _this$state.getRightOffset;
+    var columns = this.getColumns();
+    var isLoadingOrNoData = loading || data.length <= 0;
+    return /*#__PURE__*/React.createElement(TableWrapper, _extends({}, restProps, {
+      position: "relative"
+    }), /*#__PURE__*/React.createElement(Global, {
+      styles: {
+        html: {
+          userSelect: this.state.isSorting ? 'none' : null
+        }
+      }
+    }), isLoadingOrNoData ? /*#__PURE__*/React.createElement(StackView, {
+      grow: 1,
+      alignment: "center",
+      distribution: "center",
+      minHeight: minHeight,
+      paddingVertical: 8
+    }, loading ? /*#__PURE__*/React.createElement(Summary, {
+      image: _ref6,
+      title: loadingTitle
+    }) : empty) : /*#__PURE__*/React.createElement(Measure, {
+      updateOnMeasure: false,
+      onMeasure: this.handleMeasure
+    }, function (_ref7) {
+      var measureRef = _ref7.measureRef;
+      var headerColumns = Children.toArray([subRowData && /*#__PURE__*/React.createElement(SubRowToggleCell, {
+        toggled: _this3.isAnySubRowOpen(),
+        height: headerHeight + 'px',
+        onClick: _this3.handleSubRowToggleAll
+      }), onRowSort && /*#__PURE__*/React.createElement(DragCell, {
+        role: "columnheader",
+        height: headerHeight + 'px',
+        backgroundColor: "inherit"
+      })].concat(columns.map(function (column, columnIndex) {
+        return /*#__PURE__*/React.createElement(Hover, {
+          key: columnIndex
+        }, function (_ref8) {
+          var bindHover = _ref8.bindHover,
+              isHover = _ref8.isHover;
+          var columnWidth = columnWidths[columnIndex];
+
+          var headerProps = _objectSpread(_objectSpread(_objectSpread({}, 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: function onClick(e) {
+              if (column.sortable) {
+                _this3.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 /*#__PURE__*/React.createElement(HeaderCell, headerProps, /*#__PURE__*/React.createElement(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' ? /*#__PURE__*/React.createElement(HeadingUppercase, {
+            truncate: true,
+            color: "grey-7",
+            fontSize: compactHeader ? '11px' : '12px',
+            cursor: column.sortable ? 'pointer' : 'default'
+          }, column.header) : typeof column.header === 'function' ? column.header(columnIndex) : column.header, column.sortable && /*#__PURE__*/React.createElement(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
+          })));
+        });
+      })));
+
+      var getBodyRows = function getBodyRows(groupData, _ref9) {
+        var subRowProps = _ref9.subRowProps,
+            shouldRenderSubRowData = _ref9.shouldRenderSubRowData,
+            shouldRenderSubRowToggle = _ref9.shouldRenderSubRowToggle;
+        return Object.keys(groupData).map(function (key, rowIndex) {
+          var isSubRowOpen = _this3.isSubRowOpen(rowIndex);
+
+          var row = groupData[key];
+          var rowProps = {
+            key: rowIndex,
+            index: rowIndex,
+            style: {
+              minWidth: rowWidth
+            },
+            keyboardShortcuts: keyboardShortcuts,
+            row: row,
+            rowIndex: rowIndex,
+            onRowSort: onRowSort
+          };
+
+          if (getRowLink) {
+            var goToLink = function goToLink() {
+              var 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 = function (event) {
+              if (event.key === 'Enter') {
+                goToLink();
+              }
+            };
+          }
+
+          if (isSorting) {
+            rowProps.pointerEvents = 'none';
+          }
+
+          if (rowDividers && rowIndex !== 0 || shouldRenderSubRowToggle) {
+            rowProps.borderTopWidth = 1;
+          }
+
+          return [/*#__PURE__*/React.createElement(BodyRow, _extends({}, rowProps, subRowProps), function (_ref10) {
+            var isRowHovered = _ref10.isRowHovered,
+                dragHandleProps = _ref10.dragHandleProps;
+            return Children.toArray([subRowData && (shouldRenderSubRowToggle ? _ref11 : /*#__PURE__*/React.createElement(SubRowToggleCell, {
+              toggled: isSubRowOpen,
+              rowIndex: rowIndex,
+              onClick: function onClick(event) {
+                event.stopPropagation();
+
+                _this3.handleSubRowToggle(rowIndex);
+              }
+            })), onRowSort && /*#__PURE__*/React.createElement(DragCell, dragHandleProps, _ref12), columns.map(function (column, columnIndex) {
+              var columnWidth = columnWidths[columnIndex];
+              var cellToRender = shouldRenderSubRowToggle && column.subRowCell !== undefined ? column.subRowCell : column.cell;
+              return /*#__PURE__*/React.createElement(BodyCell, _extends({
+                key: columnIndex
+              }, column.columnProps, _this3.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: _objectSpread({
+                  width: columnWidth,
+                  left: getLeftOffset(column, columnIndex),
+                  right: getRightOffset(column, columnIndex)
+                }, column.columnProps.style)
+              }), /*#__PURE__*/React.createElement(BodyInnerCell, {
+                innerRef: column.width === undefined ? measureRef(columnIndex + "-" + (rowIndex + 1), {
+                  formula: function formula(node) {
+                    return {
+                      width: node.offsetWidth
+                    };
+                  }
+                }) : null,
+                column: column,
+                justifyContent: column.vertical ? 'center' : column.columnProps.justifyContent
+              }, cellToRender && (typeof cellToRender === 'string' ? row[cellToRender] : cellToRender(row, {
+                columnIndex: columnIndex,
+                rowIndex: rowIndex,
+                isRowHovered: isRowHovered
+              }))));
+            })]);
+          }), shouldRenderSubRowData && isSubRowOpen ? getBodyRows(subRowData(row), {
+            subRowProps: {
+              backgroundColor: 'hsla(0,0%,99%,1)'
+            },
+            shouldRenderSubRowData: false,
+            shouldRenderSubRowToggle: true
+          }) : null];
+        });
+      };
+
+      var table = function table(props) {
+        return /*#__PURE__*/React.createElement(TableBase, _extends({}, props, {
+          columnWidths: [subRowData && SUB_ROW_TOGGLE_WIDTH, onRowSort && DRAG_HANDLE_WIDTH].concat(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 /*#__PURE__*/React.createElement(DragDrop.Provider, {
+          onDragStart: _this3.handleSortStart,
+          onDragEnd: _this3.handleSortEnd
+        }, /*#__PURE__*/React.createElement(DragDrop.Droppable, {
+          droppableId: "table"
+        }, function (provided) {
+          return /*#__PURE__*/React.createElement(Fragment, null, table(_objectSpread({
+            innerRef: provided.innerRef
+          }, provided.droppableProps)), provided.placeholder);
+        }));
+      } else {
+        return table({});
+      }
+    }), !isLoadingOrNoData && /*#__PURE__*/React.createElement(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'
+        }
+      }
+    }));
+  };
+
+  return Table;
+}(PureComponent);
+
+_defineProperty(Table, "ColumnPicker", ColumnPicker);
+
+_defineProperty(Table, "AvatarCell", AvatarCell);
+
+_defineProperty(Table, "CheckboxCell", CheckboxCell);
+
+_defineProperty(Table, "DateCell", DateCell);
+
+_defineProperty(Table, "ASC", 'ASC');
+
+_defineProperty(Table, "DESC", 'DESC');
+
+_defineProperty(Table, "defaultProps", {
+  currentPage: 0,
+  defaultSortColumnId: null,
+  defaultSortDirection: Table.ASC,
+  defaultSortOrder: null,
+  empty: 'No results',
+  headerColor: 'grey-0',
+  hiddenColumnIds: [],
+  minHeight: 48,
+  minRowHeight: 8,
+  onPageChange: function onPageChange() {
+    return null;
+  },
+  rowDividers: true,
+  totalPages: 0
+});
+
+export default Table;