@helpdice/ui 1.2.0 → 1.2.1

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.
package/dist/index.d.ts CHANGED
@@ -77,7 +77,7 @@ export { default as Spacer } from './spacer';
77
77
  export type { SpacerProps } from './spacer';
78
78
  export { default as Spinner } from './spinner';
79
79
  export type { SpinnerProps } from './spinner';
80
- export { default as Table } from './table';
80
+ export { default as Table, DataTable } from './table';
81
81
  export type { TableProps, TableColumnProps } from './table';
82
82
  export { default as Tabs } from './tabs';
83
83
  export type { TabsProps } from './tabs';
package/dist/index.js CHANGED
@@ -2962,7 +2962,7 @@ const ArrowLeft = ({ color, strokeWidth, set }) => {
2962
2962
  }
2963
2963
  };
2964
2964
  ArrowLeft.displayName = "ArrowLeft";
2965
- createIcon(ArrowLeft);
2965
+ var ArrowLeft$1 = createIcon(ArrowLeft);
2966
2966
 
2967
2967
  const ArrowCircleRight = ({ color, strokeWidth, set }) => {
2968
2968
  const Broken = () => (React__namespace.createElement("g", null,
@@ -5376,7 +5376,7 @@ const Delete = ({ color, strokeWidth, set }) => {
5376
5376
  }
5377
5377
  };
5378
5378
  Delete.displayName = "Delete";
5379
- createIcon(Delete);
5379
+ var Delete$1 = createIcon(Delete);
5380
5380
 
5381
5381
  const Dislike = ({ color, strokeWidth, set }) => {
5382
5382
  const Broken = () => (React__namespace.createElement("g", null,
@@ -5738,7 +5738,7 @@ const Edit1 = ({ color, strokeWidth, set }) => {
5738
5738
  }
5739
5739
  };
5740
5740
  Edit1.displayName = "Edit1";
5741
- createIcon(Edit1);
5741
+ var Edit = createIcon(Edit1);
5742
5742
 
5743
5743
  const Edit2 = ({ color, strokeWidth, set }) => {
5744
5744
  const Broken = () => (React__namespace.createElement("g", null,
@@ -6201,7 +6201,7 @@ const Filters1 = ({ color, strokeWidth, set }) => {
6201
6201
  }
6202
6202
  };
6203
6203
  Filters1.displayName = "Filters1";
6204
- createIcon(Filters1);
6204
+ var Filters = createIcon(Filters1);
6205
6205
 
6206
6206
  const Filters2 = ({ color, strokeWidth, set }) => {
6207
6207
  const Broken = () => (React__namespace.createElement("g", null,
@@ -9505,7 +9505,7 @@ const Refresh = ({ color, strokeWidth, set }) => {
9505
9505
  }
9506
9506
  };
9507
9507
  Refresh.displayName = "Refresh";
9508
- createIcon(Refresh);
9508
+ var Refresh$1 = createIcon(Refresh);
9509
9509
 
9510
9510
  const ResizeCircleHorizontal = ({ color, strokeWidth, set }) => {
9511
9511
  const Broken = () => (React__namespace.createElement("g", null,
@@ -12463,7 +12463,7 @@ const Columns = ({ color, strokeWidth, set }) => {
12463
12463
  }
12464
12464
  };
12465
12465
  Columns.displayName = "Columns";
12466
- createIcon(Columns);
12466
+ var Columns$1 = createIcon(Columns);
12467
12467
 
12468
12468
  const Folder = ({ color, strokeWidth, set }) => {
12469
12469
  const Outline = () => (React.createElement("g", null,
@@ -42115,7 +42115,8 @@ var TableHead = function TableHead(props) {
42115
42115
  var _ref = props,
42116
42116
  columns = _ref.columns,
42117
42117
  width = _ref.width,
42118
- onFilters = _ref.onFilters;
42118
+ onFilters = _ref.onFilters,
42119
+ showFilters = _ref.showFilters;
42119
42120
  var isScalableWidth = React.useMemo(function () {
42120
42121
  return columns.find(function (item) {
42121
42122
  return !!item.width;
@@ -42146,7 +42147,9 @@ var TableHead = function TableHead(props) {
42146
42147
  if (accessor === 'fixed') {
42147
42148
  var _filters$filterName;
42148
42149
  // Dropdown filter for categorical data (category, status)
42149
- return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Select, {
42150
+ return /*#__PURE__*/React.createElement("td", {
42151
+ "data-column": Header
42152
+ }, /*#__PURE__*/React.createElement(Select, {
42150
42153
  key: unq_accessor,
42151
42154
  name: filterName,
42152
42155
  value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
@@ -42164,8 +42167,10 @@ var TableHead = function TableHead(props) {
42164
42167
  if (accessor === 'date') {
42165
42168
  // Date filter
42166
42169
  return /*#__PURE__*/React.createElement("th", {
42170
+ "data-column": Header,
42167
42171
  key: unq_accessor
42168
42172
  }, /*#__PURE__*/React.createElement(Input, {
42173
+ id: "filter-date-".concat(filterName),
42169
42174
  htmlType: "date",
42170
42175
  name: filterName,
42171
42176
  value: filters[filterName],
@@ -42176,7 +42181,9 @@ var TableHead = function TableHead(props) {
42176
42181
  }
42177
42182
  if (accessor === 'search') {
42178
42183
  // Text search filter
42179
- return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
42184
+ return /*#__PURE__*/React.createElement("th", {
42185
+ "data-column": Header
42186
+ }, /*#__PURE__*/React.createElement(Input, {
42180
42187
  id: "filter-search-".concat(filterName),
42181
42188
  htmlType: "text"
42182
42189
  // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -42203,6 +42210,7 @@ var TableHead = function TableHead(props) {
42203
42210
  }, columns.map(function (column, index) {
42204
42211
  return /*#__PURE__*/React.createElement("th", {
42205
42212
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
42213
+ "data-column": column.label,
42206
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]]]) + " " + (column.className || "")
42207
42215
  }, /*#__PURE__*/React.createElement("div", {
42208
42216
  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"
@@ -42214,7 +42222,7 @@ var TableHead = function TableHead(props) {
42214
42222
  },
42215
42223
  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]]])
42216
42224
  }, column.text)));
42217
- })), /*#__PURE__*/React.createElement("tr", {
42225
+ })), showFilters && /*#__PURE__*/React.createElement("tr", {
42218
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]]])
42219
42227
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
42220
42228
  id: "134865897",
@@ -42241,6 +42249,7 @@ var TableCell = function TableCell(_ref) {
42241
42249
  color: "".concat(column === null || column === undefined ? undefined : column.color),
42242
42250
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
42243
42251
  }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
42252
+ "data-column": column.label,
42244
42253
  key: "row-td-".concat(index, "-").concat(column.prop.toString()),
42245
42254
  onClick: function onClick() {
42246
42255
  return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -42447,7 +42456,7 @@ var TableColumn = function TableColumn(columnProps) {
42447
42456
  };
42448
42457
  TableColumn.displayName = 'TableColumn';
42449
42458
 
42450
- var _excluded$b = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onSelected", "className", "rowClassName"];
42459
+ var _excluded$b = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
42451
42460
  function TableComponent(tableProps) {
42452
42461
  /* eslint-disable @typescript-eslint/no-unused-vars */
42453
42462
  var _ref = tableProps,
@@ -42467,6 +42476,8 @@ function TableComponent(tableProps) {
42467
42476
  onCell = _ref.onCell;
42468
42477
  _ref.onChange;
42469
42478
  var onFilters = _ref.onFilters,
42479
+ _ref$showFilters = _ref.showFilters,
42480
+ showFilters = _ref$showFilters === undefined ? false : _ref$showFilters,
42470
42481
  onSelected = _ref.onSelected,
42471
42482
  _ref$className = _ref.className,
42472
42483
  className = _ref$className === undefined ? '' : _ref$className,
@@ -42525,6 +42536,7 @@ function TableComponent(tableProps) {
42525
42536
  }), /*#__PURE__*/React.createElement(TableHead, {
42526
42537
  columns: columns,
42527
42538
  onFilters: onFilters,
42539
+ showFilters: showFilters,
42528
42540
  width: width
42529
42541
  }), /*#__PURE__*/React.createElement(TableBody, {
42530
42542
  data: data,
@@ -42546,6 +42558,325 @@ TableComponent.Column = TableColumn;
42546
42558
  var Table = withScale(TableComponent);
42547
42559
  Table.Column = TableColumn;
42548
42560
 
42561
+ function DataTable(_ref) {
42562
+ var _ref$cols = _ref.cols,
42563
+ cols = _ref$cols === undefined ? [] : _ref$cols,
42564
+ _ref$rows = _ref.rows,
42565
+ rows = _ref$rows === undefined ? [] : _ref$rows,
42566
+ _ref$readOnly = _ref.readOnly,
42567
+ readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
42568
+ _ref$heading = _ref.heading,
42569
+ heading = _ref$heading === undefined ? [] : _ref$heading,
42570
+ _ref$filter = _ref.filter,
42571
+ filter = _ref$filter === undefined ? true : _ref$filter,
42572
+ menu = _ref.menu,
42573
+ _ref$sideMenu = _ref.sideMenu,
42574
+ sideMenu = _ref$sideMenu === undefined ? false : _ref$sideMenu,
42575
+ _ref$style = _ref.style,
42576
+ style = _ref$style === undefined ? {} : _ref$style,
42577
+ children = _ref.children,
42578
+ _ref$onBack = _ref.onBack,
42579
+ onBack = _ref$onBack === undefined ? function () {
42580
+ window.history.back();
42581
+ } : _ref$onBack,
42582
+ onRefresh = _ref.onRefresh,
42583
+ onFilters = _ref.onFilters,
42584
+ onSelectedDelete = _ref.onSelectedDelete,
42585
+ onSelectedEdit = _ref.onSelectedEdit,
42586
+ onSelected = _ref.onSelected,
42587
+ _ref$disableViewColum = _ref.disableViewColumn,
42588
+ disableViewColumn = _ref$disableViewColum === undefined ? false : _ref$disableViewColum,
42589
+ _ref$rowDraggable = _ref.rowDraggable,
42590
+ rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
42591
+ onDragOver = _ref.onDragOver,
42592
+ onDragEnter = _ref.onDragEnter,
42593
+ onDragLeave = _ref.onDragLeave,
42594
+ onDrop = _ref.onDrop,
42595
+ onRowClick = _ref.onRowClick,
42596
+ _ref$disableMenu = _ref.disableMenu,
42597
+ disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu;
42598
+ var TABLE_ID = _.uniqueId('tbl');
42599
+ // const [anchorEl, setAnchorEl] = useState(null);
42600
+ var _useState = React.useState([]),
42601
+ _useState2 = _slicedToArray(_useState, 2),
42602
+ selected = _useState2[0],
42603
+ setSelected = _useState2[1];
42604
+ // const [table_filters] = useDebounce(filters, 500);
42605
+ // const open = Boolean(anchorEl);
42606
+ // const handleMenuOpen = (event: any) => {
42607
+ // setAnchorEl(event.currentTarget);
42608
+ // };
42609
+ var _useState3 = React.useState([]),
42610
+ _useState4 = _slicedToArray(_useState3, 2),
42611
+ hideColumn = _useState4[0];
42612
+ _useState4[1];
42613
+ // const handleMenuClose = () => {
42614
+ // setAnchorEl(null);
42615
+ // };
42616
+
42617
+ var _useState5 = React.useState(false),
42618
+ _useState6 = _slicedToArray(_useState5, 2),
42619
+ openFilter = _useState6[0],
42620
+ setOpenFilter = _useState6[1];
42621
+ var handleShowFilter = function handleShowFilter() {
42622
+ return setOpenFilter(!openFilter);
42623
+ };
42624
+ React.useEffect(function () {
42625
+ if (selected.length > 0 && onSelected) {
42626
+ onSelected(selected);
42627
+ }
42628
+ }, [selected]);
42629
+ React.useEffect(function () {
42630
+ cols.forEach(function (col) {
42631
+ if (hideColumn.includes(col.name)) {
42632
+ document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
42633
+ el.style.display = 'none';
42634
+ });
42635
+ } else {
42636
+ document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
42637
+ el.style.display = '';
42638
+ });
42639
+ }
42640
+ });
42641
+ }, [hideColumn, cols, rows]);
42642
+
42643
+ // const handleClick = (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>, id: any) => {
42644
+ // if (readOnly) {
42645
+ // return true;
42646
+ // }
42647
+ // const selectedIndex = selected.indexOf(id as never);
42648
+ // let newSelected: never[] | ((prevState: never[]) => never[]) = [];
42649
+ // if (selectedIndex === -1) {
42650
+ // newSelected = newSelected.concat(selected, id);
42651
+ // } else if (selectedIndex === 0) {
42652
+ // newSelected = newSelected.concat(selected.slice(1));
42653
+ // } else if (selectedIndex === selected.length - 1) {
42654
+ // newSelected = newSelected.concat(selected.slice(0, -1));
42655
+ // } else if (selectedIndex > 0) {
42656
+ // newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
42657
+ // }
42658
+ // setSelected(newSelected);
42659
+ // };
42660
+
42661
+ // const handleSelectAllClick = (event: { target: { checked: any } }) => {
42662
+ // if (event.target.checked) {
42663
+ // const newSelecteds = rows.map((n: { _id: any }) => n._id);
42664
+ // setSelected(newSelecteds as never[]);
42665
+ // return;
42666
+ // }
42667
+ // setSelected([]);
42668
+ // };
42669
+
42670
+ // const handleHideColumnClick = (event: React.MouseEvent<HTMLLIElement, MouseEvent>, id: any) => {
42671
+ // const selectedIndex = hideColumn.indexOf(id as never);
42672
+ // let newSelected: any[] | ((prevState: never[]) => never[]) = [];
42673
+ // if (selectedIndex === -1) {
42674
+ // newSelected = newSelected.concat(hideColumn, id);
42675
+ // } else if (selectedIndex === 0) {
42676
+ // newSelected = newSelected.concat(hideColumn.slice(1));
42677
+ // } else if (selectedIndex === hideColumn.length - 1) {
42678
+ // newSelected = newSelected.concat(hideColumn.slice(0, -1));
42679
+ // } else if (selectedIndex > 0) {
42680
+ // newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
42681
+ // }
42682
+ // setHideColumn(newSelected as never[]);
42683
+ // };
42684
+
42685
+ // Children change reset selected
42686
+ React.useEffect(function () {
42687
+ setSelected([]);
42688
+ }, [children]);
42689
+
42690
+ // const tableHeadStyle = {
42691
+ // position: 'sticky',
42692
+ // // backgroundColor: '#fafafb',
42693
+ // // boxShadow: '0 2px 2px -1px rgba(0, 0, 0, 0.4)',
42694
+ // top: 0,
42695
+ // zIndex: 9,
42696
+ // '& .MuiTableCell-root': {
42697
+ // fontSize: '14px !important',
42698
+ // py: 0.2
42699
+ // }
42700
+ // // ...borderStyle
42701
+ // };
42702
+
42703
+ // const borderStyle = {
42704
+ // '& .MuiTableCell-root': {
42705
+ // py: 0.2,
42706
+ // px: 1
42707
+ // // borderLeft: '1px solid #ccc !important',
42708
+ // // borderRight: '1px solid #ccc !important'
42709
+ // },
42710
+ // '& td:first-of-type': {
42711
+ // borderLeft: 'none !important'
42712
+ // },
42713
+ // '& td:last-child': {
42714
+ // borderRight: 'none !important'
42715
+ // }
42716
+ // // '& tr': { borderBottom: '1px solid #ccc !important' }
42717
+ // };
42718
+
42719
+ var COLUMNS = cols.filter(function (col) {
42720
+ return !hideColumn.includes(col.name);
42721
+ });
42722
+ return /*#__PURE__*/React.createElement(GridContainer, {
42723
+ direction: "column"
42724
+ }, /*#__PURE__*/React.createElement(Grid.Container, {
42725
+ style: {
42726
+ marginBottom: '0.5rem',
42727
+ marginTop: '0.5rem'
42728
+ }
42729
+ }, heading && /*#__PURE__*/React.createElement(Grid, {
42730
+ sm: disableMenu ? 24 : 12,
42731
+ xs: 24
42732
+ }, /*#__PURE__*/React.createElement("div", {
42733
+ style: {
42734
+ display: 'flex',
42735
+ alignItems: 'center',
42736
+ gap: '1rem'
42737
+ }
42738
+ }, children && /*#__PURE__*/React.createElement(Button, {
42739
+ auto: true,
42740
+ scale: 2 / 3,
42741
+ px: 0.6,
42742
+ iconRight: /*#__PURE__*/React.createElement(ArrowLeft$1, null),
42743
+ onClick: onBack
42744
+ }), heading)), !disableMenu && /*#__PURE__*/React.createElement(Grid, {
42745
+ sm: 12,
42746
+ xs: 24
42747
+ }, /*#__PURE__*/React.createElement(GridContainer, {
42748
+ width: "100%",
42749
+ style: {
42750
+ margin: 0,
42751
+ gap: '0.6rem'
42752
+ },
42753
+ justify: "flex-end",
42754
+ alignContent: "center"
42755
+ }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
42756
+ text: "Edit Selected",
42757
+ placement: "bottom",
42758
+ font: 0.8,
42759
+ px: 0.6,
42760
+ py: 0.4,
42761
+ type: "dark"
42762
+ }, /*#__PURE__*/React.createElement(Button, {
42763
+ onClick: function onClick() {
42764
+ return onSelectedEdit(selected[0]);
42765
+ },
42766
+ iconRight: /*#__PURE__*/React.createElement(Edit, null),
42767
+ auto: true,
42768
+ scale: 2 / 3,
42769
+ px: 0.6
42770
+ })) : null, onSelectedDelete ? /*#__PURE__*/React.createElement(Tooltip, {
42771
+ text: "Delete Selected",
42772
+ placement: "bottom",
42773
+ font: 0.8,
42774
+ px: 0.6,
42775
+ py: 0.4,
42776
+ type: "dark"
42777
+ }, /*#__PURE__*/React.createElement(Button, {
42778
+ onClick: function onClick() {
42779
+ return onSelectedDelete(selected);
42780
+ },
42781
+ auto: true,
42782
+ scale: 2 / 3,
42783
+ px: 0.6,
42784
+ iconRight: /*#__PURE__*/React.createElement(Delete$1, null)
42785
+ })) : null), onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
42786
+ text: "Refresh",
42787
+ placement: "bottom",
42788
+ font: 0.8,
42789
+ px: 0.6,
42790
+ py: 0.4,
42791
+ type: "dark"
42792
+ }, /*#__PURE__*/React.createElement(Button, {
42793
+ onClick: function onClick() {
42794
+ return onRefresh();
42795
+ },
42796
+ auto: true,
42797
+ scale: 2 / 3,
42798
+ px: 0.6,
42799
+ iconRight: /*#__PURE__*/React.createElement(Refresh$1, null)
42800
+ })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
42801
+ text: "Filters",
42802
+ placement: "bottomEnd",
42803
+ font: 0.8,
42804
+ px: 0.6,
42805
+ py: 0.4,
42806
+ type: "dark"
42807
+ }, /*#__PURE__*/React.createElement(Button, {
42808
+ onClick: handleShowFilter,
42809
+ auto: true,
42810
+ scale: 2 / 3,
42811
+ px: 0.6,
42812
+ iconRight: /*#__PURE__*/React.createElement(Filters, null)
42813
+ })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
42814
+ text: "Columns",
42815
+ placement: "bottomEnd",
42816
+ font: 0.8,
42817
+ px: 0.6,
42818
+ py: 0.4,
42819
+ type: "dark"
42820
+ }, /*#__PURE__*/React.createElement(Button, {
42821
+ onClick: function onClick() {},
42822
+ auto: true,
42823
+ scale: 2 / 3,
42824
+ px: 0.6,
42825
+ iconRight: /*#__PURE__*/React.createElement(Columns$1, null)
42826
+ }))) : null))), children ? /*#__PURE__*/React.createElement("div", {
42827
+ style: {
42828
+ padding: '1rem'
42829
+ }
42830
+ }, children) : /*#__PURE__*/React.createElement("div", {
42831
+ style: {
42832
+ gap: 5,
42833
+ display: 'flex',
42834
+ flexDirection: sideMenu ? 'row' : 'column'
42835
+ }
42836
+ }, sideMenu && /*#__PURE__*/React.createElement(GridContainer, {
42837
+ direction: "column",
42838
+ style: {
42839
+ width: '15rem',
42840
+ padding: '0.5rem 0.7rem',
42841
+ border: '1px solid #cfcfcf',
42842
+ borderRadius: '5px'
42843
+ }
42844
+ }, sideMenu), /*#__PURE__*/React.createElement("div", {
42845
+ onDragOver: onDragOver,
42846
+ onDragEnter: onDragEnter,
42847
+ onDragLeave: onDragLeave,
42848
+ onDrop: onDrop,
42849
+ id: TABLE_ID,
42850
+ style: _objectSpread2({
42851
+ overflow: 'hidden',
42852
+ height: 'calc(100vh - 8.5rem)',
42853
+ maxWidth: 'calc(100vw - 1rem)',
42854
+ width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
42855
+ }, style)
42856
+ }, /*#__PURE__*/React.createElement(Table, {
42857
+ onRow: onRowClick,
42858
+ rowDraggable: rowDraggable,
42859
+ showFilters: openFilter,
42860
+ onSelected: function onSelected(selected) {
42861
+ return setSelected(selected);
42862
+ },
42863
+ onFilters: onFilters,
42864
+ data: rows,
42865
+ style: {
42866
+ borderCollapse: 'collapse',
42867
+ overflow: 'auto'
42868
+ }
42869
+ }, COLUMNS.map(function (column, index) {
42870
+ return /*#__PURE__*/React.createElement(Table.Column, {
42871
+ key: "".concat(column.id, "-").concat(index),
42872
+ prop: column.id,
42873
+ label: column.name,
42874
+ filter: column.filter
42875
+ });
42876
+ })))));
42877
+ }
42878
+ var dataTable = /*#__PURE__*/React.memo(DataTable);
42879
+
42549
42880
  /* "use client" */
42550
42881
 
42551
42882
  var defaultContext$1 = {
@@ -45456,6 +45787,7 @@ exports.Code = Code;
45456
45787
  exports.Collapse = Collapse;
45457
45788
  exports.Container = GridContainer;
45458
45789
  exports.CssBaseline = MemoCssBaseline;
45790
+ exports.DataTable = dataTable;
45459
45791
  exports.Description = Description;
45460
45792
  exports.Display = Display;
45461
45793
  exports.Divider = Divider;
@@ -0,0 +1,36 @@
1
+ import React from 'react';
2
+ type DataTableProps = {
3
+ cols: any[];
4
+ rows: any[];
5
+ readOnly?: boolean;
6
+ loading?: boolean;
7
+ heading?: never[];
8
+ filter?: boolean;
9
+ menu?: never;
10
+ sideMenu?: boolean;
11
+ style?: object;
12
+ children?: React.ReactNode;
13
+ stickyHeader?: boolean;
14
+ hasMore?: boolean;
15
+ nextFn?: () => void;
16
+ onBack?: () => void;
17
+ infiniteLoader?: React.ReactNode;
18
+ endMessage?: React.ReactNode;
19
+ onRefresh?: () => void;
20
+ onFilters?: (filters: object) => void;
21
+ onSelectedDelete?: (selected: never[]) => void;
22
+ onSelectedEdit?: (selected: never) => void;
23
+ onSelected?: (selected: any) => void;
24
+ disableViewColumn?: boolean;
25
+ rowDraggable?: boolean;
26
+ onDragOver?: () => void;
27
+ onDragEnter?: () => void;
28
+ onDragLeave?: () => void;
29
+ onDrop?: () => void;
30
+ onRowClick?: (row: any) => void;
31
+ disableMenu?: boolean;
32
+ };
33
+ 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;
35
+ declare const _default: React.MemoExoticComponent<typeof DataTable>;
36
+ export default _default;
@@ -1,5 +1,6 @@
1
1
  import Table from './table';
2
2
  export type { TableProps } from './table';
3
3
  export type { TableColumnProps } from './table-column';
4
- export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender, } from './table-types';
4
+ export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender } from './table-types';
5
+ export { default as DataTable } from './data-table';
5
6
  export default Table;