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

package/components/Table/Table.stories.js

@@ -0,0 +1,898 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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;
+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 _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; } }
+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; }
+// 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'
+    }
+  });
+};
+
+// 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);
+  }
+}];
+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'
+    },
+    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'
+    },
+    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'
+};
+
+// 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'
+};
+
+// Table with custom no data component
+var CustomNoDataComponent = exports.CustomNoDataComponent = function CustomNoDataComponent() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasData = _useState2[0],
+    setHasData = _useState2[1];
+  var CustomNoData = function CustomNoData(_ref2) {
+    var description = _ref2.description,
+      heading = _ref2.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(_ref3) {
+    var description = _ref3.description,
+      heading = _ref3.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(_ref4) {
+    var description = _ref4.description,
+      heading = _ref4.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'
+    }
+  }, /*#__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);
+  };
+
+  // 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'
+    }
+  }, /*#__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);
+    }
+  }));
+};
+
+// 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'
+};
+
+// 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'
+};
+
+// 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 {
+      entries: response || [],
+      total: response ? 30 : 0
+    };
+  };
+  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"
+  }));
+};