@stokr/components-library 2.3.65-beta.10 → 2.3.65-beta.12

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

@@ -1,913 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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");
-var _global = _interopRequireDefault(require("../../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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); }
-var _default = exports.default = {
-  title: 'Components Library/React table',
-  component: _ReactTable.ReactTable,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A flexible and customizable data table component with sorting, pagination, and custom styling options.'
-      }
-    }
-  },
-  argTypes: {
-    data: {
-      control: 'object'
-    },
-    columns: {
-      control: 'object'
-    },
-    noPagination: {
-      control: 'boolean'
-    },
-    blue: {
-      control: 'boolean'
-    },
-    withSubTable: {
-      control: 'boolean'
-    },
-    customTdStyles: {
-      control: 'function'
-    },
-    customThStyles: {
-      control: 'function'
-    },
-    customRowHoverStyles: {
-      control: 'function'
-    },
-    customRowHoverContent: {
-      control: 'function'
-    }
-  }
-}; // Sample columns and data for demonstration
-const columns = [{
-  Header: 'ID',
-  accessor: 'id',
-  width: '10%',
-  minWidth: '80px'
-}, {
-  Header: 'Name',
-  accessor: 'name',
-  width: '30%',
-  minWidth: '150px'
-}, {
-  Header: 'Status',
-  accessor: 'status',
-  width: '20%',
-  minWidth: '100px'
-}, {
-  Header: '',
-  accessor: 'dropdown',
-  width: '40%',
-  minWidth: '120px'
-}];
-const columnsWrapper = [{
-  label: 'ID',
-  key: 'id',
-  width: '10%',
-  minWidth: '80px'
-}, {
-  label: 'Name',
-  key: 'name',
-  width: '30%',
-  minWidth: '150px'
-}, {
-  label: 'Status',
-  key: 'status',
-  width: '20%',
-  minWidth: '100px'
-}, {
-  label: '',
-  key: 'dropdown',
-  width: '40%',
-  minWidth: '120px'
-}];
-const subColumns = [{
-  Header: 'Detail ID',
-  accessor: 'detailId'
-}, {
-  Header: 'Detail Name',
-  accessor: 'detailName'
-}];
-const subColumnsWrapper = [{
-  label: 'Detail ID',
-  key: 'detailId'
-}, {
-  label: 'Detail Name',
-  key: 'detailName'
-}];
-const data = [{
-  id: 1,
-  name: 'Alice',
-  status: 'Active',
-  subData: [{
-    detailId: 101,
-    detailName: 'Detail A1'
-  }, {
-    detailId: 102,
-    detailName: 'Detail A2'
-  }]
-}, {
-  id: 2,
-  name: 'Bob',
-  status: 'Inactive',
-  subData: [{
-    detailId: 201,
-    detailName: 'Detail B1'
-  }, {
-    detailId: 202,
-    detailName: 'Detail B2'
-  }]
-}, {
-  id: 3,
-  name: 'Carol',
-  status: 'Active',
-  subData: []
-}, {
-  id: 4,
-  name: 'Dave',
-  status: 'Pending',
-  subData: []
-}];
-
-// Custom styling functions
-const customTdStyles = (index, row, column) => {
-  if (index === 0) {
-    return {
-      backgroundColor: 'lightblue',
-      fontWeight: 'bold',
-      paddingBottom: 0
-    };
-  }
-  if (row.status === 'Inactive') {
-    return {
-      backgroundColor: 'lightgray'
-    };
-  }
-  if (row.status === 'Pending') {
-    return {
-      backgroundColor: 'lightyellow'
-    };
-  }
-  return {}; // default style
-};
-const customThStyles = column => {
-  return {
-    backgroundColor: 'lightblue'
-  };
-};
-
-// Custom row hover styles function
-const customRowHoverStyles = (rowIndex, rowData) => {
-  return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    transition: all 0.2s ease-in-out;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    \n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
-};
-
-// Custom row hover content function
-const customRowHoverContent = (columnId, rowIndex, rowData) => {
-  switch (columnId) {
-    case 'name':
-      // Show underlined link on hover
-      return /*#__PURE__*/_react.default.createElement("a", {
-        href: "/user/".concat(rowData.id),
-        style: {
-          textDecoration: 'underline',
-          color: '#0050ca',
-          fontWeight: 'bold'
-        }
-      }, rowData.name);
-    case 'dropdown':
-      // Show action buttons on hover
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          display: 'flex',
-          gap: '8px'
-        }
-      }, /*#__PURE__*/_react.default.createElement("button", {
-        style: {
-          padding: '4px 8px',
-          fontSize: '12px',
-          backgroundColor: '#0050ca',
-          color: 'white',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: 'pointer'
-        },
-        onClick: () => alert("Edit ".concat(rowData.name))
-      }, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
-        style: {
-          padding: '4px 8px',
-          fontSize: '12px',
-          backgroundColor: '#dc3545',
-          color: 'white',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: 'pointer'
-        },
-        onClick: () => alert("Delete ".concat(rowData.name))
-      }, "Delete"));
-    case 'status':
-      // Show status with icon on hover
-      const statusColors = {
-        Active: '#28a745',
-        Inactive: '#dc3545',
-        Pending: '#ffc107'
-      };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '4px'
-        }
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        style: {
-          width: '8px',
-          height: '8px',
-          borderRadius: '50%',
-          backgroundColor: statusColors[rowData.status] || '#6c757d'
-        }
-      }), rowData.status);
-    default:
-      return undefined;
-    // Return undefined to use default content
-  }
-};
-
-// Status-based hover styles
-const statusBasedHoverStyles = (rowIndex, rowData) => {
-  switch (rowData.status) {
-    case 'Active':
-      return "\n        background-color: #e8f5e8 !important;\n        td {\n          background-color: #e8f5e8 !important;\n          border-bottom-color: #28a745 !important;\n        }\n      ";
-    case 'Inactive':
-      return "\n        background-color: #ffe8e8 !important;\n        td {\n          background-color: #ffe8e8 !important;\n          border-bottom-color: #dc3545 !important;\n        }\n      ";
-    case 'Pending':
-      return "\n        background-color: #fff3cd !important;\n        td {\n          background-color: #fff3cd !important;\n          border-bottom-color: #ffc107 !important;\n        }\n      ";
-    default:
-      return "\n        background-color: #f8f9fa !important;\n        td {\n          background-color: #f8f9fa !important;\n        }\n      ";
-  }
-};
-
-// Row-specific hover styles (example: different styles for first and last rows)
-const rowSpecificHoverStyles = (rowIndex, rowData) => {
-  // Special styling for first row
-  if (rowIndex === 0) {
-    return "\n      background-color: #e3f2fd !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n      td {\n        background-color: #e3f2fd !important;\n        border-bottom-color: #2196f3 !important;\n        font-weight: bold;\n      }\n    ";
-  }
-
-  // Special styling for last row
-  if (rowIndex === data.length - 1) {
-    return "\n      background-color: #f3e5f5 !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);\n      td {\n        background-color: #f3e5f5 !important;\n        border-bottom-color: #9c27b0 !important;\n        font-weight: bold;\n      }\n    ";
-  }
-
-  // Default styling for other rows
-  return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
-};
-
-// Function to calculate sub data
-const calculateSubData = row => {
-  return row.original.subData || [];
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, args));
-const TemplateWrapper = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTableWrapper.ReactTableWrapper, args));
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  columns: columns,
-  data: data,
-  noPagination: false
-};
-const WithoutPagination = exports.WithoutPagination = Template.bind({});
-WithoutPagination.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  noPagination: true
-});
-const WithCustomStyling = exports.WithCustomStyling = Template.bind({});
-WithCustomStyling.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customTdStyles: customTdStyles,
-  customThStyles: customThStyles
-});
-const WithRowHover = exports.WithRowHover = Template.bind({});
-WithRowHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverStyles: customRowHoverStyles
-});
-const WithHoverContent = exports.WithHoverContent = Template.bind({});
-WithHoverContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverContent: customRowHoverContent
-});
-const WithHoverStylesAndContent = exports.WithHoverStylesAndContent = Template.bind({});
-WithHoverStylesAndContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverStyles: customRowHoverStyles,
-  customRowHoverContent: customRowHoverContent
-});
-const WithStatusBasedHover = exports.WithStatusBasedHover = Template.bind({});
-WithStatusBasedHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverStyles: statusBasedHoverStyles
-});
-const WithRowSpecificHover = exports.WithRowSpecificHover = Template.bind({});
-WithRowSpecificHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverStyles: rowSpecificHoverStyles
-});
-const WithFixedColumnWidths = exports.WithFixedColumnWidths = Template.bind({});
-WithFixedColumnWidths.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowHoverContent: customRowHoverContent,
-  customRowHoverStyles: customRowHoverStyles
-});
-const WithSubTable = exports.WithSubTable = Template.bind({});
-WithSubTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  withSubTable: true,
-  subColumns: subColumns,
-  calculateSubData: calculateSubData
-});
-const BlueTable = exports.BlueTable = Template.bind({});
-BlueTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  blue: true
-});
-
-// Wrapper examples
-const DefaultWrapper = exports.DefaultWrapper = TemplateWrapper.bind({});
-DefaultWrapper.args = {
-  columns: columnsWrapper,
-  data: data,
-  noPagination: false
-};
-const WrapperWithSubTable = exports.WrapperWithSubTable = TemplateWrapper.bind({});
-WrapperWithSubTable.args = {
-  columns: columnsWrapper,
-  data: data,
-  withSubTable: true,
-  subColumns: subColumnsWrapper,
-  calculateSubData: calculateSubData
-};
-const BlueWrapper = exports.BlueWrapper = TemplateWrapper.bind({});
-BlueWrapper.args = {
-  columns: columnsWrapper,
-  data: data,
-  blue: true
-};
-
-// Box-style table example
-const BoxStyleTable = exports.BoxStyleTable = Template.bind({});
-BoxStyleTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customRowStyles: (rowIndex, rowData) => {
-    // return {
-    //   border: '1px solid #e1e1e1',
-    //   borderRadius: '8px',
-    //   marginBottom: '12px',
-    //   borderRight: '1px solid red !important',
-
-    //   backgroundColor: '#ffffff',
-    // }
-    return "\n      border: 1px solid #e1e1e1;\n      border-radius: 8px;\n      margin-bottom: 12px;\n      background-color: #ffffff;\n\n      td{\n        border:inherit;\n        border-right:none;\n        border-left:none;\n        \n        &:first-child {\n          border-left:inherit;\n          border-top-left-radius:4px;\n          border-bottom-left-radius:4px;\n        }\n        &:last-child {\n            border-right:inherit;\n            border-top-right-radius:4px;\n            border-bottom-right-radius:4px;\n        }\n        }\n    ";
-  },
-  customRowHoverStyles: (rowIndex, rowData) => ({
-    backgroundColor: '#e1e1e1'
-  }),
-  customTableStyles: () => ({
-    borderSpacing: '0 20px'
-  })
-});
-
-// Table with custom styling
-const CustomStyledTable = exports.CustomStyledTable = Template.bind({});
-CustomStyledTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
-  customTableStyles: () => ({
-    border: '2px solid #4caf50',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    boxShadow: '0 8px 16px rgba(76, 175, 80, 0.2)',
-    backgroundColor: '#f8fff8'
-  }),
-  customRowStyles: (rowIndex, rowData) => ({
-    backgroundColor: rowIndex % 2 === 0 ? '#ffffff' : '#f0f8f0',
-    borderBottom: '1px solid #e8f5e8'
-  }),
-  customRowHoverStyles: (rowIndex, rowData) => ({
-    backgroundColor: '#e8f5e8',
-    transform: 'scale(1.01)'
-  }),
-  customThStyles: column => ({
-    backgroundColor: '#4caf50',
-    color: '#ffffff',
-    fontWeight: 'bold',
-    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.'
-    }
-  }
-};