@helpdice/ui 1.4.0 → 1.4.2

package/dist/index.js

@@ -2,6 +2,8 @@
 
 var React = require('react');
 var reactDom = require('react-dom');
+var Button$1 = require('components/button');
+var Tooltip$1 = require('components/tooltip');
 var require$$0 = require('react-is');
 var isEqual = require('react-fast-compare');
 
@@ -22643,7 +22645,7 @@ var PaginationItem = function PaginationItem(_ref) {
     dynamic: [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]
   }, "li.__jsx-style-dynamic-selector{margin-right:0.428em;display:inline-block;}button.__jsx-style-dynamic-selector{border:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-align:center;vertical-align:middle;box-shadow:none;outline:none;height:var(--pagination-size);min-width:var(--pagination-size);font-size:inherit;cursor:pointer;color:".concat(theme.palette.success, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(theme.palette.background, ";-webkit-transition:all linear 200ms 0ms;transition:all linear 200ms 0ms;}button.__jsx-style-dynamic-selector:hover{background-color:").concat(hover, ";}.active.__jsx-style-dynamic-selector{font-weight:bold;background-color:").concat(theme.palette.success, ";color:").concat(theme.palette.background, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";}.active.__jsx-style-dynamic-selector:hover{background-color:").concat(activeHover, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}.disabled.__jsx-style-dynamic-selector:hover{background-color:").concat(theme.palette.accents_2, ";}button.__jsx-style-dynamic-selector svg{width:1.3em;height:1.3em;}")));
 };
-PaginationItem.displayName = 'GeistPaginationItem';
+PaginationItem.displayName = 'PaginationItem';
 
 /* "use client" */
 
@@ -22668,7 +22670,7 @@ var PaginationPrevious = function PaginationPrevious(_ref) {
     disabled: isFirst
   }, props), children);
 };
-PaginationPrevious.displayName = 'GeistPaginationPrevious';
+PaginationPrevious.displayName = 'PaginationPrevious';
 
 var _excluded$r = ["children"];
 var PaginationNext = function PaginationNext(_ref) {
@@ -22684,7 +22686,7 @@ var PaginationNext = function PaginationNext(_ref) {
     disabled: isLast
   }, props), children);
 };
-PaginationNext.displayName = 'GeistPaginationNext';
+PaginationNext.displayName = 'PaginationNext';
 
 var PaginationEllipsis = function PaginationEllipsis(_ref) {
   var isBefore = _ref.isBefore,
@@ -22749,7 +22751,7 @@ var PaginationEllipsis = function PaginationEllipsis(_ref) {
     dynamic: [isBefore ? '180deg' : '0deg']
   }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
 };
-PaginationEllipsis.displayName = 'GeistPaginationEllipsis';
+PaginationEllipsis.displayName = 'PaginationEllipsis';
 
 var PaginationPages = function PaginationPages(_ref) {
   var limit = _ref.limit,
@@ -22830,7 +22832,7 @@ var PaginationPages = function PaginationPages(_ref) {
     }
   }), renderItem(count, current));
 };
-PaginationPages.displayName = 'GeistPaginationPages';
+PaginationPages.displayName = 'PaginationPages';
 
 var _excluded$q = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
 var PaginationComponent = function PaginationComponent(_ref) {
@@ -42215,10 +42217,12 @@ var TableHead = function TableHead(props) {
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
+    var _String2;
+    var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
       style: {
         // textAlign: `${column?.align} !important`,
@@ -42228,24 +42232,24 @@ var TableHead = function TableHead(props) {
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
       },
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
-      "data-column": column.label,
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
+      "data-column": dataName,
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
     }, /*#__PURE__*/React.createElement("div", {
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
     }, column.label, /*#__PURE__*/React.createElement("br", {
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }), /*#__PURE__*/React.createElement("span", {
       style: {
         textAlign: 'center'
       },
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }, column.text)));
   })), showFilters && /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "500933572",
-    dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
-  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+    id: "2156261549",
+    dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
 };
 TableHead.displayName = 'TableHead';
 
@@ -42257,9 +42261,11 @@ var TableCell = function TableCell(_ref) {
     onCellClick = _ref.onCellClick;
   /* eslint-disable react/jsx-no-useless-fragment */
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var _String;
     var currentRowValue = row[column.prop];
     var cellValue = currentRowValue || emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    var dataName = (_String = String(column === null || column === undefined ? undefined : column.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("td", {
       style: _objectSpread2({
         fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
@@ -42270,7 +42276,7 @@ var TableCell = function TableCell(_ref) {
         boxSizing: 'border-box',
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
-      "data-column": String(column.label).toLowerCase(),
+      "data-column": dataName,
       key: "row-td-".concat(index, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -42885,7 +42891,15 @@ function DataTable(_ref) {
     viewLength = _ref.viewLength,
     _onPageChange = _ref.onPageChange,
     _ref$disableMenu = _ref.disableMenu,
-    disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu;
+    disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu,
+    _ref$cursorPagination = _ref.cursorPagination,
+    cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
+    previousCursor = _ref.previousCursor,
+    nextCursor = _ref.nextCursor,
+    _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === undefined ? false : _ref$hasMore,
+    onNextPage = _ref.onNextPage,
+    onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
   // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = React.useState([]),
@@ -42919,18 +42933,22 @@ function DataTable(_ref) {
   }, [selected]);
   React.useEffect(function () {
     cols.forEach(function (col) {
+      var _String;
+      var dataName = (_String = String(col === null || col === undefined ? undefined : col.name)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
         });
       } else {
-        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = '';
         });
       }
     });
   }, [hideColumn, cols, rows]);
-  var handleHideColumnClick = function handleHideColumnClick(_event, id) {
+  var handleHideColumnClick = function handleHideColumnClick(_event, _id) {
+    var _String2;
+    var id = (_String2 = String(_id)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -42980,12 +42998,16 @@ function DataTable(_ref) {
   // };
 
   var COLUMNS = cols.filter(function (col) {
-    return !hideColumn.includes(String(col.name).toLowerCase());
+    var _String3;
+    var dataName = (_String3 = String(col === null || col === undefined ? undefined : col.name)) === null || _String3 === undefined ? undefined : _String3.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
   });
   var content = function content() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+      var _String4;
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
-      var isSelected = !hideColumn.includes(option.name);
+      var dataName = (_String4 = String(option.name)) === null || _String4 === undefined ? undefined : _String4.replace(' ', '_').toLowerCase();
+      var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React.createElement(Popover.Item, {
         selected: isSelected,
         key: colunqid,
@@ -43132,11 +43154,17 @@ function DataTable(_ref) {
     style: _objectSpread2({
       position: 'relative',
       overflowY: 'auto',
-      maxWidth: 'calc(100vw - 1rem)',
+      maxWidth: 'calc(100vw - 1.5rem)',
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
     stickyHeader: true,
+    cursorPagination: cursorPagination,
+    previousCursor: previousCursor,
+    nextCursor: nextCursor,
+    hasMore: hasMore,
+    onNextPage: onNextPage,
+    onPreviousPage: onPreviousPage,
     dataLength: dataLength,
     viewLength: viewLength,
     onPageChange: function onPageChange(page, start, end) {
@@ -43384,7 +43412,7 @@ var TableColumn = function TableColumn(columnProps) {
 };
 TableColumn.displayName = 'TableColumn';
 
-var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -43400,6 +43428,13 @@ function TableComponent(tableProps) {
     rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    _ref$cursorPagination = _ref.cursorPagination,
+    cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
+    previousCursor = _ref.previousCursor,
+    nextCursor = _ref.nextCursor;
+    _ref.hasMore;
+    var onNextPage = _ref.onNextPage,
+    onPreviousPage = _ref.onPreviousPage,
     onRow = _ref.onRow,
     onCell = _ref.onCell;
     _ref.onChange;
@@ -43475,7 +43510,7 @@ function TableComponent(tableProps) {
   }, /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
   }, props, {
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
     stickyHeader: stickyHeader,
     columns: columns,
@@ -43492,17 +43527,48 @@ function TableComponent(tableProps) {
     rowDraggable: rowDraggable,
     readOnly: readOnly,
     onSelected: onSelected
-  }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, /*#__PURE__*/React.createElement("td", {
     colSpan: columns === null || columns === undefined ? undefined : columns.length,
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10,
+      margin: '10px'
+    },
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement(Tooltip$1, {
+    text: "Previous"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    disabled: !previousCursor,
+    onClick: function onClick() {
+      return onPreviousPage && onPreviousPage(previousCursor);
+    },
+    auto: true,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(ChevronLeft$1, null)
+  })), /*#__PURE__*/React.createElement(Tooltip$1, {
+    text: "Next"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    disabled: !nextCursor,
+    onClick: function onClick() {
+      return onNextPage && onNextPage(nextCursor);
+    },
+    auto: true,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(ChevronRight$1, null)
+  }))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: columns === null || columns === undefined ? undefined : columns.length,
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, /*#__PURE__*/React.createElement(Pagination, {
     style: {
       marginLeft: '10px',
       marginRight: '10px',
-      marginTop: '10px',
-      marginBottom: '5px'
+      marginTop: '10px'
     },
     onChange: function onChange(pageNumber) {
       // Get the range for the current page
@@ -43514,9 +43580,9 @@ function TableComponent(tableProps) {
     limit: 5,
     count: Number(dataLength / viewLength)
   }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null))))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2620297225",
+    id: "1971279331",
     dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;table-layout:fixed;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
 }
 TableComponent.displayName = 'Table';
 TableComponent.Column = TableColumn;

package/dist/pagination/index.js

@@ -1068,7 +1068,7 @@ var PaginationItem = function PaginationItem(_ref) {
     dynamic: [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]
   }, "li.__jsx-style-dynamic-selector{margin-right:0.428em;display:inline-block;}button.__jsx-style-dynamic-selector{border:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-align:center;vertical-align:middle;box-shadow:none;outline:none;height:var(--pagination-size);min-width:var(--pagination-size);font-size:inherit;cursor:pointer;color:".concat(theme.palette.success, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(theme.palette.background, ";-webkit-transition:all linear 200ms 0ms;transition:all linear 200ms 0ms;}button.__jsx-style-dynamic-selector:hover{background-color:").concat(hover, ";}.active.__jsx-style-dynamic-selector{font-weight:bold;background-color:").concat(theme.palette.success, ";color:").concat(theme.palette.background, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";}.active.__jsx-style-dynamic-selector:hover{background-color:").concat(activeHover, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}.disabled.__jsx-style-dynamic-selector:hover{background-color:").concat(theme.palette.accents_2, ";}button.__jsx-style-dynamic-selector svg{width:1.3em;height:1.3em;}")));
 };
-PaginationItem.displayName = 'GeistPaginationItem';
+PaginationItem.displayName = 'PaginationItem';
 
 var tuple = function tuple() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -1108,7 +1108,7 @@ var PaginationPrevious = function PaginationPrevious(_ref) {
     disabled: isFirst
   }, props), children);
 };
-PaginationPrevious.displayName = 'GeistPaginationPrevious';
+PaginationPrevious.displayName = 'PaginationPrevious';
 
 var _excluded$2 = ["children"];
 var PaginationNext = function PaginationNext(_ref) {
@@ -1124,7 +1124,7 @@ var PaginationNext = function PaginationNext(_ref) {
     disabled: isLast
   }, props), children);
 };
-PaginationNext.displayName = 'GeistPaginationNext';
+PaginationNext.displayName = 'PaginationNext';
 
 var PaginationEllipsis = function PaginationEllipsis(_ref) {
   var isBefore = _ref.isBefore,
@@ -1189,7 +1189,7 @@ var PaginationEllipsis = function PaginationEllipsis(_ref) {
     dynamic: [isBefore ? '180deg' : '0deg']
   }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
 };
-PaginationEllipsis.displayName = 'GeistPaginationEllipsis';
+PaginationEllipsis.displayName = 'PaginationEllipsis';
 
 var PaginationPages = function PaginationPages(_ref) {
   var limit = _ref.limit,
@@ -1270,7 +1270,7 @@ var PaginationPages = function PaginationPages(_ref) {
     }
   }), renderItem(count, current));
 };
-PaginationPages.displayName = 'GeistPaginationPages';
+PaginationPages.displayName = 'PaginationPages';
 
 var useCurrentState = function useCurrentState(initialState) {
   var _useState = React.useState(function () {

package/dist/table/data-table.d.ts

@@ -32,8 +32,13 @@ type DataTableProps = {
     dataLength?: number;
     viewLength?: number;
     onPageChange?: (page: number, start: number, end: number) => void;
+    cursorPagination?: boolean;
+    previousCursor?: string;
+    nextCursor?: string;
+    onNextPage?: (next?: string) => void;
+    onPreviousPage?: (prev?: string) => void;
 };
 declare function DataTable({ cols, rows, readOnly, heading, filter, menu, sideMenu, style, children, onBack, onRefresh, // Function
-onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu }: DataTableProps): React.JSX.Element;
+onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu, cursorPagination, previousCursor, nextCursor, hasMore, onNextPage, onPreviousPage, }: DataTableProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof DataTable>;
 export default _default;

package/dist/table/index.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
+var Button$1 = require('components/button');
+var Tooltip$1 = require('components/tooltip');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -19973,10 +19975,12 @@ var TableHead = function TableHead(props) {
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
+    var _String2;
+    var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
       style: {
         // textAlign: `${column?.align} !important`,
@@ -19986,24 +19990,24 @@ var TableHead = function TableHead(props) {
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
       },
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
-      "data-column": column.label,
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
+      "data-column": dataName,
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
     }, /*#__PURE__*/React.createElement("div", {
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
     }, column.label, /*#__PURE__*/React.createElement("br", {
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }), /*#__PURE__*/React.createElement("span", {
       style: {
         textAlign: 'center'
       },
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }, column.text)));
   })), showFilters && /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "500933572",
-    dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
-  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+    id: "2156261549",
+    dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
 };
 TableHead.displayName = 'TableHead';
 
@@ -20015,9 +20019,11 @@ var TableCell = function TableCell(_ref) {
     onCellClick = _ref.onCellClick;
   /* eslint-disable react/jsx-no-useless-fragment */
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var _String;
     var currentRowValue = row[column.prop];
     var cellValue = currentRowValue || emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    var dataName = (_String = String(column === null || column === undefined ? undefined : column.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("td", {
       style: _objectSpread2({
         fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
@@ -20028,7 +20034,7 @@ var TableCell = function TableCell(_ref) {
         boxSizing: 'border-box',
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
-      "data-column": String(column.label).toLowerCase(),
+      "data-column": dataName,
       key: "row-td-".concat(index, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -31588,7 +31594,15 @@ function DataTable(_ref) {
     viewLength = _ref.viewLength,
     _onPageChange = _ref.onPageChange,
     _ref$disableMenu = _ref.disableMenu,
-    disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu;
+    disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu,
+    _ref$cursorPagination = _ref.cursorPagination,
+    cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
+    previousCursor = _ref.previousCursor,
+    nextCursor = _ref.nextCursor,
+    _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === undefined ? false : _ref$hasMore,
+    onNextPage = _ref.onNextPage,
+    onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
   // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = React.useState([]),
@@ -31622,18 +31636,22 @@ function DataTable(_ref) {
   }, [selected]);
   React.useEffect(function () {
     cols.forEach(function (col) {
+      var _String;
+      var dataName = (_String = String(col === null || col === undefined ? undefined : col.name)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
         });
       } else {
-        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = '';
         });
       }
     });
   }, [hideColumn, cols, rows]);
-  var handleHideColumnClick = function handleHideColumnClick(_event, id) {
+  var handleHideColumnClick = function handleHideColumnClick(_event, _id) {
+    var _String2;
+    var id = (_String2 = String(_id)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -31683,12 +31701,16 @@ function DataTable(_ref) {
   // };
 
   var COLUMNS = cols.filter(function (col) {
-    return !hideColumn.includes(String(col.name).toLowerCase());
+    var _String3;
+    var dataName = (_String3 = String(col === null || col === undefined ? undefined : col.name)) === null || _String3 === undefined ? undefined : _String3.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
   });
   var content = function content() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+      var _String4;
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
-      var isSelected = !hideColumn.includes(option.name);
+      var dataName = (_String4 = String(option.name)) === null || _String4 === undefined ? undefined : _String4.replace(' ', '_').toLowerCase();
+      var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React.createElement(Popover.Item, {
         selected: isSelected,
         key: colunqid,
@@ -31835,11 +31857,17 @@ function DataTable(_ref) {
     style: _objectSpread2({
       position: 'relative',
       overflowY: 'auto',
-      maxWidth: 'calc(100vw - 1rem)',
+      maxWidth: 'calc(100vw - 1.5rem)',
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
     stickyHeader: true,
+    cursorPagination: cursorPagination,
+    previousCursor: previousCursor,
+    nextCursor: nextCursor,
+    hasMore: hasMore,
+    onNextPage: onNextPage,
+    onPreviousPage: onPreviousPage,
     dataLength: dataLength,
     viewLength: viewLength,
     onPageChange: function onPageChange(page, start, end) {
@@ -32163,7 +32191,7 @@ var PaginationItem = function PaginationItem(_ref) {
     dynamic: [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]
   }, "li.__jsx-style-dynamic-selector{margin-right:0.428em;display:inline-block;}button.__jsx-style-dynamic-selector{border:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-align:center;vertical-align:middle;box-shadow:none;outline:none;height:var(--pagination-size);min-width:var(--pagination-size);font-size:inherit;cursor:pointer;color:".concat(theme.palette.success, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(theme.palette.background, ";-webkit-transition:all linear 200ms 0ms;transition:all linear 200ms 0ms;}button.__jsx-style-dynamic-selector:hover{background-color:").concat(hover, ";}.active.__jsx-style-dynamic-selector{font-weight:bold;background-color:").concat(theme.palette.success, ";color:").concat(theme.palette.background, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";}.active.__jsx-style-dynamic-selector:hover{background-color:").concat(activeHover, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}.disabled.__jsx-style-dynamic-selector:hover{background-color:").concat(theme.palette.accents_2, ";}button.__jsx-style-dynamic-selector svg{width:1.3em;height:1.3em;}")));
 };
-PaginationItem.displayName = 'GeistPaginationItem';
+PaginationItem.displayName = 'PaginationItem';
 
 /* "use client" */
 
@@ -32188,7 +32216,7 @@ var PaginationPrevious = function PaginationPrevious(_ref) {
     disabled: isFirst
   }, props), children);
 };
-PaginationPrevious.displayName = 'GeistPaginationPrevious';
+PaginationPrevious.displayName = 'PaginationPrevious';
 
 var _excluded$2 = ["children"];
 var PaginationNext = function PaginationNext(_ref) {
@@ -32204,7 +32232,7 @@ var PaginationNext = function PaginationNext(_ref) {
     disabled: isLast
   }, props), children);
 };
-PaginationNext.displayName = 'GeistPaginationNext';
+PaginationNext.displayName = 'PaginationNext';
 
 var PaginationEllipsis = function PaginationEllipsis(_ref) {
   var isBefore = _ref.isBefore,
@@ -32269,7 +32297,7 @@ var PaginationEllipsis = function PaginationEllipsis(_ref) {
     dynamic: [isBefore ? '180deg' : '0deg']
   }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
 };
-PaginationEllipsis.displayName = 'GeistPaginationEllipsis';
+PaginationEllipsis.displayName = 'PaginationEllipsis';
 
 var PaginationPages = function PaginationPages(_ref) {
   var limit = _ref.limit,
@@ -32350,7 +32378,7 @@ var PaginationPages = function PaginationPages(_ref) {
     }
   }), renderItem(count, current));
 };
-PaginationPages.displayName = 'GeistPaginationPages';
+PaginationPages.displayName = 'PaginationPages';
 
 var _excluded$1 = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
 var PaginationComponent = function PaginationComponent(_ref) {
@@ -32437,7 +32465,7 @@ var Pagination = withScale(PaginationComponent);
 Pagination.Previous = PaginationPrevious;
 Pagination.Next = PaginationNext;
 
-var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -32453,6 +32481,13 @@ function TableComponent(tableProps) {
     rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    _ref$cursorPagination = _ref.cursorPagination,
+    cursorPagination = _ref$cursorPagination === undefined ? false : _ref$cursorPagination,
+    previousCursor = _ref.previousCursor,
+    nextCursor = _ref.nextCursor;
+    _ref.hasMore;
+    var onNextPage = _ref.onNextPage,
+    onPreviousPage = _ref.onPreviousPage,
     onRow = _ref.onRow,
     onCell = _ref.onCell;
     _ref.onChange;
@@ -32528,7 +32563,7 @@ function TableComponent(tableProps) {
   }, /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
   }, props, {
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
     stickyHeader: stickyHeader,
     columns: columns,
@@ -32545,17 +32580,48 @@ function TableComponent(tableProps) {
     rowDraggable: rowDraggable,
     readOnly: readOnly,
     onSelected: onSelected
-  }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, /*#__PURE__*/React.createElement("td", {
     colSpan: columns === null || columns === undefined ? undefined : columns.length,
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10,
+      margin: '10px'
+    },
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement(Tooltip$1, {
+    text: "Previous"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    disabled: !previousCursor,
+    onClick: function onClick() {
+      return onPreviousPage && onPreviousPage(previousCursor);
+    },
+    auto: true,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(ChevronLeft$1, null)
+  })), /*#__PURE__*/React.createElement(Tooltip$1, {
+    text: "Next"
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    disabled: !nextCursor,
+    onClick: function onClick() {
+      return onNextPage && onNextPage(nextCursor);
+    },
+    auto: true,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(ChevronRight$1, null)
+  }))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: columns === null || columns === undefined ? undefined : columns.length,
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, /*#__PURE__*/React.createElement(Pagination, {
     style: {
       marginLeft: '10px',
       marginRight: '10px',
-      marginTop: '10px',
-      marginBottom: '5px'
+      marginTop: '10px'
     },
     onChange: function onChange(pageNumber) {
       // Get the range for the current page
@@ -32567,9 +32633,9 @@ function TableComponent(tableProps) {
     limit: 5,
     count: Number(dataLength / viewLength)
   }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null))))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2620297225",
+    id: "1971279331",
     dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;table-layout:fixed;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
 }
 TableComponent.displayName = 'Table';
 TableComponent.Column = TableColumn;

package/dist/table/table.d.ts

@@ -20,6 +20,12 @@ interface Props<TableDataItem extends TableDataItemBase> {
     dataLength?: number;
     viewLength?: number;
     rowClassName?: TableRowClassNameHandler<TableDataItem>;
+    cursorPagination?: boolean;
+    previousCursor?: string;
+    nextCursor?: string;
+    hasMore?: boolean;
+    onNextPage?: (next?: string) => void;
+    onPreviousPage?: (prev?: string) => void;
 }
 type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
 export type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;

package/esm/pagination/pagination-ellipsis.js

@@ -65,5 +65,5 @@ var PaginationEllipsis = function PaginationEllipsis(_ref) {
     dynamic: [isBefore ? '180deg' : '0deg']
   }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
 };
-PaginationEllipsis.displayName = 'GeistPaginationEllipsis';
+PaginationEllipsis.displayName = 'PaginationEllipsis';
 export default PaginationEllipsis;

package/esm/pagination/pagination-item.js

@@ -39,5 +39,5 @@ var PaginationItem = function PaginationItem(_ref) {
     dynamic: [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]
   }, "li.__jsx-style-dynamic-selector{margin-right:0.428em;display:inline-block;}button.__jsx-style-dynamic-selector{border:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-align:center;vertical-align:middle;box-shadow:none;outline:none;height:var(--pagination-size);min-width:var(--pagination-size);font-size:inherit;cursor:pointer;color:".concat(theme.palette.success, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(theme.palette.background, ";-webkit-transition:all linear 200ms 0ms;transition:all linear 200ms 0ms;}button.__jsx-style-dynamic-selector:hover{background-color:").concat(hover, ";}.active.__jsx-style-dynamic-selector{font-weight:bold;background-color:").concat(theme.palette.success, ";color:").concat(theme.palette.background, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";}.active.__jsx-style-dynamic-selector:hover{background-color:").concat(activeHover, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}.disabled.__jsx-style-dynamic-selector:hover{background-color:").concat(theme.palette.accents_2, ";}button.__jsx-style-dynamic-selector svg{width:1.3em;height:1.3em;}")));
 };
-PaginationItem.displayName = 'GeistPaginationItem';
+PaginationItem.displayName = 'PaginationItem';
 export default PaginationItem;

package/esm/pagination/pagination-next.js

@@ -17,5 +17,5 @@ var PaginationNext = function PaginationNext(_ref) {
     disabled: isLast
   }, props), children);
 };
-PaginationNext.displayName = 'GeistPaginationNext';
+PaginationNext.displayName = 'PaginationNext';
 export default PaginationNext;

package/esm/pagination/pagination-pages.js

@@ -82,5 +82,5 @@ var PaginationPages = function PaginationPages(_ref) {
     }
   }), renderItem(count, current));
 };
-PaginationPages.displayName = 'GeistPaginationPages';
+PaginationPages.displayName = 'PaginationPages';
 export default PaginationPages;

package/esm/pagination/pagination-previous.js

@@ -17,5 +17,5 @@ var PaginationPrevious = function PaginationPrevious(_ref) {
     disabled: isFirst
   }, props), children);
 };
-PaginationPrevious.displayName = 'GeistPaginationPrevious';
+PaginationPrevious.displayName = 'PaginationPrevious';
 export default PaginationPrevious;

package/esm/table/data-table.d.ts

@@ -32,8 +32,13 @@ type DataTableProps = {
     dataLength?: number;
     viewLength?: number;
     onPageChange?: (page: number, start: number, end: number) => void;
+    cursorPagination?: boolean;
+    previousCursor?: string;
+    nextCursor?: string;
+    onNextPage?: (next?: string) => void;
+    onPreviousPage?: (prev?: string) => void;
 };
 declare function DataTable({ cols, rows, readOnly, heading, filter, menu, sideMenu, style, children, onBack, onRefresh, // Function
-onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu }: DataTableProps): React.JSX.Element;
+onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu, cursorPagination, previousCursor, nextCursor, hasMore, onNextPage, onPreviousPage, }: DataTableProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof DataTable>;
 export default _default;

package/esm/table/data-table.js

@@ -51,7 +51,15 @@ function DataTable(_ref) {
     viewLength = _ref.viewLength,
     _onPageChange = _ref.onPageChange,
     _ref$disableMenu = _ref.disableMenu,
-    disableMenu = _ref$disableMenu === void 0 ? false : _ref$disableMenu;
+    disableMenu = _ref$disableMenu === void 0 ? false : _ref$disableMenu,
+    _ref$cursorPagination = _ref.cursorPagination,
+    cursorPagination = _ref$cursorPagination === void 0 ? false : _ref$cursorPagination,
+    previousCursor = _ref.previousCursor,
+    nextCursor = _ref.nextCursor,
+    _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
+    onNextPage = _ref.onNextPage,
+    onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
   // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = useState([]),
@@ -85,18 +93,22 @@ function DataTable(_ref) {
   }, [selected]);
   useEffect(function () {
     cols.forEach(function (col) {
+      var _String;
+      var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
         });
       } else {
-        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = '';
         });
       }
     });
   }, [hideColumn, cols, rows]);
-  var handleHideColumnClick = function handleHideColumnClick(_event, id) {
+  var handleHideColumnClick = function handleHideColumnClick(_event, _id) {
+    var _String2;
+    var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -146,12 +158,16 @@ function DataTable(_ref) {
   // };
 
   var COLUMNS = cols.filter(function (col) {
-    return !hideColumn.includes(String(col.name).toLowerCase());
+    var _String3;
+    var dataName = (_String3 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
   });
   var content = function content() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+      var _String4;
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
-      var isSelected = !hideColumn.includes(option.name);
+      var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
+      var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React.createElement(Popover.Item, {
         selected: isSelected,
         key: colunqid,
@@ -298,11 +314,17 @@ function DataTable(_ref) {
     style: _extends({
       position: 'relative',
       overflowY: 'auto',
-      maxWidth: 'calc(100vw - 1rem)',
+      maxWidth: 'calc(100vw - 1.5rem)',
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
     stickyHeader: true,
+    cursorPagination: cursorPagination,
+    previousCursor: previousCursor,
+    nextCursor: nextCursor,
+    hasMore: hasMore,
+    onNextPage: onNextPage,
+    onPreviousPage: onPreviousPage,
     dataLength: dataLength,
     viewLength: viewLength,
     onPageChange: function onPageChange(page, start, end) {

package/esm/table/table-cell.js

@@ -8,9 +8,11 @@ var TableCell = function TableCell(_ref) {
     onCellClick = _ref.onCellClick;
   /* eslint-disable react/jsx-no-useless-fragment */
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var _String;
     var currentRowValue = row[column.prop];
     var cellValue = currentRowValue || emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("td", {
       style: _extends({
         fontSize: "".concat(column === null || column === void 0 ? void 0 : column.fontSize),
@@ -21,7 +23,7 @@ var TableCell = function TableCell(_ref) {
         boxSizing: 'border-box',
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
-      "data-column": String(column.label).toLowerCase(),
+      "data-column": dataName,
       key: "row-td-".concat(index, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);

package/esm/table/table-head.js

@@ -127,10 +127,12 @@ var TableHead = function TableHead(props) {
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
+    var _String2;
+    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
       style: {
         // textAlign: `${column?.align} !important`,
@@ -140,24 +142,24 @@ var TableHead = function TableHead(props) {
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       },
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
-      "data-column": column.label,
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
+      "data-column": dataName,
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
     }, /*#__PURE__*/React.createElement("div", {
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
     }, column.label, /*#__PURE__*/React.createElement("br", {
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }), /*#__PURE__*/React.createElement("span", {
       style: {
         textAlign: 'center'
       },
-      className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }, column.text)));
   })), showFilters && /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "500933572",
-    dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
-  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            background-color: #fff;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+    id: "2156261549",
+    dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
 };
 TableHead.displayName = 'TableHead';
 export default TableHead;

package/esm/table/table.d.ts

@@ -20,6 +20,12 @@ interface Props<TableDataItem extends TableDataItemBase> {
     dataLength?: number;
     viewLength?: number;
     rowClassName?: TableRowClassNameHandler<TableDataItem>;
+    cursorPagination?: boolean;
+    previousCursor?: string;
+    nextCursor?: string;
+    hasMore?: boolean;
+    onNextPage?: (next?: string) => void;
+    onPreviousPage?: (prev?: string) => void;
 }
 type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
 export type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;

package/esm/table/table.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -16,6 +16,8 @@ import useScale, { withScale } from '../use-scale';
 import TableColumn from './table-column';
 import { ChevronLeft, ChevronRight } from '@helpdice/icons';
 import Pagination from '../pagination';
+import Button from 'components/button';
+import Tooltip from 'components/tooltip';
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -31,6 +33,14 @@ function TableComponent(tableProps) {
     rowDraggable = _ref$rowDraggable === void 0 ? false : _ref$rowDraggable,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$cursorPagination = _ref.cursorPagination,
+    cursorPagination = _ref$cursorPagination === void 0 ? false : _ref$cursorPagination,
+    previousCursor = _ref.previousCursor,
+    nextCursor = _ref.nextCursor,
+    _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
+    onNextPage = _ref.onNextPage,
+    onPreviousPage = _ref.onPreviousPage,
     onRow = _ref.onRow,
     onCell = _ref.onCell,
     onChange = _ref.onChange,
@@ -106,7 +116,7 @@ function TableComponent(tableProps) {
   }, /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
   }, props, {
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
     stickyHeader: stickyHeader,
     columns: columns,
@@ -123,17 +133,48 @@ function TableComponent(tableProps) {
     rowDraggable: rowDraggable,
     readOnly: readOnly,
     onSelected: onSelected
-  }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }), children, cursorPagination ? /*#__PURE__*/React.createElement("tfoot", {
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, /*#__PURE__*/React.createElement("td", {
     colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
-    className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 10,
+      margin: '10px'
+    },
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Previous"
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: !previousCursor,
+    onClick: function onClick() {
+      return onPreviousPage && onPreviousPage(previousCursor);
+    },
+    auto: true,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(ChevronLeft, null)
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Next"
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: !nextCursor,
+    onClick: function onClick() {
+      return onNextPage && onNextPage(nextCursor);
+    },
+    auto: true,
+    px: 0.6,
+    iconRight: /*#__PURE__*/React.createElement(ChevronRight, null)
+  }))))) : dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
+    className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
   }, /*#__PURE__*/React.createElement(Pagination, {
     style: {
       marginLeft: '10px',
       marginRight: '10px',
-      marginTop: '10px',
-      marginBottom: '5px'
+      marginTop: '10px'
     },
     onChange: function onChange(pageNumber) {
       // Get the range for the current page
@@ -145,9 +186,9 @@ function TableComponent(tableProps) {
     limit: 5,
     count: Number(dataLength / viewLength)
   }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null))))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2620297225",
+    id: "1971279331",
     dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;table-layout:fixed;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
 }
 TableComponent.displayName = 'Table';
 TableComponent.Column = TableColumn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",