@helpdice/ui 1.5.4 → 1.5.6

package/dist/index.js

@@ -26338,7 +26338,7 @@ var TableHead = function TableHead(props) {
       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) {
+  }, columns.map(function (column, _index) {
     var _String;
     var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
     console.log('Column Hide:', dataName);
@@ -26351,7 +26351,6 @@ var TableHead = function TableHead(props) {
         color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
         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 || "")
     }, /*#__PURE__*/React$1.createElement("div", {
@@ -44233,33 +44232,35 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
+  var _useState = React$1.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    hideColumn = _useState2[0],
+    setHideColumn = _useState2[1];
+  var _useState3 = React$1.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openFilter = _useState4[0],
+    setOpenFilter = _useState4[1];
+  // const [anchorEl, setAnchorEl] = useState(null);
+  var _useState5 = React$1.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selected = _useState6[0],
+    setSelected = _useState6[1];
+
+  // const [table_filters] = useDebounce(filters, 500);
   var COLUMNS = cols.filter(function (col) {
     var _String;
     var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
     return !hideColumn.includes(dataName);
   });
-  // const [anchorEl, setAnchorEl] = useState(null);
-  var _useState = React$1.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
+
   // State for filter values
-  var _useState3 = React$1.useState(COLUMNS.reduce(function (acc, col) {
+  var _useState7 = React$1.useState(COLUMNS.reduce(function (acc, col) {
       acc[col.filter] = '';
       return acc;
     }, {})),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filterValues = _useState4[0],
-    setFilterValues = _useState4[1];
-  // const [table_filters] = useDebounce(filters, 500);
-  var _useState5 = React$1.useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hideColumn = _useState6[0],
-    setHideColumn = _useState6[1];
-  var _useState7 = React$1.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    openFilter = _useState8[0],
-    setOpenFilter = _useState8[1];
+    filterValues = _useState8[0],
+    setFilterValues = _useState8[1];
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
@@ -44339,7 +44340,7 @@ function DataTable(_ref) {
         accessor = col.filter,
         options = col.options;
       var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
-      var unq_accessor = _.uniqueId(filterName);
+      // const unq_accessor = _.uniqueId(filterName);
       // if (Header === 'actions') {
       //   return (
       //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
@@ -44351,10 +44352,10 @@ function DataTable(_ref) {
         style: {
           padding: '3px'
         },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select, {
-        key: filterName,
+        "data-column": Header
+      }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select
+      // key={filterName}
+      , {
         name: filterName,
         value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
@@ -44368,8 +44369,8 @@ function DataTable(_ref) {
         }, option.name);
       }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-date-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "date",
         name: filterName,
         value: filterValues[filterName],
@@ -44378,8 +44379,8 @@ function DataTable(_ref) {
         }
       }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-search-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -44399,14 +44400,15 @@ function DataTable(_ref) {
     });
   };
   var content = function content() {
-    return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, cols.map(function (option, index) {
+    return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, cols.map(function (option, _index) {
       var _String5;
-      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      // const colunqid = _.uniqueId(`${option.name}-${index}`);
       var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
       var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React$1.createElement(Popover.Item, {
-        selected: isSelected,
-        key: colunqid,
+        selected: isSelected
+        // key={colunqid}
+        ,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -44506,18 +44508,18 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React$1.createElement(Refresh$1, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React$1.createElement(Tooltip, {
+  })) : null, onFilters && filter ? /*#__PURE__*/React$1.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
+  }, /*#__PURE__*/React$1.createElement(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
     px: 0.6,
     py: 0.4,
     type: "dark"
-  }, /*#__PURE__*/React$1.createElement(Popover, {
-    hideArrow: true,
-    disableItemsAutoClose: true,
-    placement: "bottomEnd",
-    child: filterContent
   }, /*#__PURE__*/React$1.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -44602,12 +44604,11 @@ function DataTable(_ref) {
       borderCollapse: 'collapse',
       overflow: 'auto'
     }
-  }, COLUMNS.map(function (column, index) {
+  }, COLUMNS.map(function (column) {
     return /*#__PURE__*/React$1.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),
       prop: column.id,
       label: column.name,
       filter: column === null || column === void 0 ? void 0 : column.filter,

package/dist/table/index.js

@@ -1027,7 +1027,7 @@ var TableHead = function TableHead(props) {
       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) {
+  }, columns.map(function (column, _index) {
     var _String;
     var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
     console.log('Column Hide:', dataName);
@@ -1040,7 +1040,6 @@ var TableHead = function TableHead(props) {
         color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
         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 || "")
     }, /*#__PURE__*/React.createElement("div", {
@@ -31521,33 +31520,35 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    hideColumn = _useState2[0],
+    setHideColumn = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openFilter = _useState4[0],
+    setOpenFilter = _useState4[1];
+  // const [anchorEl, setAnchorEl] = useState(null);
+  var _useState5 = React.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selected = _useState6[0],
+    setSelected = _useState6[1];
+
+  // const [table_filters] = useDebounce(filters, 500);
   var COLUMNS = cols.filter(function (col) {
     var _String;
     var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
     return !hideColumn.includes(dataName);
   });
-  // const [anchorEl, setAnchorEl] = useState(null);
-  var _useState = React.useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
+
   // State for filter values
-  var _useState3 = React.useState(COLUMNS.reduce(function (acc, col) {
+  var _useState7 = React.useState(COLUMNS.reduce(function (acc, col) {
       acc[col.filter] = '';
       return acc;
     }, {})),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filterValues = _useState4[0],
-    setFilterValues = _useState4[1];
-  // const [table_filters] = useDebounce(filters, 500);
-  var _useState5 = React.useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hideColumn = _useState6[0],
-    setHideColumn = _useState6[1];
-  var _useState7 = React.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    openFilter = _useState8[0],
-    setOpenFilter = _useState8[1];
+    filterValues = _useState8[0],
+    setFilterValues = _useState8[1];
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
@@ -31627,7 +31628,7 @@ function DataTable(_ref) {
         accessor = col.filter,
         options = col.options;
       var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
-      var unq_accessor = _.uniqueId(filterName);
+      // const unq_accessor = _.uniqueId(filterName);
       // if (Header === 'actions') {
       //   return (
       //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
@@ -31639,10 +31640,10 @@ function DataTable(_ref) {
         style: {
           padding: '3px'
         },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
-        key: filterName,
+        "data-column": Header
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
+      // key={filterName}
+      , {
         name: filterName,
         value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
@@ -31656,8 +31657,8 @@ function DataTable(_ref) {
         }, option.name);
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "date",
         name: filterName,
         value: filterValues[filterName],
@@ -31666,8 +31667,8 @@ function DataTable(_ref) {
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -31687,14 +31688,15 @@ function DataTable(_ref) {
     });
   };
   var content = function content() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, _index) {
       var _String5;
-      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      // const colunqid = _.uniqueId(`${option.name}-${index}`);
       var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
       var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React.createElement(Popover.Item, {
-        selected: isSelected,
-        key: colunqid,
+        selected: isSelected
+        // key={colunqid}
+        ,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -31794,18 +31796,18 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Refresh$1, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
     px: 0.6,
     py: 0.4,
     type: "dark"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    hideArrow: true,
-    disableItemsAutoClose: true,
-    placement: "bottomEnd",
-    child: filterContent
   }, /*#__PURE__*/React.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -31890,12 +31892,11 @@ function DataTable(_ref) {
       borderCollapse: 'collapse',
       overflow: 'auto'
     }
-  }, COLUMNS.map(function (column, index) {
+  }, COLUMNS.map(function (column) {
     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),
       prop: column.id,
       label: column.name,
       filter: column === null || column === void 0 ? void 0 : column.filter,

package/esm/table/data-table.js

@@ -66,33 +66,35 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    hideColumn = _useState2[0],
+    setHideColumn = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openFilter = _useState4[0],
+    setOpenFilter = _useState4[1];
+  // const [anchorEl, setAnchorEl] = useState(null);
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selected = _useState6[0],
+    setSelected = _useState6[1];
+
+  // const [table_filters] = useDebounce(filters, 500);
   var COLUMNS = cols.filter(function (col) {
     var _String;
     var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
     return !hideColumn.includes(dataName);
   });
-  // const [anchorEl, setAnchorEl] = useState(null);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
+
   // State for filter values
-  var _useState3 = useState(COLUMNS.reduce(function (acc, col) {
+  var _useState7 = useState(COLUMNS.reduce(function (acc, col) {
       acc[col.filter] = '';
       return acc;
     }, {})),
-    _useState4 = _slicedToArray(_useState3, 2),
-    filterValues = _useState4[0],
-    setFilterValues = _useState4[1];
-  // const [table_filters] = useDebounce(filters, 500);
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hideColumn = _useState6[0],
-    setHideColumn = _useState6[1];
-  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    openFilter = _useState8[0],
-    setOpenFilter = _useState8[1];
+    filterValues = _useState8[0],
+    setFilterValues = _useState8[1];
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
@@ -172,7 +174,7 @@ function DataTable(_ref) {
         accessor = col.filter,
         options = col.options;
       var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
-      var unq_accessor = _.uniqueId(filterName);
+      // const unq_accessor = _.uniqueId(filterName);
       // if (Header === 'actions') {
       //   return (
       //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
@@ -184,10 +186,10 @@ function DataTable(_ref) {
         style: {
           padding: '3px'
         },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
-        key: filterName,
+        "data-column": Header
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
+      // key={filterName}
+      , {
         name: filterName,
         value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
@@ -201,8 +203,8 @@ function DataTable(_ref) {
         }, option.name);
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "date",
         name: filterName,
         value: filterValues[filterName],
@@ -211,8 +213,8 @@ function DataTable(_ref) {
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -232,14 +234,15 @@ function DataTable(_ref) {
     });
   };
   var content = function content() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, _index) {
       var _String5;
-      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      // const colunqid = _.uniqueId(`${option.name}-${index}`);
       var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
       var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React.createElement(Popover.Item, {
-        selected: isSelected,
-        key: colunqid,
+        selected: isSelected
+        // key={colunqid}
+        ,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -339,18 +342,18 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Refresh, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
     px: 0.6,
     py: 0.4,
     type: "dark"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    hideArrow: true,
-    disableItemsAutoClose: true,
-    placement: "bottomEnd",
-    child: filterContent
   }, /*#__PURE__*/React.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -435,12 +438,11 @@ function DataTable(_ref) {
       borderCollapse: 'collapse',
       overflow: 'auto'
     }
-  }, COLUMNS.map(function (column, index) {
+  }, COLUMNS.map(function (column) {
     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),
       prop: column.id,
       label: column.name,
       filter: column === null || column === void 0 ? void 0 : column.filter,

package/esm/table/table-head.js

@@ -40,7 +40,7 @@ var TableHead = function TableHead(props) {
       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) {
+  }, columns.map(function (column, _index) {
     var _String;
     var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
     console.log('Column Hide:', dataName);
@@ -53,7 +53,6 @@ var TableHead = function TableHead(props) {
         color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
         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 || "")
     }, /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",