@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/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 'components/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
@@ -7,7 +7,6 @@ import useTheme from '../use-theme';
7
7
  import Input from '../input';
8
8
  import _ from 'lodash';
9
9
  import Select from '../select';
10
- import Button from '../button';
11
10
  var makeColgroup = function makeColgroup(width, columns) {
12
11
  var unsetWidthCount = columns.filter(function (c) {
13
12
  return !c.width;
@@ -34,7 +33,8 @@ var TableHead = function TableHead(props) {
34
33
  columns = _ref.columns,
35
34
  width = _ref.width,
36
35
  onFilters = _ref.onFilters,
37
- showFilters = _ref.showFilters;
36
+ showFilters = _ref.showFilters,
37
+ stickyHeader = _ref.stickyHeader;
38
38
  var isScalableWidth = useMemo(function () {
39
39
  return columns.find(function (item) {
40
40
  return !!item.width;
@@ -47,14 +47,19 @@ var TableHead = function TableHead(props) {
47
47
  var handleFilterChange = function handleFilterChange(name, value) {
48
48
  setFilters(function (prevFilters) {
49
49
  var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
50
+ if (onFilters) {
51
+ onFilters(updatedFilters);
52
+ }
50
53
  return updatedFilters;
51
54
  });
52
55
  };
53
- var applyFilters = function applyFilters() {
54
- if (onFilters) {
55
- onFilters(filters);
56
- }
57
- };
56
+
57
+ // const applyFilters = () => {
58
+ // if (onFilters) {
59
+ // onFilters(filters);
60
+ // }
61
+ // }
62
+
58
63
  var generateFilterInputs = function generateFilterInputs() {
59
64
  return columns.map(function (col) {
60
65
  var _String, _filters$filterName;
@@ -63,9 +68,16 @@ var TableHead = function TableHead(props) {
63
68
  options = col.options;
64
69
  var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
65
70
  var unq_accessor = _.uniqueId(filterName);
71
+ // if (Header === 'actions') {
72
+ // return (
73
+ // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
74
+ // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
75
+ // </th>
76
+ // )
77
+ // }
66
78
  return /*#__PURE__*/React.createElement("th", {
67
79
  style: {
68
- margin: '3px'
80
+ padding: '3px'
69
81
  },
70
82
  "data-column": Header,
71
83
  key: unq_accessor
@@ -111,9 +123,9 @@ var TableHead = function TableHead(props) {
111
123
  });
112
124
  };
113
125
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
114
- 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]]])
115
127
  }, /*#__PURE__*/React.createElement("tr", {
116
- 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]]])
117
129
  }, columns.map(function (column, index) {
118
130
  return /*#__PURE__*/React.createElement("th", {
119
131
  style: {
@@ -125,32 +137,23 @@ var TableHead = function TableHead(props) {
125
137
  },
126
138
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
127
139
  "data-column": column.label,
128
- 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 || "")
129
141
  }, /*#__PURE__*/React.createElement("div", {
130
- 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"
131
143
  }, column.label, /*#__PURE__*/React.createElement("br", {
132
- 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]]])
133
145
  }), /*#__PURE__*/React.createElement("span", {
134
146
  style: {
135
147
  textAlign: 'center'
136
148
  },
137
- 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]]])
138
150
  }, column.text)));
139
- }), /*#__PURE__*/React.createElement("th", {
140
- 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]]])
141
151
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
142
- 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]]])
143
- }, generateFilterInputs(), /*#__PURE__*/React.createElement("th", {
144
- 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]]])
145
- }, /*#__PURE__*/React.createElement(Button, {
146
- onClick: applyFilters,
147
- auto: true,
148
- px: 0.6,
149
- scale: 2 / 3
150
- }, "Apply")))), /*#__PURE__*/React.createElement(_JSXStyle, {
151
- id: "134865897",
152
- 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]
153
- }, "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;}")));
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]]])
153
+ }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
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;}")));
154
157
  };
155
158
  TableHead.displayName = 'TableHead';
156
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.0",
3
+ "version": "1.3.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",