@helpdice/ui 1.4.3 → 1.4.5

package/dist/index.js

@@ -42217,18 +42217,21 @@ var TableHead = function TableHead(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
+    style: {
+      backgroundColor: '#fff'
+    },
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
     var _String2;
     var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
-      style: {
+      style: _objectSpread2({
         // textAlign: `${column?.align} !important`,
         // paddingLeft: '0.3rem',
         // paddingRight: '0.3rem',
-        // color: `${column?.color}`,
+        color: "".concat(column !== null && column !== undefined && column.color ? column === null || column === undefined ? undefined : column.color : '#fff'),
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
-      },
+      }, column === null || column === undefined ? undefined : column.style),
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
       "data-column": dataName,
       className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
@@ -42896,6 +42899,8 @@ function DataTable(_ref) {
     nextCursor = _ref.nextCursor,
     _ref$hasMore = _ref.hasMore,
     hasMore = _ref$hasMore === undefined ? false : _ref$hasMore,
+    _ref$stickyHeader = _ref.stickyHeader,
+    stickyHeader = _ref$stickyHeader === undefined ? false : _ref$stickyHeader,
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
@@ -42921,9 +42926,9 @@ function DataTable(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     openFilter = _useState6[0],
     setOpenFilter = _useState6[1];
-  var handleShowFilter = function handleShowFilter() {
+  function handleShowFilter() {
     return setOpenFilter(!openFilter);
-  };
+  }
   React.useEffect(function () {
     if (selected.length > 0 && onSelected) {
       onSelected(selected);
@@ -42943,8 +42948,8 @@ function DataTable(_ref) {
         });
       }
     });
-  }, [hideColumn, cols, rows]);
-  var handleHideColumnClick = function handleHideColumnClick(_event, _id) {
+  }, [hideColumn, cols]);
+  function handleHideColumnClick(_event, _id) {
     var _String2;
     var id = (_String2 = String(_id)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
@@ -42959,7 +42964,7 @@ function DataTable(_ref) {
       newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
     }
     setHideColumn(newSelected);
-  };
+  }
 
   // Children change reset selected
   React.useEffect(function () {
@@ -43030,9 +43035,11 @@ function DataTable(_ref) {
     style: {
       display: 'flex',
       alignItems: 'center',
-      gap: '1rem'
+      gap: '1rem',
+      fontSize: 'larger'
     }
   }, children && /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     auto: true,
     scale: 2 / 3,
     px: 0.6,
@@ -43062,6 +43069,7 @@ function DataTable(_ref) {
     },
     iconRight: /*#__PURE__*/React.createElement(Edit, null),
     auto: true,
+    htmlType: "button",
     scale: 2 / 3,
     px: 0.6
   })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React.createElement(Tooltip, {
@@ -43078,6 +43086,7 @@ function DataTable(_ref) {
     auto: true,
     scale: 2 / 3,
     px: 0.6,
+    htmlType: "button",
     iconRight: /*#__PURE__*/React.createElement(Delete$1, null)
   })) : null, onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Refresh",
@@ -43087,6 +43096,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: function onClick() {
       return onRefresh();
     },
@@ -43102,6 +43112,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: handleShowFilter,
     auto: true,
     scale: 2 / 3,
@@ -43119,6 +43130,7 @@ function DataTable(_ref) {
     placement: "bottomEnd",
     child: content
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: function onClick() {},
     auto: true,
     scale: 2 / 3,
@@ -43156,7 +43168,8 @@ function DataTable(_ref) {
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
-    stickyHeader: true,
+    stickyHeader: stickyHeader,
+    readOnly: readOnly,
     cursorPagination: cursorPagination,
     previousCursor: previousCursor,
     nextCursor: nextCursor,
@@ -43184,6 +43197,7 @@ function DataTable(_ref) {
     }
   }, COLUMNS.map(function (column, index) {
     return /*#__PURE__*/React.createElement(Table.Column, {
+      style: column === null || column === undefined ? undefined : column.style,
       options: column === null || column === undefined ? undefined : column.options,
       fontSize: column === null || column === undefined ? undefined : column.fontSize,
       key: "".concat(column.id, "-").concat(index),
@@ -43292,7 +43306,7 @@ var TableBody = function TableBody(_ref) {
           }
         }
       },
-      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
+      className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
     }, /*#__PURE__*/React.createElement(TableCell, {
       columns: cols,
       row: rw,
@@ -43300,9 +43314,9 @@ var TableBody = function TableBody(_ref) {
       emptyText: emptyText,
       onCellClick: onCell
     })), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "2019708038",
+      id: "787902152",
       dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(2.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
   }
   if ((data === null || data === undefined ? undefined : data.length) === 0) {
     return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
@@ -43381,6 +43395,7 @@ var TableColumn = function TableColumn(columnProps) {
     options = _ref.options,
     noWrap = _ref.noWrap,
     align = _ref.align,
+    style = _ref.style,
     _ref$fontSize = _ref.fontSize,
     fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
     _ref$className = _ref.className,
@@ -43403,9 +43418,10 @@ var TableColumn = function TableColumn(columnProps) {
       align: align,
       fontSize: fontSize,
       className: className,
+      style: style,
       renderHandler: function renderHandler() {}
     });
-  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
+  }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
   return null;
 };
 TableColumn.displayName = 'TableColumn';

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

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

package/dist/table/index.js

@@ -19975,18 +19975,21 @@ var TableHead = function TableHead(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
+    style: {
+      backgroundColor: '#fff'
+    },
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
     var _String2;
     var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
-      style: {
+      style: _objectSpread2({
         // textAlign: `${column?.align} !important`,
         // paddingLeft: '0.3rem',
         // paddingRight: '0.3rem',
-        // color: `${column?.color}`,
+        color: "".concat(column !== null && column !== undefined && column.color ? column === null || column === undefined ? undefined : column.color : '#fff'),
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
-      },
+      }, column === null || column === undefined ? undefined : column.style),
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
       "data-column": dataName,
       className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
@@ -31599,6 +31602,8 @@ function DataTable(_ref) {
     nextCursor = _ref.nextCursor,
     _ref$hasMore = _ref.hasMore,
     hasMore = _ref$hasMore === undefined ? false : _ref$hasMore,
+    _ref$stickyHeader = _ref.stickyHeader,
+    stickyHeader = _ref$stickyHeader === undefined ? false : _ref$stickyHeader,
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
@@ -31624,9 +31629,9 @@ function DataTable(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     openFilter = _useState6[0],
     setOpenFilter = _useState6[1];
-  var handleShowFilter = function handleShowFilter() {
+  function handleShowFilter() {
     return setOpenFilter(!openFilter);
-  };
+  }
   React.useEffect(function () {
     if (selected.length > 0 && onSelected) {
       onSelected(selected);
@@ -31646,8 +31651,8 @@ function DataTable(_ref) {
         });
       }
     });
-  }, [hideColumn, cols, rows]);
-  var handleHideColumnClick = function handleHideColumnClick(_event, _id) {
+  }, [hideColumn, cols]);
+  function handleHideColumnClick(_event, _id) {
     var _String2;
     var id = (_String2 = String(_id)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
@@ -31662,7 +31667,7 @@ function DataTable(_ref) {
       newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
     }
     setHideColumn(newSelected);
-  };
+  }
 
   // Children change reset selected
   React.useEffect(function () {
@@ -31733,9 +31738,11 @@ function DataTable(_ref) {
     style: {
       display: 'flex',
       alignItems: 'center',
-      gap: '1rem'
+      gap: '1rem',
+      fontSize: 'larger'
     }
   }, children && /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     auto: true,
     scale: 2 / 3,
     px: 0.6,
@@ -31765,6 +31772,7 @@ function DataTable(_ref) {
     },
     iconRight: /*#__PURE__*/React.createElement(Edit, null),
     auto: true,
+    htmlType: "button",
     scale: 2 / 3,
     px: 0.6
   })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React.createElement(Tooltip, {
@@ -31781,6 +31789,7 @@ function DataTable(_ref) {
     auto: true,
     scale: 2 / 3,
     px: 0.6,
+    htmlType: "button",
     iconRight: /*#__PURE__*/React.createElement(Delete$1, null)
   })) : null, onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Refresh",
@@ -31790,6 +31799,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: function onClick() {
       return onRefresh();
     },
@@ -31805,6 +31815,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: handleShowFilter,
     auto: true,
     scale: 2 / 3,
@@ -31822,6 +31833,7 @@ function DataTable(_ref) {
     placement: "bottomEnd",
     child: content
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: function onClick() {},
     auto: true,
     scale: 2 / 3,
@@ -31859,7 +31871,8 @@ function DataTable(_ref) {
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
-    stickyHeader: true,
+    stickyHeader: stickyHeader,
+    readOnly: readOnly,
     cursorPagination: cursorPagination,
     previousCursor: previousCursor,
     nextCursor: nextCursor,
@@ -31887,6 +31900,7 @@ function DataTable(_ref) {
     }
   }, COLUMNS.map(function (column, index) {
     return /*#__PURE__*/React.createElement(Table.Column, {
+      style: column === null || column === undefined ? undefined : column.style,
       options: column === null || column === undefined ? undefined : column.options,
       fontSize: column === null || column === undefined ? undefined : column.fontSize,
       key: "".concat(column.id, "-").concat(index),
@@ -31995,7 +32009,7 @@ var TableBody = function TableBody(_ref) {
           }
         }
       },
-      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
+      className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
     }, /*#__PURE__*/React.createElement(TableCell, {
       columns: cols,
       row: rw,
@@ -32003,9 +32017,9 @@ var TableBody = function TableBody(_ref) {
       emptyText: emptyText,
       onCellClick: onCell
     })), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "2019708038",
+      id: "787902152",
       dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(2.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
   }
   if ((data === null || data === undefined ? undefined : data.length) === 0) {
     return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
@@ -32127,6 +32141,7 @@ var TableColumn = function TableColumn(columnProps) {
     options = _ref.options,
     noWrap = _ref.noWrap,
     align = _ref.align,
+    style = _ref.style,
     _ref$fontSize = _ref.fontSize,
     fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
     _ref$className = _ref.className,
@@ -32149,9 +32164,10 @@ var TableColumn = function TableColumn(columnProps) {
       align: align,
       fontSize: fontSize,
       className: className,
+      style: style,
       renderHandler: function renderHandler() {}
     });
-  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
+  }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
   return null;
 };
 TableColumn.displayName = 'TableColumn';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { TableColumnRender, TableDataItemBase } from './table-types';
 export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     prop: keyof TableDataItem;
@@ -9,6 +9,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     className?: string;
     noWrap?: boolean;
     align?: string;
+    style?: CSSProperties;
     fontSize?: string | number;
     render?: TableColumnRender<TableDataItem>;
 };

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

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 export type TableDataItemBase = Record<string, any>;
 export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
 export type TableAbstractColumn<TableDataItem> = {
+    style: CSSProperties | undefined;
     prop: keyof TableDataItem;
     label: React.ReactNode | string;
     text?: React.ReactNode | string;
     filter?: string;
     className: string;
     width?: number;
-    align?: string;
+    align?: any;
     color?: string;
     noWrap?: boolean;
     fontSize?: string | number;

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

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

package/esm/table/data-table.js

@@ -58,6 +58,8 @@ function DataTable(_ref) {
     nextCursor = _ref.nextCursor,
     _ref$hasMore = _ref.hasMore,
     hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
+    _ref$stickyHeader = _ref.stickyHeader,
+    stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
@@ -83,9 +85,9 @@ function DataTable(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     openFilter = _useState6[0],
     setOpenFilter = _useState6[1];
-  var handleShowFilter = function handleShowFilter() {
+  function handleShowFilter() {
     return setOpenFilter(!openFilter);
-  };
+  }
   useEffect(function () {
     if (selected.length > 0 && onSelected) {
       onSelected(selected);
@@ -105,8 +107,8 @@ function DataTable(_ref) {
         });
       }
     });
-  }, [hideColumn, cols, rows]);
-  var handleHideColumnClick = function handleHideColumnClick(_event, _id) {
+  }, [hideColumn, cols]);
+  function handleHideColumnClick(_event, _id) {
     var _String2;
     var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
@@ -121,7 +123,7 @@ function DataTable(_ref) {
       newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
     }
     setHideColumn(newSelected);
-  };
+  }
 
   // Children change reset selected
   useEffect(function () {
@@ -192,9 +194,11 @@ function DataTable(_ref) {
     style: {
       display: 'flex',
       alignItems: 'center',
-      gap: '1rem'
+      gap: '1rem',
+      fontSize: 'larger'
     }
   }, children && /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     auto: true,
     scale: 2 / 3,
     px: 0.6,
@@ -224,6 +228,7 @@ function DataTable(_ref) {
     },
     iconRight: /*#__PURE__*/React.createElement(Edit, null),
     auto: true,
+    htmlType: "button",
     scale: 2 / 3,
     px: 0.6
   })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React.createElement(Tooltip, {
@@ -240,6 +245,7 @@ function DataTable(_ref) {
     auto: true,
     scale: 2 / 3,
     px: 0.6,
+    htmlType: "button",
     iconRight: /*#__PURE__*/React.createElement(Delete, null)
   })) : null, onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Refresh",
@@ -249,6 +255,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: function onClick() {
       return onRefresh();
     },
@@ -264,6 +271,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: handleShowFilter,
     auto: true,
     scale: 2 / 3,
@@ -281,6 +289,7 @@ function DataTable(_ref) {
     placement: "bottomEnd",
     child: content
   }, /*#__PURE__*/React.createElement(Button, {
+    htmlType: "button",
     onClick: function onClick() {},
     auto: true,
     scale: 2 / 3,
@@ -318,7 +327,8 @@ function DataTable(_ref) {
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
-    stickyHeader: true,
+    stickyHeader: stickyHeader,
+    readOnly: readOnly,
     cursorPagination: cursorPagination,
     previousCursor: previousCursor,
     nextCursor: nextCursor,
@@ -346,6 +356,7 @@ function DataTable(_ref) {
     }
   }, COLUMNS.map(function (column, index) {
     return /*#__PURE__*/React.createElement(Table.Column, {
+      style: column === null || column === void 0 ? void 0 : column.style,
       options: column === null || column === void 0 ? void 0 : column.options,
       fontSize: column === null || column === void 0 ? void 0 : column.fontSize,
       key: "".concat(column.id, "-").concat(index),

package/esm/table/table-body.js

@@ -104,7 +104,7 @@ var TableBody = function TableBody(_ref) {
           }
         }
       },
-      className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
+      className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
     }, /*#__PURE__*/React.createElement(TableCell, {
       columns: cols,
       row: rw,
@@ -112,9 +112,9 @@ var TableBody = function TableBody(_ref) {
       emptyText: emptyText,
       onCellClick: onCell
     })), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "2019708038",
+      id: "787902152",
       dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
-    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+    }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(2.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
   }
   if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
     return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { TableColumnRender, TableDataItemBase } from './table-types';
 export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     prop: keyof TableDataItem;
@@ -9,6 +9,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     className?: string;
     noWrap?: boolean;
     align?: string;
+    style?: CSSProperties;
     fontSize?: string | number;
     render?: TableColumnRender<TableDataItem>;
 };

package/esm/table/table-column.js

@@ -13,6 +13,7 @@ var TableColumn = function TableColumn(columnProps) {
     options = _ref.options,
     noWrap = _ref.noWrap,
     align = _ref.align,
+    style = _ref.style,
     _ref$fontSize = _ref.fontSize,
     fontSize = _ref$fontSize === void 0 ? 'smaller' : _ref$fontSize,
     _ref$className = _ref.className,
@@ -35,9 +36,10 @@ var TableColumn = function TableColumn(columnProps) {
       align: align,
       fontSize: fontSize,
       className: className,
+      style: style,
       renderHandler: function renderHandler() {}
     });
-  }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
+  }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
   return null;
 };
 TableColumn.displayName = 'TableColumn';

package/esm/table/table-head.js

@@ -129,18 +129,21 @@ var TableHead = function TableHead(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
+    style: {
+      backgroundColor: '#fff'
+    },
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
     var _String2;
     var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
-      style: {
+      style: _extends({
         // textAlign: `${column?.align} !important`,
         // paddingLeft: '0.3rem',
         // paddingRight: '0.3rem',
-        // color: `${column?.color}`,
+        color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#fff'),
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
-      },
+      }, column === null || column === void 0 ? void 0 : column.style),
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
       "data-column": dataName,
       className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")

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

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 export type TableDataItemBase = Record<string, any>;
 export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
 export type TableAbstractColumn<TableDataItem> = {
+    style: CSSProperties | undefined;
     prop: keyof TableDataItem;
     label: React.ReactNode | string;
     text?: React.ReactNode | string;
     filter?: string;
     className: string;
     width?: number;
-    align?: string;
+    align?: any;
     color?: string;
     noWrap?: boolean;
     fontSize?: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -22,7 +22,7 @@
     "build:after": "node scripts/move-built-in.js",
     "build:types": "tsc -p ./scripts & tsc -p ./scripts --outDir ./esm",
     "build": "yarn build:rollup && yarn build:babel && yarn build:types && yarn build:after",
-    "release": "yarn build && yarn publish --access public --non-interactive"
+    "push": "yarn build && yarn publish --access public --non-interactive"
   },
   "license": "MIT",
   "description": "Modern React UI library.",
@@ -104,10 +104,12 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "polished": "^4.3.1",
+    "push": "^0.1.1",
     "react-fast-compare": "^3.2.2",
     "react-is": "^19.0.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-transition-group": "^4.4.5",
+    "release": "^6.3.1",
     "rollup-plugin-local-resolve": "^1.0.7",
     "styled-components": "^6.1.14",
     "tiny-warning": "^1.0.3",