@helpdice/ui 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/index.js +109 -48
  2. package/dist/table/data-table.d.ts +4 -1
  3. package/dist/table/index.js +6344 -5963
  4. package/dist/table/table-head.d.ts +1 -0
  5. package/dist/table/table-types.d.ts +1 -0
  6. package/dist/table/table.d.ts +4 -0
  7. package/esm/table/data-table.d.ts +4 -1
  8. package/esm/table/data-table.js +45 -16
  9. package/esm/table/table-head.d.ts +1 -0
  10. package/esm/table/table-head.js +31 -28
  11. package/esm/table/table-types.d.ts +1 -0
  12. package/esm/table/table.d.ts +4 -0
  13. package/esm/table/table.js +32 -2
  14. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var reactDom = require('react-dom');
5
+ var Popover$1 = require('components/popover');
5
6
  var require$$0 = require('react-is');
6
7
  var isEqual = require('react-fast-compare');
7
8
 
@@ -4736,7 +4737,7 @@ const ChevronLeft = ({ color, strokeWidth, set }) => {
4736
4737
  }
4737
4738
  };
4738
4739
  ChevronLeft.displayName = "ChevronLeft";
4739
- createIcon(ChevronLeft);
4740
+ var ChevronLeft$1 = createIcon(ChevronLeft);
4740
4741
 
4741
4742
  const ChevronCircleRight = ({ color, strokeWidth, set }) => {
4742
4743
  const Broken = () => (React__namespace.createElement("g", null,
@@ -4819,7 +4820,7 @@ const ChevronRight = ({ color, strokeWidth, set }) => {
4819
4820
  }
4820
4821
  };
4821
4822
  ChevronRight.displayName = "ChevronRight";
4822
- createIcon(ChevronRight);
4823
+ var ChevronRight$1 = createIcon(ChevronRight);
4823
4824
 
4824
4825
  const ChevronCircleUp = ({ color, strokeWidth, set }) => {
4825
4826
  const Broken = () => (React__namespace.createElement("g", null,
@@ -42116,7 +42117,8 @@ var TableHead = function TableHead(props) {
42116
42117
  columns = _ref.columns,
42117
42118
  width = _ref.width,
42118
42119
  onFilters = _ref.onFilters,
42119
- showFilters = _ref.showFilters;
42120
+ showFilters = _ref.showFilters,
42121
+ stickyHeader = _ref.stickyHeader;
42120
42122
  var isScalableWidth = React.useMemo(function () {
42121
42123
  return columns.find(function (item) {
42122
42124
  return !!item.width;
@@ -42129,14 +42131,19 @@ var TableHead = function TableHead(props) {
42129
42131
  var handleFilterChange = function handleFilterChange(name, value) {
42130
42132
  setFilters(function (prevFilters) {
42131
42133
  var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
42134
+ if (onFilters) {
42135
+ onFilters(updatedFilters);
42136
+ }
42132
42137
  return updatedFilters;
42133
42138
  });
42134
42139
  };
42135
- var applyFilters = function applyFilters() {
42136
- if (onFilters) {
42137
- onFilters(filters);
42138
- }
42139
- };
42140
+
42141
+ // const applyFilters = () => {
42142
+ // if (onFilters) {
42143
+ // onFilters(filters);
42144
+ // }
42145
+ // }
42146
+
42140
42147
  var generateFilterInputs = function generateFilterInputs() {
42141
42148
  return columns.map(function (col) {
42142
42149
  var _String, _filters$filterName;
@@ -42145,9 +42152,16 @@ var TableHead = function TableHead(props) {
42145
42152
  options = col.options;
42146
42153
  var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
42147
42154
  var unq_accessor = _.uniqueId(filterName);
42155
+ // if (Header === 'actions') {
42156
+ // return (
42157
+ // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
42158
+ // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
42159
+ // </th>
42160
+ // )
42161
+ // }
42148
42162
  return /*#__PURE__*/React.createElement("th", {
42149
42163
  style: {
42150
- margin: '3px'
42164
+ padding: '3px'
42151
42165
  },
42152
42166
  "data-column": Header,
42153
42167
  key: unq_accessor
@@ -42193,9 +42207,9 @@ var TableHead = function TableHead(props) {
42193
42207
  });
42194
42208
  };
42195
42209
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
42196
- className: _JSXStyle.dynamic([["134865897", [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]]])
42210
+ className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", 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]]])
42197
42211
  }, /*#__PURE__*/React.createElement("tr", {
42198
- className: _JSXStyle.dynamic([["134865897", [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]]])
42212
+ className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", 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]]])
42199
42213
  }, columns.map(function (column, index) {
42200
42214
  return /*#__PURE__*/React.createElement("th", {
42201
42215
  style: {
@@ -42207,32 +42221,23 @@ var TableHead = function TableHead(props) {
42207
42221
  },
42208
42222
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
42209
42223
  "data-column": column.label,
42210
- className: _JSXStyle.dynamic([["134865897", [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 || "")
42224
+ className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", 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 || "")
42211
42225
  }, /*#__PURE__*/React.createElement("div", {
42212
- className: _JSXStyle.dynamic([["134865897", [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"
42226
+ className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", 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"
42213
42227
  }, column.label, /*#__PURE__*/React.createElement("br", {
42214
- className: _JSXStyle.dynamic([["134865897", [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]]])
42228
+ className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", 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]]])
42215
42229
  }), /*#__PURE__*/React.createElement("span", {
42216
42230
  style: {
42217
42231
  textAlign: 'center'
42218
42232
  },
42219
- className: _JSXStyle.dynamic([["134865897", [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]]])
42233
+ className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", 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]]])
42220
42234
  }, column.text)));
42221
- }), /*#__PURE__*/React.createElement("th", {
42222
- className: _JSXStyle.dynamic([["134865897", [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]]])
42223
42235
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
42224
- className: _JSXStyle.dynamic([["134865897", [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]]])
42225
- }, generateFilterInputs(), /*#__PURE__*/React.createElement("th", {
42226
- className: _JSXStyle.dynamic([["134865897", [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]]])
42227
- }, /*#__PURE__*/React.createElement(Button, {
42228
- onClick: applyFilters,
42229
- auto: true,
42230
- px: 0.6,
42231
- scale: 2 / 3
42232
- }, "Apply")))), /*#__PURE__*/React.createElement(_JSXStyle, {
42233
- id: "134865897",
42234
- dynamic: [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]
42235
- }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}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;}")));
42236
+ className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", 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]]])
42237
+ }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
42238
+ id: "3728881297",
42239
+ dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", 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]
42240
+ }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}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;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}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;}")));
42236
42241
  };
42237
42242
  TableHead.displayName = 'TableHead';
42238
42243
 
@@ -42470,7 +42475,7 @@ var TableColumn = function TableColumn(columnProps) {
42470
42475
  };
42471
42476
  TableColumn.displayName = 'TableColumn';
42472
42477
 
42473
- var _excluded$b = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
42478
+ var _excluded$b = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
42474
42479
  function TableComponent(tableProps) {
42475
42480
  /* eslint-disable @typescript-eslint/no-unused-vars */
42476
42481
  var _ref = tableProps,
@@ -42490,9 +42495,14 @@ function TableComponent(tableProps) {
42490
42495
  onCell = _ref.onCell;
42491
42496
  _ref.onChange;
42492
42497
  var onFilters = _ref.onFilters,
42498
+ onPageChange = _ref.onPageChange,
42493
42499
  _ref$showFilters = _ref.showFilters,
42494
42500
  showFilters = _ref$showFilters === undefined ? false : _ref$showFilters,
42501
+ _ref$stickyHeader = _ref.stickyHeader,
42502
+ stickyHeader = _ref$stickyHeader === undefined ? false : _ref$stickyHeader,
42495
42503
  onSelected = _ref.onSelected,
42504
+ dataLength = _ref.dataLength,
42505
+ viewLength = _ref.viewLength,
42496
42506
  _ref$className = _ref.className,
42497
42507
  className = _ref$className === undefined ? '' : _ref$className,
42498
42508
  _ref$rowClassName = _ref.rowClassName,
@@ -42541,6 +42551,16 @@ function TableComponent(tableProps) {
42541
42551
  useResize(function () {
42542
42552
  return updateShape();
42543
42553
  });
42554
+
42555
+ // Function to calculate start and end index for a given page
42556
+ var getDataRange = function getDataRange(pageNumber, itemsPerPage, dataLength) {
42557
+ var startIndex = (pageNumber - 1) * itemsPerPage;
42558
+ var endIndex = Math.min(startIndex + itemsPerPage - 1, dataLength - 1);
42559
+ return {
42560
+ startIndex: startIndex,
42561
+ endIndex: endIndex
42562
+ };
42563
+ };
42544
42564
  return /*#__PURE__*/React.createElement(TableContext.Provider, {
42545
42565
  value: contextValue
42546
42566
  }, /*#__PURE__*/React.createElement("table", _extends({
@@ -42548,6 +42568,7 @@ function TableComponent(tableProps) {
42548
42568
  }, props, {
42549
42569
  className: _JSXStyle.dynamic([["2132340556", [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 || "")
42550
42570
  }), /*#__PURE__*/React.createElement(TableHead, {
42571
+ stickyHeader: stickyHeader,
42551
42572
  columns: columns,
42552
42573
  onFilters: onFilters,
42553
42574
  showFilters: showFilters,
@@ -42565,7 +42586,19 @@ function TableComponent(tableProps) {
42565
42586
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
42566
42587
  id: "2132340556",
42567
42588
  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)]
42568
- }, "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), ";}"))));
42589
+ }, "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), ";}")), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
42590
+ className: _JSXStyle.dynamic([["2132340556", [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)]]])
42591
+ }, /*#__PURE__*/React.createElement(Pagination, {
42592
+ onChange: function onChange(pageNumber) {
42593
+ // Get the range for the current page
42594
+ var _getDataRange = getDataRange(pageNumber, viewLength, dataLength),
42595
+ startIndex = _getDataRange.startIndex,
42596
+ endIndex = _getDataRange.endIndex;
42597
+ onPageChange(pageNumber, startIndex, endIndex);
42598
+ },
42599
+ limit: 5,
42600
+ count: Number(dataLength / viewLength)
42601
+ }, /*#__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));
42569
42602
  }
42570
42603
  TableComponent.displayName = 'Table';
42571
42604
  TableComponent.Column = TableColumn;
@@ -42607,6 +42640,9 @@ function DataTable(_ref) {
42607
42640
  onDragLeave = _ref.onDragLeave,
42608
42641
  onDrop = _ref.onDrop,
42609
42642
  onRowClick = _ref.onRowClick,
42643
+ dataLength = _ref.dataLength,
42644
+ viewLength = _ref.viewLength,
42645
+ _onPageChange = _ref.onPageChange,
42610
42646
  _ref$disableMenu = _ref.disableMenu,
42611
42647
  disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu;
42612
42648
  var TABLE_ID = _.uniqueId('tbl');
@@ -42622,8 +42658,8 @@ function DataTable(_ref) {
42622
42658
  // };
42623
42659
  var _useState3 = React.useState([]),
42624
42660
  _useState4 = _slicedToArray(_useState3, 2),
42625
- hideColumn = _useState4[0];
42626
- _useState4[1];
42661
+ hideColumn = _useState4[0],
42662
+ setHideColumn = _useState4[1];
42627
42663
  // const handleMenuClose = () => {
42628
42664
  // setAnchorEl(null);
42629
42665
  // };
@@ -42681,20 +42717,20 @@ function DataTable(_ref) {
42681
42717
  // setSelected([]);
42682
42718
  // };
42683
42719
 
42684
- // const handleHideColumnClick = (event: React.MouseEvent<HTMLLIElement, MouseEvent>, id: any) => {
42685
- // const selectedIndex = hideColumn.indexOf(id as never);
42686
- // let newSelected: any[] | ((prevState: never[]) => never[]) = [];
42687
- // if (selectedIndex === -1) {
42688
- // newSelected = newSelected.concat(hideColumn, id);
42689
- // } else if (selectedIndex === 0) {
42690
- // newSelected = newSelected.concat(hideColumn.slice(1));
42691
- // } else if (selectedIndex === hideColumn.length - 1) {
42692
- // newSelected = newSelected.concat(hideColumn.slice(0, -1));
42693
- // } else if (selectedIndex > 0) {
42694
- // newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
42695
- // }
42696
- // setHideColumn(newSelected as never[]);
42697
- // };
42720
+ var handleHideColumnClick = function handleHideColumnClick(_event, id) {
42721
+ var selectedIndex = hideColumn.indexOf(id);
42722
+ var newSelected = [];
42723
+ if (selectedIndex === -1) {
42724
+ newSelected = newSelected.concat(hideColumn, id);
42725
+ } else if (selectedIndex === 0) {
42726
+ newSelected = newSelected.concat(hideColumn.slice(1));
42727
+ } else if (selectedIndex === hideColumn.length - 1) {
42728
+ newSelected = newSelected.concat(hideColumn.slice(0, -1));
42729
+ } else if (selectedIndex > 0) {
42730
+ newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
42731
+ }
42732
+ setHideColumn(newSelected);
42733
+ };
42698
42734
 
42699
42735
  // Children change reset selected
42700
42736
  React.useEffect(function () {
@@ -42733,6 +42769,19 @@ function DataTable(_ref) {
42733
42769
  var COLUMNS = cols.filter(function (col) {
42734
42770
  return !hideColumn.includes(col.name);
42735
42771
  });
42772
+ var content = function content() {
42773
+ return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
42774
+ var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
42775
+ return /*#__PURE__*/React.createElement(Popover$1.Item, {
42776
+ key: colunqid
42777
+ // selected={!hideColumn.includes(option.name as never)}
42778
+ ,
42779
+ onClick: function onClick(e) {
42780
+ return handleHideColumnClick(e, option.name);
42781
+ }
42782
+ }, /*#__PURE__*/React.createElement("span", null, option.name));
42783
+ }));
42784
+ };
42736
42785
  return /*#__PURE__*/React.createElement(GridContainer, {
42737
42786
  direction: "column"
42738
42787
  }, /*#__PURE__*/React.createElement(Grid.Container, {
@@ -42831,13 +42880,15 @@ function DataTable(_ref) {
42831
42880
  px: 0.6,
42832
42881
  py: 0.4,
42833
42882
  type: "dark"
42883
+ }, /*#__PURE__*/React.createElement(Popover$1, {
42884
+ child: content
42834
42885
  }, /*#__PURE__*/React.createElement(Button, {
42835
42886
  onClick: function onClick() {},
42836
42887
  auto: true,
42837
42888
  scale: 2 / 3,
42838
42889
  px: 0.6,
42839
42890
  iconRight: /*#__PURE__*/React.createElement(Columns$1, null)
42840
- }))) : null))), children ? /*#__PURE__*/React.createElement("div", {
42891
+ })))) : null))), children ? /*#__PURE__*/React.createElement("div", {
42841
42892
  style: {
42842
42893
  padding: '1rem'
42843
42894
  }
@@ -42862,11 +42913,21 @@ function DataTable(_ref) {
42862
42913
  onDrop: onDrop,
42863
42914
  id: TABLE_ID,
42864
42915
  style: _objectSpread2({
42916
+ overflow: 'auto',
42917
+ position: 'relative',
42865
42918
  height: 'calc(100vh - 8.5rem)',
42866
42919
  maxWidth: 'calc(100vw - 1rem)',
42867
42920
  width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
42868
42921
  }, style)
42869
42922
  }, /*#__PURE__*/React.createElement(Table, {
42923
+ stickyHeader: true,
42924
+ dataLength: dataLength,
42925
+ viewLength: viewLength,
42926
+ onPageChange: function onPageChange(page, start, end) {
42927
+ if (_onPageChange) {
42928
+ _onPageChange(page, start, end);
42929
+ }
42930
+ },
42870
42931
  onRow: onRowClick,
42871
42932
  rowDraggable: rowDraggable,
42872
42933
  showFilters: openFilter,
package/dist/table/data-table.d.ts CHANGED
@@ -29,8 +29,11 @@ type DataTableProps = {
29
29
  onDrop?: () => void;
30
30
  onRowClick?: (row: any) => void;
31
31
  disableMenu?: boolean;
32
+ dataLength?: number;
33
+ viewLength?: number;
34
+ onPageChange?: (page: number, start: number, end: number) => void;
32
35
  };
33
36
  declare function DataTable({ cols, rows, readOnly, heading, filter, menu, sideMenu, style, children, onBack, onRefresh, // Function
34
- onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, disableMenu }: DataTableProps): React.JSX.Element;
37
+ onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu }: DataTableProps): React.JSX.Element;
35
38
  declare const _default: React.MemoExoticComponent<typeof DataTable>;
36
39
  export default _default;