@helpdice/ui 1.3.1 → 1.3.3

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 (15) hide show
  1. package/README.md +3 -3
  2. package/dist/index.js +89 -32
  3. package/dist/table/data-table.d.ts +4 -1
  4. package/dist/table/index.js +721 -203
  5. package/dist/table/table-head.d.ts +1 -0
  6. package/dist/table/table-types.d.ts +1 -0
  7. package/dist/table/table.d.ts +4 -0
  8. package/esm/table/data-table.d.ts +4 -1
  9. package/esm/table/data-table.js +45 -16
  10. package/esm/table/table-head.d.ts +1 -0
  11. package/esm/table/table-head.js +12 -11
  12. package/esm/table/table-types.d.ts +1 -0
  13. package/esm/table/table.d.ts +4 -0
  14. package/esm/table/table.js +32 -2
  15. package/package.json +1 -1
package/dist/table/table-head.d.ts CHANGED
@@ -4,6 +4,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
4
4
  width: number;
5
5
  columns: Array<TableAbstractColumn<TableDataItem>>;
6
6
  onFilters?: (filters: any) => void;
7
+ stickyHeader: boolean;
7
8
  showFilters?: boolean;
8
9
  className?: string;
9
10
  }
package/dist/table/table-types.d.ts CHANGED
@@ -13,6 +13,7 @@ export type TableAbstractColumn<TableDataItem> = {
13
13
  noWrap?: boolean;
14
14
  fontSize?: string | number;
15
15
  options?: any[];
16
+ stickyHeader?: boolean;
16
17
  renderHandler: TableColumnRender<TableDataItemBase>;
17
18
  };
18
19
  export type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;
package/dist/table/table.d.ts CHANGED
@@ -11,10 +11,14 @@ interface Props<TableDataItem extends TableDataItemBase> {
11
11
  onChange?: TableOnChange<TableDataItem>;
12
12
  onFilters?: (filters: any) => void;
13
13
  onSelected?: (selected: any[]) => void;
14
+ onPageChange?: (page: number, start: number, end: number) => void;
14
15
  className?: string;
15
16
  rowDraggable?: boolean;
16
17
  readOnly?: boolean;
17
18
  showFilters?: boolean;
19
+ stickyHeader?: boolean;
20
+ dataLength?: number;
21
+ viewLength?: number;
18
22
  rowClassName?: TableRowClassNameHandler<TableDataItem>;
19
23
  }
20
24
  type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
package/esm/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;
package/esm/table/data-table.js CHANGED
@@ -11,6 +11,7 @@ import Grid from '../grid';
11
11
  import Button from '../button';
12
12
  import Tooltip from '../tooltip';
13
13
  import Table from './table';
14
+ import Popover from '../popover';
14
15
  function DataTable(_ref) {
15
16
  var _ref$cols = _ref.cols,
16
17
  cols = _ref$cols === void 0 ? [] : _ref$cols,
@@ -46,6 +47,9 @@ function DataTable(_ref) {
46
47
  onDragLeave = _ref.onDragLeave,
47
48
  onDrop = _ref.onDrop,
48
49
  onRowClick = _ref.onRowClick,
50
+ dataLength = _ref.dataLength,
51
+ viewLength = _ref.viewLength,
52
+ _onPageChange = _ref.onPageChange,
49
53
  _ref$disableMenu = _ref.disableMenu,
50
54
  disableMenu = _ref$disableMenu === void 0 ? false : _ref$disableMenu;
51
55
  var TABLE_ID = _.uniqueId('tbl');
@@ -62,7 +66,7 @@ function DataTable(_ref) {
62
66
  var _useState3 = useState([]),
63
67
  _useState4 = _slicedToArray(_useState3, 2),
64
68
  hideColumn = _useState4[0],
65
- _setHideColumn = _useState4[1];
69
+ setHideColumn = _useState4[1];
66
70
  // const handleMenuClose = () => {
67
71
  // setAnchorEl(null);
68
72
  // };
@@ -120,20 +124,20 @@ function DataTable(_ref) {
120
124
  // setSelected([]);
121
125
  // };
122
126
 
123
- // const handleHideColumnClick = (event: React.MouseEvent<HTMLLIElement, MouseEvent>, id: any) => {
124
- // const selectedIndex = hideColumn.indexOf(id as never);
125
- // let newSelected: any[] | ((prevState: never[]) => never[]) = [];
126
- // if (selectedIndex === -1) {
127
- // newSelected = newSelected.concat(hideColumn, id);
128
- // } else if (selectedIndex === 0) {
129
- // newSelected = newSelected.concat(hideColumn.slice(1));
130
- // } else if (selectedIndex === hideColumn.length - 1) {
131
- // newSelected = newSelected.concat(hideColumn.slice(0, -1));
132
- // } else if (selectedIndex > 0) {
133
- // newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
134
- // }
135
- // setHideColumn(newSelected as never[]);
136
- // };
127
+ var handleHideColumnClick = function handleHideColumnClick(_event, id) {
128
+ var selectedIndex = hideColumn.indexOf(id);
129
+ var newSelected = [];
130
+ if (selectedIndex === -1) {
131
+ newSelected = newSelected.concat(hideColumn, id);
132
+ } else if (selectedIndex === 0) {
133
+ newSelected = newSelected.concat(hideColumn.slice(1));
134
+ } else if (selectedIndex === hideColumn.length - 1) {
135
+ newSelected = newSelected.concat(hideColumn.slice(0, -1));
136
+ } else if (selectedIndex > 0) {
137
+ newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
138
+ }
139
+ setHideColumn(newSelected);
140
+ };
137
141
 
138
142
  // Children change reset selected
139
143
  useEffect(function () {
@@ -172,6 +176,19 @@ function DataTable(_ref) {
172
176
  var COLUMNS = cols.filter(function (col) {
173
177
  return !hideColumn.includes(col.name);
174
178
  });
179
+ var content = function content() {
180
+ return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
181
+ var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
182
+ return /*#__PURE__*/React.createElement(Popover.Item, {
183
+ key: colunqid
184
+ // selected={!hideColumn.includes(option.name as never)}
185
+ ,
186
+ onClick: function onClick(e) {
187
+ return handleHideColumnClick(e, option.name);
188
+ }
189
+ }, /*#__PURE__*/React.createElement("span", null, option.name));
190
+ }));
191
+ };
175
192
  return /*#__PURE__*/React.createElement(Container, {
176
193
  direction: "column"
177
194
  }, /*#__PURE__*/React.createElement(Grid.Container, {
@@ -270,13 +287,15 @@ function DataTable(_ref) {
270
287
  px: 0.6,
271
288
  py: 0.4,
272
289
  type: "dark"
290
+ }, /*#__PURE__*/React.createElement(Popover, {
291
+ child: content
273
292
  }, /*#__PURE__*/React.createElement(Button, {
274
293
  onClick: function onClick() {},
275
294
  auto: true,
276
295
  scale: 2 / 3,
277
296
  px: 0.6,
278
297
  iconRight: /*#__PURE__*/React.createElement(Columns, null)
279
- }))) : null))), children ? /*#__PURE__*/React.createElement("div", {
298
+ })))) : null))), children ? /*#__PURE__*/React.createElement("div", {
280
299
  style: {
281
300
  padding: '1rem'
282
301
  }
@@ -301,11 +320,21 @@ function DataTable(_ref) {
301
320
  onDrop: onDrop,
302
321
  id: TABLE_ID,
303
322
  style: _extends({
323
+ overflow: 'auto',
324
+ position: 'relative',
304
325
  height: 'calc(100vh - 8.5rem)',
305
326
  maxWidth: 'calc(100vw - 1rem)',
306
327
  width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
307
328
  }, style)
308
329
  }, /*#__PURE__*/React.createElement(Table, {
330
+ stickyHeader: true,
331
+ dataLength: dataLength,
332
+ viewLength: viewLength,
333
+ onPageChange: function onPageChange(page, start, end) {
334
+ if (_onPageChange) {
335
+ _onPageChange(page, start, end);
336
+ }
337
+ },
309
338
  onRow: onRowClick,
310
339
  rowDraggable: rowDraggable,
311
340
  showFilters: openFilter,
package/esm/table/table-head.d.ts CHANGED
@@ -4,6 +4,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
4
4
  width: number;
5
5
  columns: Array<TableAbstractColumn<TableDataItem>>;
6
6
  onFilters?: (filters: any) => void;
7
+ stickyHeader: boolean;
7
8
  showFilters?: boolean;
8
9
  className?: string;
9
10
  }
package/esm/table/table-head.js CHANGED
@@ -33,7 +33,8 @@ var TableHead = function TableHead(props) {
33
33
  columns = _ref.columns,
34
34
  width = _ref.width,
35
35
  onFilters = _ref.onFilters,
36
- showFilters = _ref.showFilters;
36
+ showFilters = _ref.showFilters,
37
+ stickyHeader = _ref.stickyHeader;
37
38
  var isScalableWidth = useMemo(function () {
38
39
  return columns.find(function (item) {
39
40
  return !!item.width;
@@ -122,9 +123,9 @@ var TableHead = function TableHead(props) {
122
123
  });
123
124
  };
124
125
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
125
- 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]]])
126
+ 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]]])
126
127
  }, /*#__PURE__*/React.createElement("tr", {
127
- 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]]])
128
+ 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]]])
128
129
  }, columns.map(function (column, index) {
129
130
  return /*#__PURE__*/React.createElement("th", {
130
131
  style: {
@@ -136,23 +137,23 @@ var TableHead = function TableHead(props) {
136
137
  },
137
138
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
138
139
  "data-column": column.label,
139
- 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 || "")
140
+ 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 || "")
140
141
  }, /*#__PURE__*/React.createElement("div", {
141
- 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"
142
+ 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"
142
143
  }, column.label, /*#__PURE__*/React.createElement("br", {
143
- 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]]])
144
+ 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]]])
144
145
  }), /*#__PURE__*/React.createElement("span", {
145
146
  style: {
146
147
  textAlign: 'center'
147
148
  },
148
- 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]]])
149
+ 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]]])
149
150
  }, column.text)));
150
151
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
151
- 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]]])
152
+ 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]]])
152
153
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
153
- id: "134865897",
154
- 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]
155
- }, "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;}")));
154
+ id: "3728881297",
155
+ 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]
156
+ }, "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;}")));
156
157
  };
157
158
  TableHead.displayName = 'TableHead';
158
159
  export default TableHead;
package/esm/table/table-types.d.ts CHANGED
@@ -13,6 +13,7 @@ export type TableAbstractColumn<TableDataItem> = {
13
13
  noWrap?: boolean;
14
14
  fontSize?: string | number;
15
15
  options?: any[];
16
+ stickyHeader?: boolean;
16
17
  renderHandler: TableColumnRender<TableDataItemBase>;
17
18
  };
18
19
  export type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;
package/esm/table/table.d.ts CHANGED
@@ -11,10 +11,14 @@ interface Props<TableDataItem extends TableDataItemBase> {
11
11
  onChange?: TableOnChange<TableDataItem>;
12
12
  onFilters?: (filters: any) => void;
13
13
  onSelected?: (selected: any[]) => void;
14
+ onPageChange?: (page: number, start: number, end: number) => void;
14
15
  className?: string;
15
16
  rowDraggable?: boolean;
16
17
  readOnly?: boolean;
17
18
  showFilters?: boolean;
19
+ stickyHeader?: boolean;
20
+ dataLength?: number;
21
+ viewLength?: number;
18
22
  rowClassName?: TableRowClassNameHandler<TableDataItem>;
19
23
  }
20
24
  type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
package/esm/table/table.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
3
3
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
- var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
5
+ var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
6
6
  import _JSXStyle from "../styled-jsx.es.js";
7
7
  /* "use client" */
8
8
 
@@ -14,6 +14,8 @@ import useResize from '../utils/use-resize';
14
14
  import { TableContext } from './table-context';
15
15
  import useScale, { withScale } from '../use-scale';
16
16
  import TableColumn from './table-column';
17
+ import { ChevronLeft, ChevronRight } from '@helpdice/icons';
18
+ import Pagination from '../pagination';
17
19
  function TableComponent(tableProps) {
18
20
  /* eslint-disable @typescript-eslint/no-unused-vars */
19
21
  var _ref = tableProps,
@@ -33,9 +35,14 @@ function TableComponent(tableProps) {
33
35
  onCell = _ref.onCell,
34
36
  onChange = _ref.onChange,
35
37
  onFilters = _ref.onFilters,
38
+ onPageChange = _ref.onPageChange,
36
39
  _ref$showFilters = _ref.showFilters,
37
40
  showFilters = _ref$showFilters === void 0 ? false : _ref$showFilters,
41
+ _ref$stickyHeader = _ref.stickyHeader,
42
+ stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
38
43
  onSelected = _ref.onSelected,
44
+ dataLength = _ref.dataLength,
45
+ viewLength = _ref.viewLength,
39
46
  _ref$className = _ref.className,
40
47
  className = _ref$className === void 0 ? '' : _ref$className,
41
48
  _ref$rowClassName = _ref.rowClassName,
@@ -84,6 +91,16 @@ function TableComponent(tableProps) {
84
91
  useResize(function () {
85
92
  return updateShape();
86
93
  });
94
+
95
+ // Function to calculate start and end index for a given page
96
+ var getDataRange = function getDataRange(pageNumber, itemsPerPage, dataLength) {
97
+ var startIndex = (pageNumber - 1) * itemsPerPage;
98
+ var endIndex = Math.min(startIndex + itemsPerPage - 1, dataLength - 1);
99
+ return {
100
+ startIndex: startIndex,
101
+ endIndex: endIndex
102
+ };
103
+ };
87
104
  return /*#__PURE__*/React.createElement(TableContext.Provider, {
88
105
  value: contextValue
89
106
  }, /*#__PURE__*/React.createElement("table", _extends({
@@ -91,6 +108,7 @@ function TableComponent(tableProps) {
91
108
  }, props, {
92
109
  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 || "")
93
110
  }), /*#__PURE__*/React.createElement(TableHead, {
111
+ stickyHeader: stickyHeader,
94
112
  columns: columns,
95
113
  onFilters: onFilters,
96
114
  showFilters: showFilters,
@@ -108,7 +126,19 @@ function TableComponent(tableProps) {
108
126
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
109
127
  id: "2132340556",
110
128
  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)]
111
- }, "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), ";}"))));
129
+ }, "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", {
130
+ 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)]]])
131
+ }, /*#__PURE__*/React.createElement(Pagination, {
132
+ onChange: function onChange(pageNumber) {
133
+ // Get the range for the current page
134
+ var _getDataRange = getDataRange(pageNumber, viewLength, dataLength),
135
+ startIndex = _getDataRange.startIndex,
136
+ endIndex = _getDataRange.endIndex;
137
+ onPageChange(pageNumber, startIndex, endIndex);
138
+ },
139
+ limit: 5,
140
+ count: Number(dataLength / viewLength)
141
+ }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null)))) : null));
112
142
  }
113
143
  TableComponent.displayName = 'Table';
114
144
  TableComponent.Column = TableColumn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.3.1",
3
+ "version": "1.3.3",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",