@stokr/components-library 2.3.65-beta.8 → 2.3.65-beta.9

package/dist/components/AdminDashboard/Table/ReactTable.js

@@ -18,6 +18,31 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// Interactive elements that should NOT trigger row click
+const INTERACTIVE_ELEMENTS = ['button', 'a', 'input', 'select', 'textarea', 'label'];
+
+// Check if an element or its parents are interactive
+const isInteractiveElement = element => {
+  let current = element;
+  while (current && current.tagName !== 'TR') {
+    var _current$tagName, _current$getAttribute, _current, _current$dataset;
+    const tagName = (_current$tagName = current.tagName) === null || _current$tagName === void 0 ? void 0 : _current$tagName.toLowerCase();
+    if (INTERACTIVE_ELEMENTS.includes(tagName)) {
+      return true;
+    }
+    // Check for role="button" or other interactive roles
+    const role = (_current$getAttribute = (_current = current).getAttribute) === null || _current$getAttribute === void 0 ? void 0 : _current$getAttribute.call(_current, 'role');
+    if (role === 'button' || role === 'link') {
+      return true;
+    }
+    // Check for data-clickable attribute (escape hatch for custom interactive elements)
+    if (((_current$dataset = current.dataset) === null || _current$dataset === void 0 ? void 0 : _current$dataset.clickable) === 'true') {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+};
 function ReactTable(props) {
   const {
     columns,
@@ -37,6 +62,19 @@ function ReactTable(props) {
     getRowDataCy,
     // Function to generate data-cy attribute: (rowData, rowIndex) => string
 
+    // Row click handler: (rowData, rowIndex, event) => void
+    // Will NOT trigger if clicking on buttons, links, inputs, etc.
+    onRowClick,
+    // Custom expanded content renderer: (row, toggleExpanded) => ReactNode
+    // If provided, this will be used instead of the sub-table
+    renderExpandedContent,
+    // Header click handler: (column, event) => void
+    // Called when a header cell is clicked (useful for sorting/filtering)
+    // Won't trigger if clicking on interactive elements inside header
+    onHeaderClick,
+    // Render custom header content: (column, defaultContent) => ReactNode
+    // Allows wrapping/replacing header content (e.g., add sort icons, dropdowns)
+    renderHeaderContent,
     //instead of passing the subData, we pass a function that will calculate the subData
     //subData must be part of the data array (an array or whatever)
     //calculateSubData is a function that receives the row and returns the subData
@@ -75,6 +113,17 @@ function ReactTable(props) {
     setInputPageSize(pageSize);
   }, [pageSize]);
 
+  // Handle row click with interactive element detection
+  const handleRowClick = (0, _react.useCallback)((row, rowIndex, event) => {
+    if (!onRowClick) return;
+
+    // Don't trigger if clicking on interactive elements
+    if (isInteractiveElement(event.target)) {
+      return;
+    }
+    onRowClick(row.original, rowIndex, event);
+  }, [onRowClick]);
+
   // Function to render cell content with hover support
   const renderCellContent = (cell, rowIndex, rowData) => {
     if (customRowHoverContent && hoveredRowIndex === rowIndex) {
@@ -85,21 +134,65 @@ function ReactTable(props) {
     }
     return cell.render('Cell');
   };
+
+  // Determine if row should have expand functionality
+  const shouldEnableExpand = withSubTable || renderExpandedContent;
+
+  // Handle header click with interactive element detection
+  const handleHeaderClick = (0, _react.useCallback)((column, event) => {
+    // Check for column-level click handler first
+    if (column.onHeaderClick) {
+      // Don't trigger if clicking on interactive elements
+      if (!isInteractiveElement(event.target)) {
+        column.onHeaderClick(column, event);
+      }
+      return;
+    }
+
+    // Fall back to global onHeaderClick
+    if (!onHeaderClick) return;
+
+    // Don't trigger if clicking on interactive elements inside header
+    if (isInteractiveElement(event.target)) {
+      return;
+    }
+    onHeaderClick(column, event);
+  }, [onHeaderClick]);
+
+  // Render header content with optional custom rendering
+  const renderHeader = column => {
+    const defaultContent = column.render('Header');
+
+    // If renderHeaderContent is provided, use it to wrap/modify the header
+    if (renderHeaderContent) {
+      return renderHeaderContent(column, defaultContent);
+    }
+    return defaultContent;
+  };
+
+  // Check if header should be clickable
+  const isHeaderClickable = column => {
+    return column.onHeaderClick || onHeaderClick;
+  };
   return /*#__PURE__*/_react.default.createElement(_Table.Styles, null, /*#__PURE__*/_react.default.createElement(_Table.TableWrap, {
     style: tableWrapStyles
   }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable, _extends({}, getTableProps(), {
     customTableStyles: customTableStyles
   }), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(headerGroup => /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(column => {
     const cellStyles = customThStyles ? customThStyles(column) : {};
+    const clickable = isHeaderClickable(column);
     return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Th, _extends({}, column.getHeaderProps({
       className: column.collapse ? 'collapse' : '',
-      style: _objectSpread({}, cellStyles)
+      style: _objectSpread(_objectSpread({}, cellStyles), clickable ? {
+        cursor: 'pointer'
+      } : {})
     }), {
       blue: blue,
       width: column.width,
       minWidth: column.minWidth,
-      maxWidth: column.maxWidth
-    }), column.render('Header'));
+      maxWidth: column.maxWidth,
+      onClick: clickable ? e => handleHeaderClick(column, e) : undefined
+    }), renderHeader(column));
   })))), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map((row, i) => {
     prepareRow(row);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
@@ -112,10 +205,17 @@ function ReactTable(props) {
       rowIndex: i,
       rowData: row.original,
       onMouseEnter: () => setHoveredRowIndex(i),
-      onMouseLeave: () => setHoveredRowIndex(null)
+      onMouseLeave: () => setHoveredRowIndex(null),
+      onClick: e => handleRowClick(row, i, e),
+      style: onRowClick ? {
+        cursor: 'pointer'
+      } : undefined
     }), row.cells.map(cell => {
       const cellStyles = customTdStyles ? customTdStyles(i, row.original, cell.column) : {};
-      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), {
+
+      // Only apply expand toggle props if expansion is enabled
+      const expandProps = shouldEnableExpand ? cell.row.getToggleRowExpandedProps() : {};
+      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, expandProps, {
         title: ""
       }, cell.getCellProps({
         className: cell.column.collapse ? 'collapse' : '',
@@ -126,7 +226,12 @@ function ReactTable(props) {
         minWidth: cell.column.minWidth,
         maxWidth: cell.column.maxWidth
       }), renderCellContent(cell, i, row.original));
-    })), withSubTable && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
+    })), renderExpandedContent && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
+      key: "".concat(row.id, "-expanded")
+    }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
+      colSpan: visibleColumns.length,
+      subTable: true
+    }, renderExpandedContent(row, row.toggleRowExpanded))), withSubTable && !renderExpandedContent && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
       key: "".concat(row.id, "-").concat(i)
     }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
       colSpan: visibleColumns.length,
@@ -160,7 +265,18 @@ ReactTable.propTypes = {
   customRowHoverContent: _propTypes.default.func,
   customRowStyles: _propTypes.default.func,
   customTableStyles: _propTypes.default.func,
-  getRowDataCy: _propTypes.default.func // (rowData, rowIndex) => string
+  tableWrapStyles: _propTypes.default.object,
+  customTdStyles: _propTypes.default.func,
+  customThStyles: _propTypes.default.func,
+  getRowDataCy: _propTypes.default.func,
+  // (rowData, rowIndex) => string
+  onRowClick: _propTypes.default.func,
+  // (rowData, rowIndex, event) => void
+  renderExpandedContent: _propTypes.default.func,
+  // (row, toggleExpanded) => ReactNode
+  onHeaderClick: _propTypes.default.func,
+  // (column, event) => void
+  renderHeaderContent: _propTypes.default.func // (column, defaultContent) => ReactNode
 };
 ReactTable.defaultProps = {
   blue: false,

package/dist/components/AdminDashboard/Table/ReactTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.CustomStyledTable = exports.BoxStyleTable = exports.BlueWrapper = exports.BlueTable = void 0;
+exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithRowClick = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.SortableHeaders = exports.RowClickWithExpandedContent = exports.RowClickWithButtons = exports.PerColumnHeaderClick = exports.HeaderClick = exports.FilterableHeaders = exports.ExpandedWithRichContent = exports.DefaultWrapper = exports.Default = exports.CustomStyledTable = exports.CustomExpandedContent = exports.BoxStyleTable = exports.BlueWrapper = exports.BlueTable = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ReactTable = require("./ReactTable");
 var _ReactTableWrapper = require("./ReactTableWrapper");
@@ -403,4 +403,511 @@ CustomStyledTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
     textTransform: 'uppercase',
     letterSpacing: '0.5px'
   })
-});
+});
+
+// ============================================
+// NEW FEATURE STORIES: onRowClick & renderExpandedContent
+// ============================================
+
+// Row Click Handler - Basic
+const WithRowClick = exports.WithRowClick = Template.bind({});
+WithRowClick.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  onRowClick: (rowData, rowIndex, event) => {
+    alert("Clicked row ".concat(rowIndex + 1, ": ").concat(rowData.name, " (").concat(rowData.status, ")"));
+  }
+});
+WithRowClick.parameters = {
+  docs: {
+    description: {
+      story: 'Click anywhere on a row to trigger an action. Buttons and links inside cells will NOT trigger the row click.'
+    }
+  }
+};
+
+// Row Click with Buttons Inside - Demonstrates click isolation
+const columnsWithActions = [...columns.slice(0, 3), {
+  Header: 'Actions',
+  accessor: 'actions',
+  width: '40%',
+  Cell: _ref => {
+    let {
+      row
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '6px 12px',
+        backgroundColor: '#0050ca',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Edit button clicked for ".concat(row.original.name))
+    }, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '6px 12px',
+        backgroundColor: '#dc3545',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Delete button clicked for ".concat(row.original.name))
+    }, "Delete"));
+  }
+}];
+const RowClickWithButtons = exports.RowClickWithButtons = Template.bind({});
+RowClickWithButtons.args = {
+  columns: columnsWithActions,
+  data: data,
+  noPagination: false,
+  onRowClick: (rowData, rowIndex) => {
+    alert("Row clicked: ".concat(rowData.name));
+  }
+};
+RowClickWithButtons.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates that clicking buttons inside cells does NOT trigger onRowClick. Only clicking on non-interactive areas triggers the row click.'
+    }
+  }
+};
+
+// Custom Expanded Content - Simple
+const CustomExpandedContent = exports.CustomExpandedContent = Template.bind({});
+CustomExpandedContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  renderExpandedContent: (row, toggleExpanded) => {
+    var _row$original$subData;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '20px',
+        backgroundColor: '#f8f9fa',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 12px 0'
+      }
+    }, "Details for ", row.original.name), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 8px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "ID:"), " ", row.original.id), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 8px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "Status:"), " ", row.original.status), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 16px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "Sub-items:"), " ", ((_row$original$subData = row.original.subData) === null || _row$original$subData === void 0 ? void 0 : _row$original$subData.length) || 0), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#6c757d',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => toggleExpanded()
+    }, "Collapse"));
+  }
+});
+CustomExpandedContent.parameters = {
+  docs: {
+    description: {
+      story: 'Click on a row to expand and show custom content instead of a sub-table. The toggleExpanded function allows you to collapse the row programmatically.'
+    }
+  }
+};
+
+// Custom Expanded Content - Rich Component
+const ExpandedWithRichContent = exports.ExpandedWithRichContent = Template.bind({});
+ExpandedWithRichContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  renderExpandedContent: row => {
+    var _row$original$subData2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '24px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '24px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px',
+        backgroundColor: '#fff',
+        border: '1px solid #e1e1e1',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 16px 0',
+        color: '#0050ca'
+      }
+    }, "User Information"), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "Name:"), " ", row.original.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "ID:"), " #", row.original.id), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "Status:"), ' ', /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        padding: '2px 8px',
+        borderRadius: '12px',
+        backgroundColor: row.original.status === 'Active' ? '#d4edda' : row.original.status === 'Inactive' ? '#f8d7da' : '#fff3cd',
+        color: row.original.status === 'Active' ? '#155724' : row.original.status === 'Inactive' ? '#721c24' : '#856404',
+        fontSize: '12px'
+      }
+    }, row.original.status)))), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px',
+        backgroundColor: '#fff',
+        border: '1px solid #e1e1e1',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 16px 0',
+        color: '#0050ca'
+      }
+    }, "Sub Items"), ((_row$original$subData2 = row.original.subData) === null || _row$original$subData2 === void 0 ? void 0 : _row$original$subData2.length) > 0 ? /*#__PURE__*/_react.default.createElement("ul", {
+      style: {
+        margin: 0,
+        paddingLeft: '20px'
+      }
+    }, row.original.subData.map(item => /*#__PURE__*/_react.default.createElement("li", {
+      key: item.detailId,
+      style: {
+        marginBottom: '8px'
+      }
+    }, item.detailName, " (ID: ", item.detailId, ")"))) : /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: 0,
+        color: '#6c757d',
+        fontStyle: 'italic'
+      }
+    }, "No sub-items"))), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: '16px',
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'flex-end'
+      }
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#0050ca',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Edit ".concat(row.original.name))
+    }, "Edit User"), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: 'transparent',
+        color: '#0050ca',
+        border: '1px solid #0050ca',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("View full profile for ".concat(row.original.name))
+    }, "View Profile")));
+  }
+});
+ExpandedWithRichContent.parameters = {
+  docs: {
+    description: {
+      story: 'A more complex example showing a rich expanded content with multiple panels, styled badges, and action buttons.'
+    }
+  }
+};
+
+// Combined: Row Click + Custom Expanded Content
+const RowClickWithExpandedContent = exports.RowClickWithExpandedContent = Template.bind({});
+RowClickWithExpandedContent.args = {
+  columns: columnsWithActions,
+  data: data,
+  noPagination: false,
+  onRowClick: (rowData, rowIndex) => {
+    console.log('Row clicked (but not triggering anything in this demo)');
+  },
+  renderExpandedContent: (row, toggleExpanded) => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '20px',
+      backgroundColor: '#e3f2fd',
+      borderLeft: '4px solid #0050ca'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '0 0 12px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Expanded details for:"), " ", row.original.name), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: 0,
+      color: '#666'
+    }
+  }, "Click anywhere on the row to expand/collapse. Buttons work independently."))
+};
+RowClickWithExpandedContent.parameters = {
+  docs: {
+    description: {
+      story: 'Combined example: rows are clickable AND expandable. The onRowClick and renderExpandedContent work together. Buttons inside cells remain independent.'
+    }
+  }
+};
+
+// ============================================
+// HEADER CLICK STORIES: onHeaderClick & renderHeaderContent
+// ============================================
+
+// Basic Header Click - shows alert
+const HeaderClick = exports.HeaderClick = Template.bind({});
+HeaderClick.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  onHeaderClick: (column, event) => {
+    alert("Header clicked: ".concat(column.id || column.Header));
+  }
+});
+HeaderClick.parameters = {
+  docs: {
+    description: {
+      story: 'Click on any column header to trigger an action. Useful for implementing custom sorting or filtering.'
+    }
+  }
+};
+
+// Header Click with Sort State (External Control)
+const SortableTableDemo = () => {
+  const [sortConfig, setSortConfig] = _react.default.useState({
+    key: null,
+    direction: 'asc'
+  });
+  const [tableData, setTableData] = _react.default.useState(data);
+  const handleHeaderClick = column => {
+    // Skip non-sortable columns (like actions)
+    if (column.id === 'dropdown' || column.id === 'actions') return;
+    let direction = 'asc';
+    if (sortConfig.key === column.id && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({
+      key: column.id,
+      direction
+    });
+
+    // Sort the data
+    const sorted = [...data].sort((a, b) => {
+      const aVal = a[column.id];
+      const bVal = b[column.id];
+      if (aVal < bVal) return direction === 'asc' ? -1 : 1;
+      if (aVal > bVal) return direction === 'asc' ? 1 : -1;
+      return 0;
+    });
+    setTableData(sorted);
+  };
+
+  // Add sort indicators to headers
+  const renderHeaderContent = (column, defaultContent) => {
+    // Skip non-sortable columns
+    if (column.id === 'dropdown' || column.id === 'actions') {
+      return defaultContent;
+    }
+    const isSorted = sortConfig.key === column.id;
+    const arrow = isSorted ? sortConfig.direction === 'asc' ? ' ↑' : ' ↓' : '';
+    return /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px'
+      }
+    }, defaultContent, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        opacity: isSorted ? 1 : 0.3
+      }
+    }, isSorted ? arrow : ' ↕'));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Current sort:"), ' ', sortConfig.key ? "".concat(sortConfig.key, " (").concat(sortConfig.direction, ")") : 'None'), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, {
+    columns: columns,
+    data: tableData,
+    noPagination: false,
+    onHeaderClick: handleHeaderClick,
+    renderHeaderContent: renderHeaderContent
+  }));
+};
+const SortableHeaders = exports.SortableHeaders = {
+  render: () => /*#__PURE__*/_react.default.createElement(SortableTableDemo, null),
+  parameters: {
+    docs: {
+      description: {
+        story: 'External sorting controlled by parent component. Click headers to sort. Uses onHeaderClick for the action and renderHeaderContent for the sort indicators.'
+      }
+    }
+  }
+};
+
+// Header with Custom Dropdown Filter
+const FilterableTableDemo = () => {
+  const [filters, setFilters] = _react.default.useState({});
+  const [activeDropdown, setActiveDropdown] = _react.default.useState(null);
+  const [tableData, setTableData] = _react.default.useState(data);
+
+  // Get unique values for a column
+  const getUniqueValues = columnId => {
+    return [...new Set(data.map(row => row[columnId]))];
+  };
+  const handleFilter = (columnId, value) => {
+    const newFilters = _objectSpread({}, filters);
+    if (value === 'all') {
+      delete newFilters[columnId];
+    } else {
+      newFilters[columnId] = value;
+    }
+    setFilters(newFilters);
+    setActiveDropdown(null);
+
+    // Apply filters
+    let filtered = [...data];
+    Object.keys(newFilters).forEach(key => {
+      filtered = filtered.filter(row => row[key] === newFilters[key]);
+    });
+    setTableData(filtered);
+  };
+
+  // Custom header with filter dropdown
+  const renderHeaderContent = (column, defaultContent) => {
+    // Only add filter to specific columns
+    if (!['status'].includes(column.id)) {
+      return defaultContent;
+    }
+    const isActive = activeDropdown === column.id;
+    const hasFilter = filters[column.id];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px'
+      },
+      "data-clickable": "true",
+      onClick: e => {
+        e.stopPropagation();
+        setActiveDropdown(isActive ? null : column.id);
+      }
+    }, defaultContent, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        fontSize: '10px',
+        padding: '2px 6px',
+        borderRadius: '4px',
+        backgroundColor: hasFilter ? '#0050ca' : '#e1e1e1',
+        color: hasFilter ? 'white' : '#666'
+      }
+    }, hasFilter ? '✓' : '▼')), isActive && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        marginTop: '4px',
+        backgroundColor: 'white',
+        border: '1px solid #e1e1e1',
+        borderRadius: '4px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        zIndex: 100,
+        minWidth: '120px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        borderBottom: '1px solid #e1e1e1'
+      },
+      onClick: () => handleFilter(column.id, 'all')
+    }, "All"), getUniqueValues(column.id).map(value => /*#__PURE__*/_react.default.createElement("div", {
+      key: value,
+      style: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        backgroundColor: filters[column.id] === value ? '#f0f8ff' : 'transparent'
+      },
+      onClick: () => handleFilter(column.id, value)
+    }, value))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Active filters:"), ' ', Object.keys(filters).length > 0 ? Object.entries(filters).map(_ref2 => {
+    let [k, v] = _ref2;
+    return "".concat(k, ": ").concat(v);
+  }).join(', ') : 'None'), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, {
+    columns: columns,
+    data: tableData,
+    noPagination: false,
+    renderHeaderContent: renderHeaderContent
+  }));
+};
+const FilterableHeaders = exports.FilterableHeaders = {
+  render: () => /*#__PURE__*/_react.default.createElement(FilterableTableDemo, null),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom filter dropdown in the "Status" header. Click the dropdown icon to filter. Uses renderHeaderContent to add the dropdown UI.'
+      }
+    }
+  }
+};
+
+// Per-Column Header Click Handler
+const columnsWithColumnClick = [{
+  Header: 'ID (Click me!)',
+  accessor: 'id',
+  width: '15%',
+  onHeaderClick: column => {
+    alert('ID column has its own click handler!');
+  }
+}, {
+  Header: 'Name',
+  accessor: 'name',
+  width: '30%'
+}, {
+  Header: 'Status',
+  accessor: 'status',
+  width: '20%'
+}, {
+  Header: 'Actions (No click)',
+  accessor: 'dropdown',
+  width: '35%'
+  // No onHeaderClick - won't trigger global onHeaderClick either
+}];
+const PerColumnHeaderClick = exports.PerColumnHeaderClick = Template.bind({});
+PerColumnHeaderClick.args = {
+  columns: columnsWithColumnClick,
+  data: data,
+  noPagination: false,
+  onHeaderClick: column => {
+    alert("Global header click: ".concat(column.id));
+  }
+};
+PerColumnHeaderClick.parameters = {
+  docs: {
+    description: {
+      story: 'Columns can have their own onHeaderClick handlers. The "ID" column has a custom handler. Other columns use the global onHeaderClick. The "Actions" column has neither.'
+    }
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.65-beta.8",
+  "version": "2.3.65-beta.9",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",