@unbxd-ui/unbxd-react-components 0.2.145 → 0.2.146

package/components/Table/Table.stories.js

@@ -4,16 +4,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TableWithoutPaginationBar = exports.TableWithSearch = exports.SimpleUsage = exports.ServerSideTable = exports.ExpandedTable = 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("../DataLoader"));
 var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
-var _Form = require("../Form");
-var _Constants = require("../../../public/Constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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; }
@@ -25,174 +21,2137 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var getFruitsColumnConfigs = function getFruitsColumnConfigs() {
-  var columnConfigs = [{
-    label: "Id",
-    key: "id",
-    sortable: true
-  }, {
-    label: "Task Name",
-    key: "name",
-    sortable: true
-  }];
-  return columnConfigs;
+// Custom CheckBoxRow component for stories
+var CustomCheckBoxRow = function CustomCheckBoxRow(_ref) {
+  var selected = _ref.selected,
+    onSelectionChange = _ref.onSelectionChange,
+    _ref$isCell = _ref.isCell,
+    isCell = _ref$isCell === void 0 ? false : _ref$isCell,
+    row = _ref.row;
+  var handleChange = function handleChange(e) {
+    if (isCell && row) {
+      onSelectionChange(row, e.target.checked);
+    } else {
+      onSelectionChange(null, e.target.checked);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement("input", {
+    type: "checkbox",
+    checked: selected,
+    onChange: handleChange,
+    style: {
+      width: '16px',
+      height: '16px',
+      cursor: 'pointer',
+      accentColor: '#007bff'
+    }
+  });
 };
-var getTodosColumnConfigs = function getTodosColumnConfigs() {
-  var columnConfigs = [{
-    label: "Id",
-    key: "id"
-  }, {
-    label: "Task Name",
-    key: "title"
-  }, {
-    label: "Status",
-    key: "completed",
-    valueFormatter: function valueFormatter(_ref) {
-      var value = _ref.value;
-      return value ? "Completed" : "Not Started";
+
+// Set up request configurations for server-side examples
+_dataLoader["default"].addRequestConfig('getUsers', {
+  url: 'https://jsonplaceholder.typicode.com/users',
+  method: 'GET'
+});
+_dataLoader["default"].addRequestConfig('getPosts', {
+  url: 'https://jsonplaceholder.typicode.com/posts',
+  method: 'GET'
+});
+
+// Sample data for stories
+var sampleRecords = [{
+  id: 1,
+  name: 'John Doe',
+  email: 'john.doe@example.com',
+  age: 30,
+  department: 'Engineering',
+  salary: 75000
+}, {
+  id: 2,
+  name: 'Jane Smith',
+  email: 'jane.smith@example.com',
+  age: 28,
+  department: 'Marketing',
+  salary: 65000
+}, {
+  id: 3,
+  name: 'Bob Johnson',
+  email: 'bob.johnson@example.com',
+  age: 35,
+  department: 'Sales',
+  salary: 80000
+}, {
+  id: 4,
+  name: 'Alice Brown',
+  email: 'alice.brown@example.com',
+  age: 32,
+  department: 'Engineering',
+  salary: 78000
+}, {
+  id: 5,
+  name: 'Charlie Wilson',
+  email: 'charlie.wilson@example.com',
+  age: 29,
+  department: 'HR',
+  salary: 60000
+}, {
+  id: 6,
+  name: 'Diana Davis',
+  email: 'diana.davis@example.com',
+  age: 31,
+  department: 'Marketing',
+  salary: 67000
+}, {
+  id: 7,
+  name: 'Edward Miller',
+  email: 'edward.miller@example.com',
+  age: 33,
+  department: 'Sales',
+  salary: 82000
+}, {
+  id: 8,
+  name: 'Fiona Garcia',
+  email: 'fiona.garcia@example.com',
+  age: 27,
+  department: 'Engineering',
+  salary: 72000
+}, {
+  id: 9,
+  name: 'George Martinez',
+  email: 'george.martinez@example.com',
+  age: 34,
+  department: 'HR',
+  salary: 62000
+}, {
+  id: 10,
+  name: 'Helen Taylor',
+  email: 'helen.taylor@example.com',
+  age: 30,
+  department: 'Marketing',
+  salary: 68000
+}, {
+  id: 11,
+  name: 'Isaac Thompson',
+  email: 'isaac.thompson@example.com',
+  age: 36,
+  department: 'Engineering',
+  salary: 79000
+}, {
+  id: 12,
+  name: 'Julia White',
+  email: 'julia.white@example.com',
+  age: 26,
+  department: 'HR',
+  salary: 61000
+}, {
+  id: 13,
+  name: 'Kevin Harris',
+  email: 'kevin.harris@example.com',
+  age: 38,
+  department: 'Sales',
+  salary: 85000
+}, {
+  id: 14,
+  name: 'Laura Lewis',
+  email: 'laura.lewis@example.com',
+  age: 29,
+  department: 'Marketing',
+  salary: 66000
+}, {
+  id: 15,
+  name: 'Michael Young',
+  email: 'michael.young@example.com',
+  age: 40,
+  department: 'Engineering',
+  salary: 88000
+}, {
+  id: 16,
+  name: 'Natalie Hall',
+  email: 'natalie.hall@example.com',
+  age: 31,
+  department: 'HR',
+  salary: 63000
+}, {
+  id: 17,
+  name: 'Oliver Allen',
+  email: 'oliver.allen@example.com',
+  age: 28,
+  department: 'Sales',
+  salary: 81000
+}, {
+  id: 18,
+  name: 'Patricia King',
+  email: 'patricia.king@example.com',
+  age: 33,
+  department: 'Marketing',
+  salary: 69000
+}, {
+  id: 19,
+  name: 'Quentin Scott',
+  email: 'quentin.scott@example.com',
+  age: 35,
+  department: 'Engineering',
+  salary: 76000
+}, {
+  id: 20,
+  name: 'Rachel Adams',
+  email: 'rachel.adams@example.com',
+  age: 30,
+  department: 'HR',
+  salary: 64000
+}];
+
+// Sample column configurations
+var basicColumnConfigs = [{
+  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: '200px'
+}, {
+  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: '250px'
+}, {
+  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: '100px'
+}, {
+  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: '150px'
+}, {
+  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);
+  },
+  width: '120px'
+}];
+var postsColumnConfigs = [{
+  name: 'Post ID',
+  selector: function selector(row) {
+    return row.id;
+  },
+  sortable: true,
+  width: '100px'
+}, {
+  name: 'Title',
+  selector: function selector(row) {
+    return row.title;
+  },
+  sortable: true,
+  width: '300px',
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontWeight: '500',
+        color: '#2c3e50',
+        lineHeight: '1.4'
+      }
+    }, row.title);
+  }
+}, {
+  name: 'Body',
+  selector: function selector(row) {
+    return row.body;
+  },
+  sortable: true,
+  width: '400px',
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        color: '#666',
+        fontSize: '13px',
+        lineHeight: '1.3',
+        maxHeight: '60px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    }, row.body);
+  }
+}, {
+  name: 'User ID',
+  selector: function selector(row) {
+    return row.userId;
+  },
+  sortable: true,
+  width: '100px',
+  cell: function cell(row) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        padding: '4px 8px',
+        borderRadius: '12px',
+        fontSize: '12px',
+        fontWeight: '500',
+        backgroundColor: '#e3f2fd',
+        color: '#1976d2'
+      }
+    }, "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'
     }
-  }];
-  return columnConfigs;
-};
-var getUsersColumnConfigs = function getUsersColumnConfigs() {
-  var columnConfigs = [{
-    label: "Avatar",
-    key: "avatar",
-    /* eslint-disable react/prop-types */
-    valueFormatter: function renderUserImage(_ref2) {
-      var value = _ref2.value;
-      return /*#__PURE__*/_react["default"].createElement("img", {
-        src: value
-      });
-    }
-    /* eslint-enable react/prop-types */
-  }, {
-    label: "first_name",
-    key: "name",
-    sortable: true,
-    valueFormatter: function valueFormatter(_ref3) {
-      var record = _ref3.record;
-      var first_name = record.first_name,
-        last_name = record.last_name;
-      return "".concat(first_name, " ").concat(last_name);
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+      gap: '16px'
     }
-  }];
-  return columnConfigs;
+  }, /*#__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"],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'A comprehensive table component that supports client-side and server-side pagination, sorting, searching, expandable rows, and more.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    records: {
+      control: 'object',
+      description: 'Array of data records to display in the table'
+    },
+    columnConfigs: {
+      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'],
+      description: 'Type of pagination to use (empty for no pagination)'
+    },
+    pagination: {
+      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'
+    },
+    selectableRows: {
+      control: 'boolean',
+      description: 'Whether rows can be selected with checkboxes'
+    },
+    showSelectableRows: {
+      control: 'boolean',
+      description: 'Whether to show selectable rows with checkboxes'
+    },
+    customClassName: {
+      control: 'text',
+      description: 'Additional CSS classes for styling'
+    },
+    noDataDescription: {
+      control: 'text',
+      description: 'Description text shown when no data is available'
+    },
+    noDataHeading: {
+      control: 'text',
+      description: 'Heading text shown when no data is available'
+    }
+  }
+}; // Template for stories
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Table["default"], args);
+};
+
+// Basic table with client-side pagination
+var Default = exports.Default = Template.bind({});
+Default.args = {
+  records: sampleRecords,
+  columnConfigs: basicColumnConfigs,
+  paginationType: 'CLIENT',
+  pagination: true,
+  customClassName: 'custom-table',
+  paginationComponentOptions: {
+    className: 'default-pagination-styling'
+  }
+};
+
+// Table without pagination
+var NoPagination = exports.NoPagination = Template.bind({});
+NoPagination.args = {
+  records: sampleRecords,
+  columnConfigs: basicColumnConfigs,
+  pagination: false,
+  customClassName: 'custom-table'
+};
+
+// Table with custom styling
+var CustomStyling = exports.CustomStyling = Template.bind({});
+CustomStyling.args = {
+  records: sampleRecords,
+  columnConfigs: basicColumnConfigs,
+  paginationType: 'CLIENT',
+  pagination: true,
+  customClassName: 'custom-table-styled'
+};
+
+// Table with no data
+var NoDataDefault = exports.NoDataDefault = Template.bind({});
+NoDataDefault.args = {
+  records: [],
+  columnConfigs: basicColumnConfigs,
+  paginationType: 'CLIENT',
+  pagination: true,
+  customClassName: 'custom-table'
 };
 
-/* eslint-disable react/prop-types */
-var TODODetail = function TODODetail(props) {
-  var _props$parentRecord = props.parentRecord,
-    parentRecord = _props$parentRecord === void 0 ? {} : _props$parentRecord;
-  var id = parentRecord.id;
-  var _useState = (0, _react.useState)({}),
+// Table with custom no data component
+var CustomNoDataComponent = exports.CustomNoDataComponent = function CustomNoDataComponent() {
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    todoData = _useState2[0],
-    setTodoData = _useState2[1];
-  var title = todoData.title,
-    completed = todoData.completed;
-  _dataLoader["default"].addRequestConfig("getTodoById", {
-    method: "GET",
-    url: function url(params) {
-      return "https://jsonplaceholder.typicode.com/todos/".concat(params.id);
+    hasData = _useState2[0],
+    setHasData = _useState2[1];
+  var CustomNoData = function CustomNoData(_ref3) {
+    var description = _ref3.description,
+      heading = _ref3.heading;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '40px 20px',
+        textAlign: 'center',
+        backgroundColor: '#f8f9fa',
+        borderRadius: '8px',
+        border: '2px dashed #dee2e6',
+        margin: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontSize: '48px',
+        color: '#6c757d',
+        marginBottom: '16px'
+      }
+    }, "\uD83D\uDCCA"), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontSize: '20px',
+        fontWeight: 'bold',
+        color: '#495057',
+        marginBottom: '8px'
+      }
+    }, heading || 'No Data Available'), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontSize: '14px',
+        color: '#6c757d',
+        marginBottom: '20px',
+        lineHeight: '1.5'
+      }
+    }, description || 'There are no records to display at the moment.'), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '12px',
+        justifyContent: 'center',
+        flexWrap: 'wrap'
+      }
+    }));
+  };
+  var CustomNoDataWithIcon = function CustomNoDataWithIcon(_ref4) {
+    var description = _ref4.description,
+      heading = _ref4.heading;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '60px 20px',
+        textAlign: 'center',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        borderRadius: '12px',
+        color: 'white',
+        margin: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontSize: '64px',
+        marginBottom: '16px'
+      }
+    }, "\uD83D\uDD0D"), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontSize: '24px',
+        fontWeight: 'bold',
+        marginBottom: '12px'
+      }
+    }, heading || 'No Results Found'), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontSize: '16px',
+        opacity: '0.9',
+        marginBottom: '24px',
+        lineHeight: '1.6'
+      }
+    }, description || 'We couldn\'t find any data matching your criteria.'), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '16px',
+        justifyContent: 'center',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        return setHasData(true);
+      },
+      style: {
+        padding: '12px 24px',
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        color: 'white',
+        border: '2px solid rgba(255, 255, 255, 0.3)',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontWeight: '500',
+        transition: 'all 0.3s ease'
+      },
+      onMouseOver: function onMouseOver(e) {
+        e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
+        e.target.style.borderColor = 'rgba(255, 255, 255, 0.5)';
+      },
+      onMouseOut: function onMouseOut(e) {
+        e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
+        e.target.style.borderColor = 'rgba(255, 255, 255, 0.3)';
+      }
+    }, "Try Again"), /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        return setHasData(false);
+      },
+      style: {
+        padding: '12px 24px',
+        backgroundColor: 'transparent',
+        color: 'white',
+        border: '2px solid rgba(255, 255, 255, 0.3)',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontWeight: '500',
+        transition: 'all 0.3s ease'
+      },
+      onMouseOver: function onMouseOver(e) {
+        e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
+      },
+      onMouseOut: function onMouseOut(e) {
+        e.target.style.backgroundColor = 'transparent';
+      }
+    }, "Clear")));
+  };
+  var CustomNoDataMinimal = function CustomNoDataMinimal(_ref5) {
+    var description = _ref5.description,
+      heading = _ref5.heading;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '80px 20px',
+        textAlign: 'center',
+        backgroundColor: '#ffffff',
+        borderRadius: '8px',
+        border: '1px solid #e9ecef',
+        margin: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '80px',
+        height: '80px',
+        margin: '0 auto 24px',
+        borderRadius: '50%',
+        backgroundColor: '#f8f9fa',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '32px',
+        color: '#adb5bd'
+      }
+    }, "\uD83D\uDCCB"), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontSize: '18px',
+        fontWeight: '600',
+        color: '#343a40',
+        marginBottom: '8px'
+      }
+    }, heading || 'Empty State'), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        fontSize: '14px',
+        color: '#6c757d',
+        marginBottom: '32px',
+        maxWidth: '300px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        lineHeight: '1.5'
+      }
+    }, description || 'This table is currently empty. Add some data to get started.'), /*#__PURE__*/_react["default"].createElement("button", {
+      onClick: function onClick() {
+        return setHasData(true);
+      },
+      style: {
+        padding: '10px 20px',
+        backgroundColor: '#007bff',
+        color: 'white',
+        border: 'none',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontWeight: '500',
+        transition: 'background-color 0.2s ease'
+      },
+      onMouseOver: function onMouseOver(e) {
+        e.target.style.backgroundColor = '#0056b3';
+      },
+      onMouseOut: function onMouseOut(e) {
+        e.target.style.backgroundColor = '#007bff';
+      }
+    }, "Add Sample Data"));
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '2rem'
     }
-  });
-  var onDataLoaded = function onDataLoaded(_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 1),
-      todoData = _ref5[0];
-    setTodoData(todoData);
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginTop: '1rem',
+      display: 'flex',
+      gap: '1rem',
+      flexWrap: 'wrap'
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '3rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      marginBottom: '1rem',
+      color: '#495057'
+    }
+  }, "Custom No Data Component"), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: hasData ? sampleRecords : [],
+    columnConfigs: basicColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    customClassName: "custom-table",
+    CustomNoDataComponent: CustomNoData
+  })));
+};
+
+// Interactive example with state management
+var SelectableRows = exports.SelectableRows = function SelectableRows() {
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedRows = _useState4[0],
+    setSelectedRows = _useState4[1];
+  var handleSelectionChange = function handleSelectionChange(rows) {
+    setSelectedRows(rows);
+    console.log('Selected rows:', rows);
   };
-  var requests = [{
-    requestId: "getTodoById",
-    urlParams: {
-      id: id
+
+  // Create a mock API response formatter for the sample data
+  var responseFormatter = function responseFormatter(response) {
+    return {
+      entries: response || [],
+      total: response ? 20 : 0
+    };
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
     }
-  }];
-  return /*#__PURE__*/_react["default"].createElement(_DataLoader["default"], {
-    requests: requests,
-    onDataLoaded: onDataLoaded
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("b", null, "Title:"), " ", title, " "), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("b", null, "Status:"), " ", completed ? "Completed" : "Not Completed", " "));
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Table with Selectable Rows"), /*#__PURE__*/_react["default"].createElement("p", null, "This table allows you to select rows using checkboxes with server-side implementation."), selectedRows.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginTop: '8px',
+      padding: '8px 12px',
+      backgroundColor: '#e3f2fd',
+      borderRadius: '4px',
+      fontSize: '14px'
+    }
+  }, "Selected: ", selectedRows.length, " row(s) with ids - ", selectedRows.map(function (row) {
+    return row.id;
+  }).join(', '))), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    columnConfigs: postsColumnConfigs,
+    paginationType: "SERVER",
+    pagination: true,
+    showSelectableRows: true,
+    setSelectedRow: handleSelectionChange,
+    CheckBoxRow: CustomCheckBoxRow,
+    customClassName: "custom-table",
+    apiInfo: {
+      pageNoKey: '_page',
+      perPageKey: '_limit',
+      searchBy: 'q',
+      requestId: 'getPosts',
+      responseFormatter: responseFormatter,
+      requestParam: {
+        _page: 1,
+        _limit: 10,
+        q: ''
+      }
+    },
+    onApiError: function onApiError(error) {
+      return console.error('API Error:', error);
+    }
+  }));
 };
-/* eslint-enable react/prop-types */
 
-var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
-  return /*#__PURE__*/_react["default"].createElement(_Table["default"], {
-    records: _Constants.FRUITS_LIST,
-    columnConfigs: getFruitsColumnConfigs()
-  });
+// Table with custom column formatting
+var CustomColumnFormatting = exports.CustomColumnFormatting = Template.bind({});
+CustomColumnFormatting.args = {
+  records: sampleRecords,
+  columnConfigs: [{
+    name: 'Employee Name',
+    sortable: true,
+    cell: function cell(row) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        },
+        className: "tbl-content"
+      }, /*#__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: 'Email',
+    selector: function selector(row) {
+      return row.email;
+    },
+    cell: function cell(row) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "tbl-content"
+      }, row.email);
+    },
+    sortable: true,
+    width: '250px'
+  }, {
+    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: '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'
+  }],
+  paginationType: 'CLIENT',
+  pagination: true,
+  customClassName: 'custom-table'
 };
-var ExpandedTable = exports.ExpandedTable = function ExpandedTable() {
-  return /*#__PURE__*/_react["default"].createElement(_Table["default"], {
-    records: _Constants.TODOS,
-    columnConfigs: getTodosColumnConfigs(),
-    isExpandableTable: true,
-    ExpandedRowComponent: TODODetail
-  });
+
+// Table with different pagination positions
+var BottomPagination = exports.BottomPagination = Template.bind({});
+BottomPagination.args = {
+  records: sampleRecords,
+  columnConfigs: basicColumnConfigs,
+  paginationType: 'CLIENT',
+  pagination: true,
+  customClassName: 'custom-table bottom-pagination'
 };
-var TableWithSearch = exports.TableWithSearch = function TableWithSearch() {
-  var _useState3 = (0, _react.useState)(""),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchBy = _useState4[0],
-    setSearchBy = _useState4[1];
-  var onSearchChange = function onSearchChange(value) {
-    setSearchBy(value);
-  };
-  var getRequestKeys = (0, _react.useCallback)(function () {
+
+// Server-side table with posts data
+var ServerSidePagination = exports.ServerSidePagination = function ServerSidePagination() {
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedRows = _useState6[0],
+    setSelectedRows = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    refreshTrigger = _useState8[0],
+    setRefreshTrigger = _useState8[1];
+  var responseFormatter = function responseFormatter(response) {
     return {
-      searchBy: "title"
+      entries: response || [],
+      total: response ? 30 : 0
     };
-  });
-  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_Form.Input, {
-    name: "searchBy",
-    onChange: onSearchChange
-  }), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
-    records: _Constants.TODOS,
-    searchBy: searchBy,
-    getRequestKeys: getRequestKeys,
-    columnConfigs: getTodosColumnConfigs()
+  };
+  var handleRefresh = function handleRefresh() {
+    setRefreshTrigger(!refreshTrigger);
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Server-Side Posts Table"), /*#__PURE__*/_react["default"].createElement("p", null, "This table fetches posts data from JSONPlaceholder API with custom formatting."), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '1rem',
+      alignItems: 'center',
+      marginTop: '8px'
+    }
+  }, selectedRows.length > 0 && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      fontSize: '14px',
+      color: '#666'
+    }
+  }, "Selected: ", selectedRows.length, " post(s)"))), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    columnConfigs: postsColumnConfigs,
+    paginationType: "SERVER",
+    pagination: true,
+    showSelectableRows: true,
+    setSelectedRow: setSelectedRows,
+    CheckBoxRow: CustomCheckBoxRow,
+    refreshData: refreshTrigger,
+    customClassName: "custom-table",
+    apiInfo: {
+      pageNoKey: '_page',
+      perPageKey: '_limit',
+      searchBy: 'q',
+      requestId: 'getPosts',
+      responseFormatter: responseFormatter
+    },
+    onApiError: function onApiError(error) {
+      return console.error('API Error:', error);
+    }
+  }));
+};
+
+// Table with refresh functionality
+var RefreshTable = exports.RefreshTable = function RefreshTable() {
+  var _useState9 = (0, _react.useState)(sampleRecords),
+    _useState0 = _slicedToArray(_useState9, 2),
+    data = _useState0[0],
+    setData = _useState0[1];
+  var _useState1 = (0, _react.useState)(0),
+    _useState10 = _slicedToArray(_useState1, 2),
+    refreshCount = _useState10[0],
+    setRefreshCount = _useState10[1];
+  var handleRefresh = function handleRefresh() {
+    setRefreshCount(function (prev) {
+      return prev + 1;
+    });
+    // Simulate data refresh
+    setData([].concat(sampleRecords).sort(function () {
+      return Math.random() - 0.5;
+    }));
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: handleRefresh,
+    style: {
+      padding: '8px 16px',
+      backgroundColor: '#28a745',
+      color: 'white',
+      border: 'none',
+      borderRadius: '4px',
+      cursor: 'pointer'
+    }
+  }, "Refresh Data (Refresh Count: ", refreshCount, ")")), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    records: data,
+    columnConfigs: basicColumnConfigs,
+    paginationType: "CLIENT",
+    pagination: true,
+    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"
   }));
 };
-var TableWithoutPaginationBar = exports.TableWithoutPaginationBar = function TableWithoutPaginationBar() {
-  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
-    records: _Constants.TODOS,
-    showPaginateBar: false,
-    columnConfigs: getTodosColumnConfigs()
+
+// 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"
   }));
 };
-var ServerSideTable = exports.ServerSideTable = function ServerSideTable() {
-  var _useState5 = (0, _react.useState)(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchBy = _useState6[0],
-    setSearchBy = _useState6[1];
-  _dataLoader["default"].addRequestConfig("getUsers", {
-    method: "GET",
-    url: "https://reqres.in/api/users"
-  });
-  var onSearchChange = function onSearchChange(value) {
-    setSearchBy(value);
+
+// 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")));
   };
-  var responseFormatter = function responseFormatter(response) {
-    return _objectSpread(_objectSpread({}, response), {}, {
-      entries: response.data
+  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(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_Form.Input, {
-    name: "searchBy",
-    onChange: onSearchChange
-  }), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
-    searchBy: searchBy,
+  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",
-    requestId: "getUsers",
-    perPageKey: "per_page",
-    responseFormatter: responseFormatter,
-    columnConfigs: getUsersColumnConfigs()
+    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);
+    }
   }));
 };
-var _default = exports["default"] = {
-  title: "Table",
-  parameters: {
-    info: {
-      propTablesExclude: [ServerSideTable]
+
+// 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'
+    }
+  }));
 };