@unbxd-ui/unbxd-react-components 0.2.145-beta.7 → 0.2.145-beta.9

package/components/Table/Table.stories.js

@@ -4,12 +4,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ServerSidePagination = exports.SelectableRows = exports.RefreshTable = exports.NoPagination = exports.NoDataDefault = exports.Default = exports.CustomStyling = exports.CustomNoDataComponent = exports.CustomColumnFormatting = exports.BottomPagination = void 0;
+exports["default"] = exports.StickyLastColumn = exports.StickyFirstColumn = exports.StickyBothColumns = exports.SimpleExpandableRows = exports.ServerSidePaginationWithCustomStyling = exports.ServerSidePagination = exports.SelectableRows = exports.RefreshTable = exports.PaginationOptionsShowcase = exports.NoStickyColumn = exports.NoPagination = exports.NoDataDefault = exports.ExpandableRows = exports.Default = exports.CustomStyling = exports.CustomPaginationStyling = exports.CustomNoDataComponent = exports.CustomColumnFormatting = exports.ConditionalExpandableRows = exports.BottomPagination = exports.AdvancedPaginationStyling = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Table = _interopRequireDefault(require("./Table"));
 var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -320,6 +325,130 @@ var postsColumnConfigs = [{
     }, "User ", row.userId);
   }
 }];
+
+// Expandable content component for detailed row information
+var ExpandableRowContent = function ExpandableRowContent(_ref2) {
+  var data = _ref2.data;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px',
+      backgroundColor: '#f4f8ff',
+      borderLeft: '4px solid #007bff',
+      margin: '0'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+      gap: '16px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 8px 0',
+      color: '#495057',
+      fontSize: '14px'
+    }
+  }, "Contact Information"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Email:"), " ", data.email), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Phone:"), " ", data.phone || '+1 (555) 123-4567'), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Address:"), " ", data.address || '123 Main St, City, State 12345')), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 8px 0',
+      color: '#495057',
+      fontSize: '14px'
+    }
+  }, "Employment Details"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Start Date:"), " ", data.startDate || 'Jan 15, 2020'), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Manager:"), " ", data.manager || 'Sarah Johnson'), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Employee ID:"), " EMP-", data.id.toString().padStart(4, '0'))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 8px 0',
+      color: '#495057',
+      fontSize: '14px'
+    }
+  }, "Performance"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Rating:"), " ", data.rating || '4.2/5.0'), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Projects:"), " ", data.projects || '12 completed'), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0',
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Last Review:"), " ", data.lastReview || 'March 2024'))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginTop: '16px',
+      paddingTop: '16px',
+      borderTop: '1px solid #dee2e6'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      margin: '0 0 8px 0',
+      color: '#495057',
+      fontSize: '14px'
+    }
+  }, "Recent Activities"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontSize: '13px',
+      color: '#666'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0'
+    }
+  }, "\u2022 Completed Q1 Performance Review"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0'
+    }
+  }, "\u2022 Attended React Training Workshop"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0'
+    }
+  }, "\u2022 Led Project Alpha implementation"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '4px 0'
+    }
+  }, "\u2022 Mentored 2 junior developers"))));
+};
 var _default = exports["default"] = {
   title: 'Components/Table',
   component: _Table["default"],
@@ -341,6 +470,10 @@ var _default = exports["default"] = {
       control: 'object',
       description: 'Array of column configurations defining table structure'
     },
+    stickyColumn: {
+      control: 'boolean',
+      description: 'Whether to make the first and last column sticky'
+    },
     paginationType: {
       control: 'select',
       options: ['', 'CLIENT', 'SERVER'],
@@ -350,6 +483,10 @@ var _default = exports["default"] = {
       control: 'boolean',
       description: 'Whether to show pagination controls'
     },
+    paginationComponentOptions: {
+      control: 'object',
+      description: 'Options to customize pagination component styling and behavior'
+    },
     expandableRows: {
       control: 'boolean',
       description: 'Whether rows can be expanded to show additional content'
@@ -387,7 +524,10 @@ Default.args = {
   columnConfigs: basicColumnConfigs,
   paginationType: 'CLIENT',
   pagination: true,
-  customClassName: 'custom-table'
+  customClassName: 'custom-table',
+  paginationComponentOptions: {
+    className: 'default-pagination-styling'
+  }
 };
 
 // Table without pagination
@@ -425,9 +565,9 @@ var CustomNoDataComponent = exports.CustomNoDataComponent = function CustomNoDat
     _useState2 = _slicedToArray(_useState, 2),
     hasData = _useState2[0],
     setHasData = _useState2[1];
-  var CustomNoData = function CustomNoData(_ref2) {
-    var description = _ref2.description,
-      heading = _ref2.heading;
+  var CustomNoData = function CustomNoData(_ref3) {
+    var description = _ref3.description,
+      heading = _ref3.heading;
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         padding: '40px 20px',
@@ -466,9 +606,9 @@ var CustomNoDataComponent = exports.CustomNoDataComponent = function CustomNoDat
       }
     }));
   };
-  var CustomNoDataWithIcon = function CustomNoDataWithIcon(_ref3) {
-    var description = _ref3.description,
-      heading = _ref3.heading;
+  var CustomNoDataWithIcon = function CustomNoDataWithIcon(_ref4) {
+    var description = _ref4.description,
+      heading = _ref4.heading;
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         padding: '60px 20px',
@@ -549,9 +689,9 @@ var CustomNoDataComponent = exports.CustomNoDataComponent = function CustomNoDat
       }
     }, "Clear")));
   };
-  var CustomNoDataMinimal = function CustomNoDataMinimal(_ref4) {
-    var description = _ref4.description,
-      heading = _ref4.heading;
+  var CustomNoDataMinimal = function CustomNoDataMinimal(_ref5) {
+    var description = _ref5.description,
+      heading = _ref5.heading;
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         padding: '80px 20px',
@@ -895,4 +1035,1123 @@ var RefreshTable = exports.RefreshTable = function RefreshTable() {
     refreshData: refreshCount,
     customClassName: "custom-table"
   }));
+};
+
+// Expandable rows story
+var ExpandableRows = exports.ExpandableRows = function ExpandableRows() {
+  var expandableColumnConfigs = [{
+    name: 'Name',
+    selector: function selector(row) {
+      return row.name;
+    },
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "tbl-content",
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: '32px',
+          height: '32px',
+          borderRadius: '50%',
+          backgroundColor: '#007bff',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+          fontSize: '14px',
+          fontWeight: 'bold'
+        }
+      }, row.name.charAt(0)), /*#__PURE__*/_react["default"].createElement("span", null, row.name));
+    },
+    width: '200px'
+  }, {
+    name: 'Department',
+    selector: function selector(row) {
+      return row.department;
+    },
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          padding: '4px 8px',
+          borderRadius: '12px',
+          fontSize: '12px',
+          fontWeight: '500',
+          backgroundColor: row.department === 'Engineering' ? '#e3f2fd' : row.department === 'Marketing' ? '#f3e5f5' : row.department === 'Sales' ? '#e8f5e8' : '#fff3e0',
+          color: row.department === 'Engineering' ? '#1976d2' : row.department === 'Marketing' ? '#7b1fa2' : row.department === 'Sales' ? '#388e3c' : '#f57c00'
+        },
+        className: "tbl-content"
+      }, row.department);
+    },
+    width: '150px'
+  }, {
+    name: 'Position',
+    selector: function selector(row) {
+      return row.position;
+    },
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "tbl-content"
+      }, row.position);
+    },
+    width: '180px'
+  }, {
+    name: 'Salary',
+    selector: function selector(row) {
+      return row.salary;
+    },
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          fontWeight: 'bold',
+          color: row.salary > 75000 ? '#4caf50' : '#ff9800'
+        },
+        className: "tbl-content"
+      }, "$", row.salary.toLocaleString());
+    },
+    width: '120px'
+  }, {
+    name: 'Status',
+    selector: function selector(row) {
+      return row.status || 'Active';
+    },
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "tbl-content"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          padding: '4px 8px',
+          borderRadius: '12px',
+          fontSize: '12px',
+          fontWeight: 'bold',
+          backgroundColor: '#e8f5e8',
+          color: '#28a745'
+        }
+      }, "Active"));
+    },
+    width: '100px'
+  }];
+
+  // Enhanced sample data with positions
+  var expandableRowsData = [{
+    id: 1,
+    name: 'John Doe',
+    department: 'Engineering',
+    position: 'Senior Software Engineer',
+    salary: 85000
+  }, {
+    id: 2,
+    name: 'Jane Smith',
+    department: 'Marketing',
+    position: 'Marketing Manager',
+    salary: 70000
+  }, {
+    id: 3,
+    name: 'Bob Johnson',
+    department: 'Sales',
+    position: 'Sales Director',
+    salary: 95000
+  }, {
+    id: 4,
+    name: 'Alice Brown',
+    department: 'Engineering',
+    position: 'Tech Lead',
+    salary: 92000
+  }, {
+    id: 5,
+    name: 'Charlie Wilson',
+    department: 'HR',
+    position: 'HR Business Partner',
+    salary: 65000
+  }, {
+    id: 6,
+    name: 'Diana Davis',
+    department: 'Marketing',
+    position: 'Content Strategist',
+    salary: 60000
+  }, {
+    id: 7,
+    name: 'Edward Miller',
+    department: 'Sales',
+    position: 'Account Executive',
+    salary: 75000
+  }, {
+    id: 8,
+    name: 'Fiona Garcia',
+    department: 'Engineering',
+    position: 'Frontend Developer',
+    salary: 78000
+  }, {
+    id: 9,
+    name: 'George Martinez',
+    department: 'HR',
+    position: 'Talent Acquisition',
+    salary: 62000
+  }, {
+    id: 10,
+    name: 'Helen Taylor',
+    department: 'Marketing',
+    position: 'Digital Marketing Specialist',
+    salary: 58000
+  }];
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Table with Expandable Rows"), /*#__PURE__*/_react["default"].createElement("p", null, "Click on any row to expand it and see additional details about the employee."), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundColor: '#e3f2fd',
+      padding: '12px',
+      borderRadius: '6px',
+      marginTop: '12px',
+      fontSize: '14px',
+      color: '#1565c0'
+    }
+  }, "\uD83D\uDCA1 ", /*#__PURE__*/_react["default"].createElement("strong", null, "Feature:"), " Each row can be expanded to show detailed information including contact details, employment history, and performance metrics.")), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: expandableRowsData,
+    columnConfigs: expandableColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    expandableRows: true,
+    expandableRowsComponent: ExpandableRowContent,
+    customClassName: "custom-table expandable-table"
+  }));
+};
+
+// Simple expandable rows example
+var SimpleExpandableRows = exports.SimpleExpandableRows = function SimpleExpandableRows() {
+  var SimpleExpandableContent = function SimpleExpandableContent(_ref6) {
+    var data = _ref6.data;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '16px',
+        backgroundColor: '#f4f8ff',
+        borderRadius: '4px',
+        margin: '0'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", {
+      style: {
+        margin: '0 0 8px 0',
+        fontSize: '16px',
+        color: '#333'
+      }
+    }, "Additional Information for ", data.name), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Employee ID:"), " EMP-", data.id.toString().padStart(4, '0')), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Email:"), " ", data.email), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Full Department:"), " ", data.department, " Department"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Annual Salary:"), " $", data.salary.toLocaleString()), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Age:"), " ", data.age, " years old"));
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Simple Expandable Rows"), /*#__PURE__*/_react["default"].createElement("p", null, "A simpler example of expandable rows with basic additional information.")), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: sampleRecords.slice(0, 8),
+    columnConfigs: basicColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    expandableRows: true,
+    expandableRowsComponent: SimpleExpandableContent,
+    customClassName: "custom-table"
+  }));
+};
+
+// Expandable rows with conditional expansion
+var ConditionalExpandableRows = exports.ConditionalExpandableRows = function ConditionalExpandableRows() {
+  var ConditionalExpandableContent = function ConditionalExpandableContent(_ref7) {
+    var data = _ref7.data;
+    // Only show expansion for certain departments
+    if (!['Engineering', 'Sales'].includes(data.department)) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          padding: '16px',
+          backgroundColor: '#f4f8ff',
+          border: '1px solid #ffeaa7',
+          borderRadius: '4px',
+          margin: '0',
+          textAlign: 'center'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("p", {
+        style: {
+          margin: 0,
+          color: '#856404'
+        }
+      }, "\uD83D\uDCCB No additional details available for ", data.department, " department."));
+    }
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        backgroundColor: '#f8f9fa',
+        border: '1px solid #dee2e6',
+        borderRadius: '6px',
+        margin: '8px 0'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h4", {
+      style: {
+        margin: '0 0 12px 0',
+        color: '#495057'
+      }
+    }, data.department, " Department Details"), data.department === 'Engineering' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Programming Languages:"), " JavaScript, Python, Java"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Current Project:"), " React Dashboard Redesign"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Certifications:"), " AWS Solutions Architect, React Professional"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Code Reviews:"), " 45 completed this quarter")), data.department === 'Sales' && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Territory:"), " West Coast Region"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Q1 Sales:"), " $125,000 (120% of target)"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Active Deals:"), " 12 opportunities in pipeline"), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: '4px 0',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("strong", null, "Client Satisfaction:"), " 4.8/5.0 average rating")));
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Conditional Expandable Rows"), /*#__PURE__*/_react["default"].createElement("p", null, "This example shows different content based on the row data. Engineering and Sales show detailed info, others show a simple message."), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundColor: '#fff3cd',
+      padding: '8px 12px',
+      borderRadius: '4px',
+      fontSize: '13px',
+      color: '#856404',
+      marginTop: '8px'
+    }
+  }, "\uD83D\uDCA1 Try expanding rows from different departments to see the conditional content.")), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: sampleRecords.slice(0, 10),
+    columnConfigs: basicColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    expandableRows: true,
+    expandableRowsComponent: ConditionalExpandableContent,
+    customClassName: "custom-table"
+  }));
+};
+
+// Sample data with more columns for sticky testing
+var stickyTestRecords = [{
+  id: 1,
+  name: 'John Doe',
+  email: 'john.doe@example.com',
+  age: 30,
+  department: 'Engineering',
+  salary: 75000,
+  location: 'New York',
+  status: 'Active'
+}, {
+  id: 2,
+  name: 'Jane Smith',
+  email: 'jane.smith@example.com',
+  age: 28,
+  department: 'Marketing',
+  salary: 65000,
+  location: 'Los Angeles',
+  status: 'Active'
+}, {
+  id: 3,
+  name: 'Bob Johnson',
+  email: 'bob.johnson@example.com',
+  age: 35,
+  department: 'Sales',
+  salary: 80000,
+  location: 'Chicago',
+  status: 'Inactive'
+}, {
+  id: 4,
+  name: 'Alice Brown',
+  email: 'alice.brown@example.com',
+  age: 32,
+  department: 'Engineering',
+  salary: 78000,
+  location: 'Seattle',
+  status: 'Active'
+}, {
+  id: 5,
+  name: 'Charlie Wilson',
+  email: 'charlie.wilson@example.com',
+  age: 29,
+  department: 'HR',
+  salary: 60000,
+  location: 'Austin',
+  status: 'Active'
+}, {
+  id: 6,
+  name: 'Diana Davis',
+  email: 'diana.davis@example.com',
+  age: 31,
+  department: 'Marketing',
+  salary: 67000,
+  location: 'Miami',
+  status: 'Active'
+}, {
+  id: 7,
+  name: 'Edward Miller',
+  email: 'edward.miller@example.com',
+  age: 33,
+  department: 'Sales',
+  salary: 82000,
+  location: 'Denver',
+  status: 'Inactive'
+}, {
+  id: 8,
+  name: 'Fiona Garcia',
+  email: 'fiona.garcia@example.com',
+  age: 27,
+  department: 'Engineering',
+  salary: 72000,
+  location: 'Portland',
+  status: 'Active'
+}];
+
+// Column configs with sticky first column
+var stickyFirstColumnConfigs = [{
+  name: 'ID',
+  selector: function selector(row) {
+    return row.id;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content",
+      style: {
+        fontWeight: 'bold',
+        color: '#007bff'
+      }
+    }, row.id);
+  },
+  width: '80px',
+  stickyColumn: true // First column sticky
+}, {
+  name: 'Name',
+  selector: function selector(row) {
+    return row.name;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.name);
+  },
+  width: '150px'
+}, {
+  name: 'Email',
+  selector: function selector(row) {
+    return row.email;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.email);
+  },
+  width: '200px'
+}, {
+  name: 'Age',
+  selector: function selector(row) {
+    return row.age;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.age);
+  },
+  width: '80px'
+}, {
+  name: 'Department',
+  selector: function selector(row) {
+    return row.department;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.department);
+  },
+  width: '130px'
+}, {
+  name: 'Salary',
+  selector: function selector(row) {
+    return "$".concat(row.salary.toLocaleString());
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, "$", row.salary.toLocaleString());
+  },
+  width: '100px'
+}, {
+  name: 'Location',
+  selector: function selector(row) {
+    return row.location;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.location);
+  },
+  width: '120px'
+}, {
+  name: 'Status',
+  selector: function selector(row) {
+    return row.status;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        padding: '4px 8px',
+        borderRadius: '12px',
+        fontSize: '12px',
+        fontWeight: 'bold',
+        backgroundColor: row.status === 'Active' ? '#e8f5e8' : '#ffe6e6',
+        color: row.status === 'Active' ? '#28a745' : '#dc3545'
+      }
+    }, row.status));
+  },
+  width: '100px'
+}];
+
+// Column configs with sticky last column
+var stickyLastColumnConfigs = [{
+  name: 'ID',
+  selector: function selector(row) {
+    return row.id;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.id);
+  },
+  width: '80px'
+}, {
+  name: 'Name',
+  selector: function selector(row) {
+    return row.name;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.name);
+  },
+  width: '150px'
+}, {
+  name: 'Email',
+  selector: function selector(row) {
+    return row.email;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.email);
+  },
+  width: '200px'
+}, {
+  name: 'Age',
+  selector: function selector(row) {
+    return row.age;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.age);
+  },
+  width: '80px'
+}, {
+  name: 'Department',
+  selector: function selector(row) {
+    return row.department;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.department);
+  },
+  width: '130px'
+}, {
+  name: 'Salary',
+  selector: function selector(row) {
+    return "$".concat(row.salary.toLocaleString());
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, "$", row.salary.toLocaleString());
+  },
+  width: '100px'
+}, {
+  name: 'Location',
+  selector: function selector(row) {
+    return row.location;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.location);
+  },
+  width: '120px'
+}, {
+  name: 'Actions',
+  selector: function selector(row) {
+    return 'actions';
+  },
+  sortable: false,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      style: {
+        padding: '4px 8px',
+        marginRight: '4px',
+        backgroundColor: '#007bff',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '12px'
+      },
+      onClick: function onClick() {
+        return alert("Edit ".concat(row.name));
+      }
+    }, "Edit"), /*#__PURE__*/_react["default"].createElement("button", {
+      style: {
+        padding: '4px 8px',
+        backgroundColor: '#dc3545',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '12px'
+      },
+      onClick: function onClick() {
+        return alert("Delete ".concat(row.name));
+      }
+    }, "Delete"));
+  },
+  width: '120px',
+  stickyColumn: true // Last column sticky
+}];
+
+// Table with sticky first column
+var StickyFirstColumn = exports.StickyFirstColumn = function StickyFirstColumn() {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Sticky First Column Table"), /*#__PURE__*/_react["default"].createElement("p", null, "The first column (ID) is sticky and will remain visible when scrolling horizontally."), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      color: '#666',
+      fontSize: '14px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Class applied:"), " ", /*#__PURE__*/_react["default"].createElement("code", null, "first-clm-sticky"))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '800px',
+      overflowX: 'auto',
+      borderRight: '1px solid #ddd'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: stickyTestRecords,
+    columnConfigs: stickyFirstColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    customClassName: "custom-table"
+  })));
+};
+
+// Table with sticky last column
+var StickyLastColumn = exports.StickyLastColumn = function StickyLastColumn() {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Sticky Last Column Table"), /*#__PURE__*/_react["default"].createElement("p", null, "The last column (Actions) is sticky and will remain visible when scrolling horizontally."), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      color: '#666',
+      fontSize: '14px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Class applied:"), " ", /*#__PURE__*/_react["default"].createElement("code", null, "last-clm-sticky"))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '800px',
+      overflowX: 'auto',
+      border: '1px solid #ddd'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: stickyTestRecords,
+    columnConfigs: stickyLastColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    customClassName: "custom-table"
+  })));
+};
+
+// Table without sticky columns (for comparison)
+var NoStickyColumn = exports.NoStickyColumn = function NoStickyColumn() {
+  var regularColumnConfigs = stickyFirstColumnConfigs.map(function (col) {
+    return _objectSpread(_objectSpread({}, col), {}, {
+      stickyColumn: false // Ensure no sticky columns
+    });
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Regular Table (No Sticky Columns)"), /*#__PURE__*/_react["default"].createElement("p", null, "This table has no sticky columns for comparison purposes."), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      color: '#666',
+      fontSize: '14px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Classes applied:"), " Only ", /*#__PURE__*/_react["default"].createElement("code", null, "nutana-table"))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '800px',
+      overflowX: 'auto',
+      border: '1px solid #ddd'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: stickyTestRecords,
+    columnConfigs: regularColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    customClassName: "custom-table"
+  })));
+};
+
+// Column configs with both first and last columns sticky
+var stickyBothColumnConfigs = [{
+  name: 'ID',
+  selector: function selector(row) {
+    return row.id;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content",
+      style: {
+        fontWeight: 'bold',
+        color: '#007bff'
+      }
+    }, row.id);
+  },
+  width: '80px',
+  stickyColumn: true // First column sticky
+}, {
+  name: 'Name',
+  selector: function selector(row) {
+    return row.name;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.name);
+  },
+  width: '150px'
+}, {
+  name: 'Email',
+  selector: function selector(row) {
+    return row.email;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.email);
+  },
+  width: '200px'
+}, {
+  name: 'Age',
+  selector: function selector(row) {
+    return row.age;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.age);
+  },
+  width: '80px'
+}, {
+  name: 'Department',
+  selector: function selector(row) {
+    return row.department;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.department);
+  },
+  width: '130px'
+}, {
+  name: 'Salary',
+  selector: function selector(row) {
+    return "$".concat(row.salary.toLocaleString());
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, "$", row.salary.toLocaleString());
+  },
+  width: '100px'
+}, {
+  name: 'Location',
+  selector: function selector(row) {
+    return row.location;
+  },
+  sortable: true,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, row.location);
+  },
+  width: '120px'
+}, {
+  name: 'Actions',
+  selector: function selector(row) {
+    return 'actions';
+  },
+  sortable: false,
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "tbl-content"
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      style: {
+        padding: '4px 8px',
+        marginRight: '4px',
+        backgroundColor: '#28a745',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '12px'
+      },
+      onClick: function onClick() {
+        return alert("View ".concat(row.name));
+      }
+    }, "View"), /*#__PURE__*/_react["default"].createElement("button", {
+      style: {
+        padding: '4px 8px',
+        marginRight: '4px',
+        backgroundColor: '#007bff',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '12px'
+      },
+      onClick: function onClick() {
+        return alert("Edit ".concat(row.name));
+      }
+    }, "Edit"), /*#__PURE__*/_react["default"].createElement("button", {
+      style: {
+        padding: '4px 8px',
+        backgroundColor: '#dc3545',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '12px'
+      },
+      onClick: function onClick() {
+        return alert("Delete ".concat(row.name));
+      }
+    }, "Delete"));
+  },
+  width: '180px',
+  stickyColumn: true // Last column sticky
+}];
+
+// Table with both first and last columns sticky
+var StickyBothColumns = exports.StickyBothColumns = function StickyBothColumns() {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Sticky First & Last Columns Table"), /*#__PURE__*/_react["default"].createElement("p", null, "Both the first column (ID) and last column (Actions) are sticky and will remain visible when scrolling horizontally."), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      color: '#666',
+      fontSize: '14px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Classes applied:"), " ", /*#__PURE__*/_react["default"].createElement("code", null, "first-clm-sticky"), " and ", /*#__PURE__*/_react["default"].createElement("code", null, "last-clm-sticky")), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundColor: '#f8f9fa',
+      padding: '8px 12px',
+      borderRadius: '4px',
+      marginTop: '8px',
+      fontSize: '13px',
+      color: '#495057'
+    }
+  }, "\uD83D\uDCA1 ", /*#__PURE__*/_react["default"].createElement("strong", null, "Testing tip:"), " Scroll horizontally to see both ID and Actions columns remain fixed while middle columns scroll.")), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '800px',
+      overflowX: 'auto',
+      border: '1px solid #ddd'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: stickyTestRecords,
+    columnConfigs: stickyBothColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    customClassName: "custom-table"
+  })));
+};
+
+// Custom pagination styling example
+var CustomPaginationStyling = exports.CustomPaginationStyling = Template.bind({});
+CustomPaginationStyling.args = {
+  records: sampleRecords,
+  columnConfigs: basicColumnConfigs,
+  paginationType: 'CLIENT',
+  pagination: true,
+  customClassName: 'custom-table',
+  paginationComponentOptions: {
+    className: 'my-custom-pagination-class',
+    // This will be applied to the 'rdt_Pagination' div
+    rowsPerPageText: 'Records per page:',
+    rangeSeparatorText: 'of',
+    selectAllRowsItem: true,
+    selectAllRowsItemText: 'All'
+  }
+};
+
+// Server-side pagination with custom styling
+var ServerSidePaginationWithCustomStyling = exports.ServerSidePaginationWithCustomStyling = function ServerSidePaginationWithCustomStyling() {
+  var _useState11 = (0, _react.useState)([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedRows = _useState12[0],
+    setSelectedRows = _useState12[1];
+  var responseFormatter = function responseFormatter(response) {
+    return {
+      entries: response || [],
+      total: response ? 30 : 0
+    };
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Server-Side Pagination with Custom Styling"), /*#__PURE__*/_react["default"].createElement("p", null, "This example shows custom pagination styling with server-side data fetching."), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundColor: '#e3f2fd',
+      padding: '12px',
+      borderRadius: '6px',
+      marginTop: '12px',
+      fontSize: '14px',
+      color: '#1565c0'
+    }
+  }, "\uD83D\uDCA1 ", /*#__PURE__*/_react["default"].createElement("strong", null, "Custom Classes:"), " The pagination component has custom styling applied via ", /*#__PURE__*/_react["default"].createElement("code", null, "paginationComponentOptions"))), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    columnConfigs: postsColumnConfigs,
+    paginationType: "SERVER",
+    pagination: true,
+    showSelectableRows: true,
+    setSelectedRow: setSelectedRows,
+    CheckBoxRow: CustomCheckBoxRow,
+    customClassName: "custom-table",
+    paginationComponentOptions: {
+      className: 'server-pagination-custom',
+      rowsPerPageText: 'Posts per page:',
+      rangeSeparatorText: 'out of',
+      selectAllRowsItem: true,
+      selectAllRowsItemText: 'Show All'
+    },
+    apiInfo: {
+      pageNoKey: '_page',
+      perPageKey: '_limit',
+      searchBy: 'q',
+      requestId: 'getPosts',
+      responseFormatter: responseFormatter
+    },
+    onApiError: function onApiError(error) {
+      return console.error('API Error:', error);
+    }
+  }));
+};
+
+// Pagination options showcase
+var PaginationOptionsShowcase = exports.PaginationOptionsShowcase = function PaginationOptionsShowcase() {
+  var _useState13 = (0, _react.useState)({
+      className: 'showcase-pagination',
+      rowsPerPageText: 'Items per page:',
+      rangeSeparatorText: 'of',
+      selectAllRowsItem: true,
+      selectAllRowsItemText: 'All Records'
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    currentOptions = _useState14[0],
+    setCurrentOptions = _useState14[1];
+  var optionSets = [{
+    name: 'Default Style',
+    options: {
+      className: 'default-pagination',
+      rowsPerPageText: 'Rows per page:',
+      rangeSeparatorText: 'of',
+      selectAllRowsItem: false
+    }
+  }, {
+    name: 'Compact Style',
+    options: {
+      className: 'compact-pagination',
+      rowsPerPageText: 'Per page:',
+      rangeSeparatorText: '/',
+      selectAllRowsItem: true,
+      selectAllRowsItemText: 'All'
+    }
+  }, {
+    name: 'Verbose Style',
+    options: {
+      className: 'verbose-pagination',
+      rowsPerPageText: 'Number of records per page:',
+      rangeSeparatorText: 'out of total',
+      selectAllRowsItem: true,
+      selectAllRowsItemText: 'Show All Records'
+    }
+  }, {
+    name: 'Custom Brand Style',
+    options: {
+      className: 'brand-pagination',
+      rowsPerPageText: 'Display:',
+      rangeSeparatorText: 'from',
+      selectAllRowsItem: true,
+      selectAllRowsItemText: 'Everything'
+    }
+  }];
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Pagination Options Showcase"), /*#__PURE__*/_react["default"].createElement("p", null, "Try different pagination styling options to see how they affect the appearance and text."), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    style: {
+      marginRight: '8px',
+      fontWeight: 'bold'
+    }
+  }, "Choose Style:"), /*#__PURE__*/_react["default"].createElement("select", {
+    onChange: function onChange(e) {
+      return setCurrentOptions(optionSets[e.target.value].options);
+    },
+    style: {
+      padding: '4px 8px',
+      borderRadius: '4px',
+      border: '1px solid #ccc'
+    }
+  }, optionSets.map(function (set, index) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: index,
+      value: index
+    }, set.name);
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundColor: '#f8f9fa',
+      padding: '12px',
+      borderRadius: '6px',
+      fontSize: '13px',
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("strong", null, "Current Options:"), /*#__PURE__*/_react["default"].createElement("pre", {
+    style: {
+      margin: '8px 0 0 0',
+      fontSize: '12px'
+    }
+  }, JSON.stringify(currentOptions, null, 2)))), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: sampleRecords,
+    columnConfigs: basicColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    customClassName: "custom-table",
+    paginationComponentOptions: currentOptions
+  }));
+};
+
+// Advanced pagination styling with CSS
+var AdvancedPaginationStyling = exports.AdvancedPaginationStyling = function AdvancedPaginationStyling() {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("style", null, "\n        .advanced-pagination {\n          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n          padding: 16px;\n          border-radius: 12px;\n          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n        }\n\n        .advanced-pagination .rdt_TableFooter {\n          color: white;\n          font-weight: 500;\n        }\n\n        .advanced-pagination select {\n          background: rgba(255, 255, 255, 0.2);\n          color: white;\n          border: 1px solid rgba(255, 255, 255, 0.3);\n          border-radius: 6px;\n          padding: 4px 8px;\n        }\n\n        .advanced-pagination button {\n          background: rgba(255, 255, 255, 0.2);\n          color: white;\n          border: 1px solid rgba(255, 255, 255, 0.3);\n          border-radius: 6px;\n          padding: 8px 12px;\n          margin: 0 2px;\n          cursor: pointer;\n          transition: all 0.3s ease;\n        }\n\n        .advanced-pagination button:hover:not(:disabled) {\n          background: rgba(255, 255, 255, 0.3);\n          transform: translateY(-1px);\n        }\n\n        .advanced-pagination button:disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n        }\n      "), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Advanced Pagination Styling"), /*#__PURE__*/_react["default"].createElement("p", null, "This example shows how custom CSS can be applied through the className option.")), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: sampleRecords,
+    columnConfigs: basicColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    customClassName: "custom-table",
+    paginationComponentOptions: {
+      className: 'advanced-pagination',
+      rowsPerPageText: '🔢 Show:',
+      rangeSeparatorText: '📊 of',
+      selectAllRowsItem: true,
+      selectAllRowsItemText: '🌟 All'
+    }
+  }));
 };