@helpdice/ui 1.1.5 → 1.1.7

package/dist/index.js

@@ -24878,167 +24878,6 @@ var SpinnerComponent = function SpinnerComponent(_ref) {
 SpinnerComponent.displayName = 'Spinner';
 var Spinner = withScale(SpinnerComponent);
 
-var makeColgroup = function makeColgroup(width, columns) {
-  var unsetWidthCount = columns.filter(function (c) {
-    return !c.width;
-  }).length;
-  var customWidthTotal = columns.reduce(function (pre, current) {
-    return current.width ? pre + current.width : pre;
-  }, 0);
-  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
-  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
-  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement("col", {
-      key: "colgroup-".concat(index),
-      width: column.width || averageWidth
-    });
-  }));
-};
-var TableHead = function TableHead(props) {
-  var theme = useTheme();
-  var _React$useState = React.useState({}),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    filters = _React$useState2[0],
-    setFilters = _React$useState2[1];
-  var _ref = props,
-    columns = _ref.columns,
-    width = _ref.width,
-    onFilters = _ref.onFilters;
-  var isScalableWidth = React.useMemo(function () {
-    return columns.find(function (item) {
-      return !!item.width;
-    });
-  }, [columns]);
-  var colgroup = React.useMemo(function () {
-    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
-    return makeColgroup(width, columns);
-  }, [isScalableWidth, width]);
-  var handleFilterChange = function handleFilterChange(e) {
-    var _e$target = e.target,
-      name = _e$target.name,
-      value = _e$target.value;
-    setFilters(function (prevFilters) {
-      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
-      // Call onFiltersChange to propagate filter changes to the parent
-      if (onFilters) {
-        onFilters(updatedFilters);
-      }
-      return updatedFilters;
-    });
-  };
-  var generateFilterInputs = function generateFilterInputs() {
-    return columns.map(function (col) {
-      var _String;
-      var Header = col.label,
-        accessor = col.filter;
-      var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
-      if (accessor === 'fixed') {
-        // Dropdown filter for categorical data (category, status)
-        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
-          key: accessor,
-          name: accessor,
-          value: filters[accessor],
-          onChange: handleFilterChange
-        }, /*#__PURE__*/React.createElement("option", {
-          value: ""
-        }, "All ", Header)));
-      }
-      if (accessor === 'date') {
-        // Date filter
-        return /*#__PURE__*/React.createElement("th", {
-          key: accessor
-        }, /*#__PURE__*/React.createElement("label", null, Header, " (From):"), /*#__PURE__*/React.createElement("input", {
-          type: "date",
-          name: "startDate",
-          value: filters.startDate,
-          onChange: handleFilterChange
-        }), /*#__PURE__*/React.createElement("label", null, "To:"), /*#__PURE__*/React.createElement("input", {
-          type: "date",
-          name: "endDate",
-          value: filters.endDate,
-          onChange: handleFilterChange
-        }));
-      }
-
-      // Text search filter for other fields (like name)
-      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
-        id: "filter-search-".concat(filterName),
-        htmlType: "text"
-        // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        ,
-        name: filterName,
-        style: {
-          height: 30,
-          minWidth: 160
-        },
-        value: filters[filterName],
-        onChange: handleFilterChange,
-        placeholder: "Search...",
-        fullWidth: true
-      }));
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    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]]])
-  }, /*#__PURE__*/React.createElement("tr", {
-    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]]])
-  }, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement("th", {
-      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
-      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 || "")
-    }, /*#__PURE__*/React.createElement("div", {
-      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"
-    }, column.label));
-  })), /*#__PURE__*/React.createElement("tr", {
-    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]]])
-  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "134865897",
-    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]
-  }, "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;}")));
-};
-TableHead.displayName = 'TableHead';
-
-var TableCell = function TableCell(_ref) {
-  var columns = _ref.columns,
-    row = _ref.row,
-    rowIndex = _ref.rowIndex,
-    emptyText = _ref.emptyText,
-    onCellClick = _ref.onCellClick;
-  /* eslint-disable react/jsx-no-useless-fragment */
-  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
-    var currentRowValue = row[column.prop];
-    var cellValue = currentRowValue || emptyText;
-    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
-    return /*#__PURE__*/React.createElement("td", {
-      style: _objectSpread2({
-        textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
-        p: 0,
-        color: "".concat(column === null || column === undefined ? undefined : column.color),
-        whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
-      }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
-      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
-      onClick: function onClick() {
-        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
-      },
-      className: column.className
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "cell"
-    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
-  }));
-  /* eslint-enable */
-};
-
-/* "use client" */
-
-var defaultContext$2 = {
-  columns: [],
-  updateColumn: function updateColumn() {}
-};
-var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
-var useTableContext = function useTableContext() {
-  return React.useContext(TableContext);
-};
-
 var lodash$1 = {exports: {}};
 
 /**
@@ -42251,6 +42090,175 @@ function requireLodash () {
 var lodashExports = requireLodash();
 var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
+var makeColgroup = function makeColgroup(width, columns) {
+  var unsetWidthCount = columns.filter(function (c) {
+    return !c.width;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
+  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("col", {
+      key: "colgroup-".concat(index),
+      width: column.width || averageWidth
+    });
+  }));
+};
+var TableHead = function TableHead(props) {
+  var theme = useTheme();
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filters = _React$useState2[0],
+    setFilters = _React$useState2[1];
+  var _ref = props,
+    columns = _ref.columns,
+    width = _ref.width,
+    onFilters = _ref.onFilters;
+  var isScalableWidth = React.useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = React.useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  var handleFilterChange = function handleFilterChange(e) {
+    var _e$target = e.target,
+      name = _e$target.name,
+      value = _e$target.value;
+    setFilters(function (prevFilters) {
+      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
+      // Call onFiltersChange to propagate filter changes to the parent
+      if (onFilters) {
+        onFilters(updatedFilters);
+      }
+      return updatedFilters;
+    });
+  };
+  var generateFilterInputs = function generateFilterInputs() {
+    return columns.map(function (col) {
+      var _String;
+      var Header = col.label,
+        accessor = col.filter,
+        options = col.options;
+      var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
+      var unq_accessor = _.uniqueId(filterName);
+      if (accessor === 'fixed') {
+        // Dropdown filter for categorical data (category, status)
+        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
+          key: unq_accessor,
+          name: filterName,
+          value: filters[filterName],
+          onChange: handleFilterChange
+        }, /*#__PURE__*/React.createElement("option", {
+          value: ""
+        }, "All ", Header), options ? options.map(function (option) {
+          return /*#__PURE__*/React.createElement("option", {
+            value: option.value
+          }, option.name);
+        }) : null));
+      }
+      if (accessor === 'date') {
+        // Date filter
+        return /*#__PURE__*/React.createElement("th", {
+          key: unq_accessor
+        }, /*#__PURE__*/React.createElement("input", {
+          type: "date",
+          name: filterName,
+          value: filters[filterName],
+          onChange: handleFilterChange
+        }));
+      }
+
+      // Text search filter for other fields (like name)
+      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
+        id: "filter-search-".concat(filterName),
+        htmlType: "text"
+        // ref={filterRefs.current[filterName]} // Dynamically set ref}
+        ,
+        name: filterName,
+        style: {
+          height: 30,
+          minWidth: 160
+        },
+        value: filters[filterName],
+        onChange: handleFilterChange,
+        placeholder: "Search...",
+        fullWidth: true
+      }));
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
+    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]]])
+  }, /*#__PURE__*/React.createElement("tr", {
+    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]]])
+  }, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
+      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 || "")
+    }, /*#__PURE__*/React.createElement("div", {
+      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"
+    }, column.label, /*#__PURE__*/React.createElement("br", {
+      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]]])
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        textAlign: 'center'
+      },
+      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.text)));
+  })), /*#__PURE__*/React.createElement("tr", {
+    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]]])
+  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "134865897",
+    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]
+  }, "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;}")));
+};
+TableHead.displayName = 'TableHead';
+
+var TableCell = function TableCell(_ref) {
+  var columns = _ref.columns,
+    row = _ref.row,
+    rowIndex = _ref.rowIndex,
+    emptyText = _ref.emptyText,
+    onCellClick = _ref.onCellClick;
+  /* eslint-disable react/jsx-no-useless-fragment */
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var currentRowValue = row[column.prop];
+    var cellValue = currentRowValue || emptyText;
+    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    return /*#__PURE__*/React.createElement("td", {
+      style: _objectSpread2({
+        textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
+        p: 0,
+        color: "".concat(column === null || column === undefined ? undefined : column.color),
+        whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
+      }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
+      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
+      onClick: function onClick() {
+        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
+      },
+      className: column.className
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cell"
+    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
+  }));
+  /* eslint-enable */
+};
+
+/* "use client" */
+
+var defaultContext$2 = {
+  columns: [],
+  updateColumn: function updateColumn() {}
+};
+var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
+var useTableContext = function useTableContext() {
+  return React.useContext(TableContext);
+};
+
 var TableBody = function TableBody(_ref) {
   var data = _ref.data,
     hover = _ref.hover,
@@ -42306,6 +42314,7 @@ var TableBody = function TableBody(_ref) {
         return col.id;
       }).includes(ky);
     });
+    console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
     return /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,

package/dist/table/index.js

@@ -1645,167 +1645,6 @@ var InputPassword = withScale(InputPasswordComponent);
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
 
-var makeColgroup = function makeColgroup(width, columns) {
-  var unsetWidthCount = columns.filter(function (c) {
-    return !c.width;
-  }).length;
-  var customWidthTotal = columns.reduce(function (pre, current) {
-    return current.width ? pre + current.width : pre;
-  }, 0);
-  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
-  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
-  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement("col", {
-      key: "colgroup-".concat(index),
-      width: column.width || averageWidth
-    });
-  }));
-};
-var TableHead = function TableHead(props) {
-  var theme = useTheme();
-  var _React$useState = React.useState({}),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    filters = _React$useState2[0],
-    setFilters = _React$useState2[1];
-  var _ref = props,
-    columns = _ref.columns,
-    width = _ref.width,
-    onFilters = _ref.onFilters;
-  var isScalableWidth = React.useMemo(function () {
-    return columns.find(function (item) {
-      return !!item.width;
-    });
-  }, [columns]);
-  var colgroup = React.useMemo(function () {
-    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
-    return makeColgroup(width, columns);
-  }, [isScalableWidth, width]);
-  var handleFilterChange = function handleFilterChange(e) {
-    var _e$target = e.target,
-      name = _e$target.name,
-      value = _e$target.value;
-    setFilters(function (prevFilters) {
-      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty({}, name, value));
-      // Call onFiltersChange to propagate filter changes to the parent
-      if (onFilters) {
-        onFilters(updatedFilters);
-      }
-      return updatedFilters;
-    });
-  };
-  var generateFilterInputs = function generateFilterInputs() {
-    return columns.map(function (col) {
-      var _String;
-      var Header = col.label,
-        accessor = col.filter;
-      var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
-      if (accessor === 'fixed') {
-        // Dropdown filter for categorical data (category, status)
-        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
-          key: accessor,
-          name: accessor,
-          value: filters[accessor],
-          onChange: handleFilterChange
-        }, /*#__PURE__*/React.createElement("option", {
-          value: ""
-        }, "All ", Header)));
-      }
-      if (accessor === 'date') {
-        // Date filter
-        return /*#__PURE__*/React.createElement("th", {
-          key: accessor
-        }, /*#__PURE__*/React.createElement("label", null, Header, " (From):"), /*#__PURE__*/React.createElement("input", {
-          type: "date",
-          name: "startDate",
-          value: filters.startDate,
-          onChange: handleFilterChange
-        }), /*#__PURE__*/React.createElement("label", null, "To:"), /*#__PURE__*/React.createElement("input", {
-          type: "date",
-          name: "endDate",
-          value: filters.endDate,
-          onChange: handleFilterChange
-        }));
-      }
-
-      // Text search filter for other fields (like name)
-      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
-        id: "filter-search-".concat(filterName),
-        htmlType: "text"
-        // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        ,
-        name: filterName,
-        style: {
-          height: 30,
-          minWidth: 160
-        },
-        value: filters[filterName],
-        onChange: handleFilterChange,
-        placeholder: "Search...",
-        fullWidth: true
-      }));
-    });
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    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]]])
-  }, /*#__PURE__*/React.createElement("tr", {
-    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]]])
-  }, columns.map(function (column, index) {
-    return /*#__PURE__*/React.createElement("th", {
-      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
-      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 || "")
-    }, /*#__PURE__*/React.createElement("div", {
-      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"
-    }, column.label));
-  })), /*#__PURE__*/React.createElement("tr", {
-    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]]])
-  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "134865897",
-    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]
-  }, "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;}")));
-};
-TableHead.displayName = 'TableHead';
-
-var TableCell = function TableCell(_ref) {
-  var columns = _ref.columns,
-    row = _ref.row,
-    rowIndex = _ref.rowIndex,
-    emptyText = _ref.emptyText,
-    onCellClick = _ref.onCellClick;
-  /* eslint-disable react/jsx-no-useless-fragment */
-  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
-    var currentRowValue = row[column.prop];
-    var cellValue = currentRowValue || emptyText;
-    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
-    return /*#__PURE__*/React.createElement("td", {
-      style: _objectSpread2({
-        textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
-        p: 0,
-        color: "".concat(column === null || column === undefined ? undefined : column.color),
-        whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
-      }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
-      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
-      onClick: function onClick() {
-        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
-      },
-      className: column.className
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "cell"
-    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
-  }));
-  /* eslint-enable */
-};
-
-/* "use client" */
-
-var defaultContext = {
-  columns: [],
-  updateColumn: function updateColumn() {}
-};
-var TableContext = /*#__PURE__*/React.createContext(defaultContext);
-var useTableContext = function useTableContext() {
-  return React.useContext(TableContext);
-};
-
 var lodash$1 = {exports: {}};
 
 /**
@@ -19018,6 +18857,175 @@ function requireLodash () {
 var lodashExports = requireLodash();
 var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
 
+var makeColgroup = function makeColgroup(width, columns) {
+  var unsetWidthCount = columns.filter(function (c) {
+    return !c.width;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
+  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("col", {
+      key: "colgroup-".concat(index),
+      width: column.width || averageWidth
+    });
+  }));
+};
+var TableHead = function TableHead(props) {
+  var theme = useTheme();
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filters = _React$useState2[0],
+    setFilters = _React$useState2[1];
+  var _ref = props,
+    columns = _ref.columns,
+    width = _ref.width,
+    onFilters = _ref.onFilters;
+  var isScalableWidth = React.useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = React.useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  var handleFilterChange = function handleFilterChange(e) {
+    var _e$target = e.target,
+      name = _e$target.name,
+      value = _e$target.value;
+    setFilters(function (prevFilters) {
+      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty({}, name, value));
+      // Call onFiltersChange to propagate filter changes to the parent
+      if (onFilters) {
+        onFilters(updatedFilters);
+      }
+      return updatedFilters;
+    });
+  };
+  var generateFilterInputs = function generateFilterInputs() {
+    return columns.map(function (col) {
+      var _String;
+      var Header = col.label,
+        accessor = col.filter,
+        options = col.options;
+      var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
+      var unq_accessor = _.uniqueId(filterName);
+      if (accessor === 'fixed') {
+        // Dropdown filter for categorical data (category, status)
+        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
+          key: unq_accessor,
+          name: filterName,
+          value: filters[filterName],
+          onChange: handleFilterChange
+        }, /*#__PURE__*/React.createElement("option", {
+          value: ""
+        }, "All ", Header), options ? options.map(function (option) {
+          return /*#__PURE__*/React.createElement("option", {
+            value: option.value
+          }, option.name);
+        }) : null));
+      }
+      if (accessor === 'date') {
+        // Date filter
+        return /*#__PURE__*/React.createElement("th", {
+          key: unq_accessor
+        }, /*#__PURE__*/React.createElement("input", {
+          type: "date",
+          name: filterName,
+          value: filters[filterName],
+          onChange: handleFilterChange
+        }));
+      }
+
+      // Text search filter for other fields (like name)
+      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
+        id: "filter-search-".concat(filterName),
+        htmlType: "text"
+        // ref={filterRefs.current[filterName]} // Dynamically set ref}
+        ,
+        name: filterName,
+        style: {
+          height: 30,
+          minWidth: 160
+        },
+        value: filters[filterName],
+        onChange: handleFilterChange,
+        placeholder: "Search...",
+        fullWidth: true
+      }));
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
+    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]]])
+  }, /*#__PURE__*/React.createElement("tr", {
+    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]]])
+  }, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
+      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 || "")
+    }, /*#__PURE__*/React.createElement("div", {
+      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"
+    }, column.label, /*#__PURE__*/React.createElement("br", {
+      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]]])
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        textAlign: 'center'
+      },
+      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.text)));
+  })), /*#__PURE__*/React.createElement("tr", {
+    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]]])
+  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "134865897",
+    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]
+  }, "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;}")));
+};
+TableHead.displayName = 'TableHead';
+
+var TableCell = function TableCell(_ref) {
+  var columns = _ref.columns,
+    row = _ref.row,
+    rowIndex = _ref.rowIndex,
+    emptyText = _ref.emptyText,
+    onCellClick = _ref.onCellClick;
+  /* eslint-disable react/jsx-no-useless-fragment */
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var currentRowValue = row[column.prop];
+    var cellValue = currentRowValue || emptyText;
+    var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
+    return /*#__PURE__*/React.createElement("td", {
+      style: _objectSpread2({
+        textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
+        p: 0,
+        color: "".concat(column === null || column === undefined ? undefined : column.color),
+        whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
+      }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
+      key: "row-td-".concat(index, "-").concat(column.prop.toString()),
+      onClick: function onClick() {
+        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
+      },
+      className: column.className
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cell"
+    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
+  }));
+  /* eslint-enable */
+};
+
+/* "use client" */
+
+var defaultContext = {
+  columns: [],
+  updateColumn: function updateColumn() {}
+};
+var TableContext = /*#__PURE__*/React.createContext(defaultContext);
+var useTableContext = function useTableContext() {
+  return React.useContext(TableContext);
+};
+
 var TableBody = function TableBody(_ref) {
   var data = _ref.data,
     hover = _ref.hover,
@@ -19073,6 +19081,7 @@ var TableBody = function TableBody(_ref) {
         return col.id;
       }).includes(ky);
     });
+    console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
     return /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,

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

@@ -4,12 +4,14 @@ export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[key
 export type TableAbstractColumn<TableDataItem> = {
     prop: keyof TableDataItem;
     label: React.ReactNode | string;
+    text?: React.ReactNode | string;
     filter?: string;
     className: string;
     width?: number;
     align?: string;
     color?: string;
     noWrap?: boolean;
+    options?: any[];
     renderHandler: TableColumnRender<TableDataItemBase>;
 };
 export type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;

package/esm/table/table-body.js

@@ -80,6 +80,7 @@ var TableBody = function TableBody(_ref) {
         return col.id;
       }).includes(ky);
     });
+    console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
     return /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,

package/esm/table/table-head.js

@@ -5,6 +5,7 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import Input from '../input';
+import _ from 'lodash';
 var makeColgroup = function makeColgroup(width, columns) {
   var unsetWidthCount = columns.filter(function (c) {
     return !c.width;
@@ -57,32 +58,33 @@ var TableHead = function TableHead(props) {
     return columns.map(function (col) {
       var _String;
       var Header = col.label,
-        accessor = col.filter;
+        accessor = col.filter,
+        options = col.options;
       var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      var unq_accessor = _.uniqueId(filterName);
       if (accessor === 'fixed') {
         // Dropdown filter for categorical data (category, status)
         return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
-          key: accessor,
-          name: accessor,
-          value: filters[accessor],
+          key: unq_accessor,
+          name: filterName,
+          value: filters[filterName],
           onChange: handleFilterChange
         }, /*#__PURE__*/React.createElement("option", {
           value: ""
-        }, "All ", Header)));
+        }, "All ", Header), options ? options.map(function (option) {
+          return /*#__PURE__*/React.createElement("option", {
+            value: option.value
+          }, option.name);
+        }) : null));
       }
       if (accessor === 'date') {
         // Date filter
         return /*#__PURE__*/React.createElement("th", {
-          key: accessor
-        }, /*#__PURE__*/React.createElement("label", null, Header, " (From):"), /*#__PURE__*/React.createElement("input", {
+          key: unq_accessor
+        }, /*#__PURE__*/React.createElement("input", {
           type: "date",
-          name: "startDate",
-          value: filters.startDate,
-          onChange: handleFilterChange
-        }), /*#__PURE__*/React.createElement("label", null, "To:"), /*#__PURE__*/React.createElement("input", {
-          type: "date",
-          name: "endDate",
-          value: filters.endDate,
+          name: filterName,
+          value: filters[filterName],
           onChange: handleFilterChange
         }));
       }
@@ -115,7 +117,14 @@ var TableHead = function TableHead(props) {
       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 || "")
     }, /*#__PURE__*/React.createElement("div", {
       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"
-    }, column.label));
+    }, column.label, /*#__PURE__*/React.createElement("br", {
+      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]]])
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        textAlign: 'center'
+      },
+      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.text)));
   })), /*#__PURE__*/React.createElement("tr", {
     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]]])
   }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {

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

@@ -4,12 +4,14 @@ export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[key
 export type TableAbstractColumn<TableDataItem> = {
     prop: keyof TableDataItem;
     label: React.ReactNode | string;
+    text?: React.ReactNode | string;
     filter?: string;
     className: string;
     width?: number;
     align?: string;
     color?: string;
     noWrap?: boolean;
+    options?: any[];
     renderHandler: TableColumnRender<TableDataItemBase>;
 };
 export type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;

package/package.json

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