@gobolt/genesis 0.2.21 → 0.3.0

package/dist/components/Table/TableControls/PaginationNumber.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import Typography from "../../Typography/Typography.js";
+const NumberButton = styled.button`
+  background: ${({ $active, theme }) => $active ? theme.colors.primary.default.backgroundColor : "transparent"};
+  color: ${({ $active, theme }) => $active ? "#fff" : theme.colors.onsurface["copy-light"] || "#6C6C6C"};
+  border: none;
+  border-radius: 4px;
+  min-width: 24px;
+  height: 24px;
+  padding: 4px 7px;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 4px;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ $active, theme }) => $active ? theme.colors.primary.default.backgroundColor : theme.colors.primary.default.backgroundColor + "22"};
+    color: #fff;
+  }
+`;
+const PaginationNumber = ({
+  active,
+  children,
+  ...properties
+}) => /* @__PURE__ */ jsx(
+  NumberButton,
+  {
+    $active: active,
+    "aria-current": active ? "page" : void 0,
+    ...properties,
+    children: /* @__PURE__ */ jsx(Typography, { variant: "digits3", color: active ? "white" : "#6C6C6C", children })
+  }
+);
+export {
+  PaginationNumber
+};

package/dist/components/Table/TableControls/PrimaryTableControlsRow.cjs

@@ -3,7 +3,6 @@ var jsxRuntime = require("react/jsx-runtime");
 var index$1 = require("../../../node_modules/react-icons/hi2/index.cjs");
 var index = require("../../../node_modules/react-icons/hi/index.cjs");
 var index$2 = require("../../../node_modules/react-icons/fi/index.cjs");
-var index$3 = require("../../../_virtual/index6.cjs");
 var Input = require("../../Input/Input.cjs");
 var UtilityButton = require("../../Button/UtilityButton.cjs");
 var Typography = require("../../Typography/Typography.cjs");
@@ -14,22 +13,16 @@ const PrimaryTableControlsRow = ({
   searchByPlaceholder = "",
   searchField = "address",
   isSortedAscending = true,
+  searchValue = "",
+  selectedSortOption = "",
   onChange
 }) => {
-  const onInputChange = (event) => {
-    const inputValue = event.target.value;
-    const inputActionEvent = {
-      event: "inputChange",
-      payload: { value: inputValue, field: searchField }
-    };
-    const debounceInput = index$3(() => {
-      onChange == null ? void 0 : onChange(inputActionEvent);
-    }, 200);
-    debounceInput();
+  const onInputChange = (actionEvent) => {
+    onChange == null ? void 0 : onChange(actionEvent);
   };
   const onSortChange = (value) => {
     const sortActionEvent = {
-      event: "primaryChange",
+      event: "primarySortChange",
       payload: { value }
     };
     onChange == null ? void 0 : onChange(sortActionEvent);
@@ -65,10 +58,11 @@ const PrimaryTableControlsRow = ({
         justifyContent: "space-between",
         alignItems: "center",
         width: "100%",
-        minWidth: 800
+        minWidth: 800,
+        marginBottom: 16
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
@@ -78,45 +72,86 @@ const PrimaryTableControlsRow = ({
               style: {
                 padding: "5px 8px"
               },
+              value: searchValue,
               onChange: onInputChange
             }
           ),
-          onFilterClick && /* @__PURE__ */ jsxRuntime.jsx(
+          onFilterClick && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
             UtilityButton,
             {
               isIconButton: true,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(index$1.HiMiniAdjustmentsVertical, {}),
+              icon: /* @__PURE__ */ jsxRuntime.jsx(index$1.HiMiniAdjustmentsVertical, { color: "#222222" }),
               onClick: onFilterClick
             }
-          ),
-          onSettingsClick && /* @__PURE__ */ jsxRuntime.jsx(
+          ) }),
+          onSettingsClick && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
             UtilityButton,
             {
               isIconButton: true,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(index$2.FiSettings, {}),
+              icon: /* @__PURE__ */ jsxRuntime.jsx(index$2.FiSettings, { color: "#222222" }),
               onClick: onSettingsClick
             }
-          )
+          ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body3", color: "#6C6C6C", children: "Sort by" }),
-          sortOptions && onSortChange ? /* @__PURE__ */ jsxRuntime.jsx(
-            Select,
-            {
-              options: sortOptions,
-              defaultValue: sortOptions[0].value,
-              variant: "simple",
-              onChange: onSortChange
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            IconButton,
-            {
-              icon: isSortedAscending ? /* @__PURE__ */ jsxRuntime.jsx(index.HiOutlineSortDescending, {}) : /* @__PURE__ */ jsxRuntime.jsx(index.HiOutlineSortAscending, {}),
-              onClick: onOrderClick
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              width: 300,
+              justifyContent: "flex-end",
+              marginLeft: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Typography,
+                {
+                  variant: "body1",
+                  color: "#6C6C6C",
+                  style: {
+                    width: 70,
+                    flexShrink: 0,
+                    textAlign: "right",
+                    paddingRight: 4,
+                    marginRight: 8
+                  },
+                  children: "Sort by"
+                }
+              ),
+              sortOptions && onSortChange ? /* @__PURE__ */ jsxRuntime.jsx(
+                Select,
+                {
+                  options: sortOptions,
+                  defaultValue: sortOptions[0].value,
+                  value: selectedSortOption,
+                  variant: "simple",
+                  onChange: onSortChange,
+                  style: {
+                    width: 180,
+                    flexShrink: 0
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    marginLeft: 8,
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    IconButton,
+                    {
+                      icon: isSortedAscending ? /* @__PURE__ */ jsxRuntime.jsx(index.HiOutlineSortDescending, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(index.HiOutlineSortAscending, { size: 20 }),
+                      onClick: onOrderClick
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );

package/dist/components/Table/TableControls/PrimaryTableControlsRow.d.ts

@@ -11,6 +11,8 @@ export interface PrimaryTableControlsRowProps {
     searchField?: string;
     isSortedAscending?: boolean;
     onChange?: Change;
+    searchValue?: string;
+    selectedSortOption?: string;
 }
-declare const PrimaryTableControlsRow: ({ sortOptions, searchByPlaceholder, searchField, isSortedAscending, onChange, }: PrimaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const PrimaryTableControlsRow: ({ sortOptions, searchByPlaceholder, searchField, isSortedAscending, searchValue, selectedSortOption, onChange, }: PrimaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
 export default PrimaryTableControlsRow;

package/dist/components/Table/TableControls/PrimaryTableControlsRow.js

@@ -2,7 +2,6 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { HiMiniAdjustmentsVertical } from "../../../node_modules/react-icons/hi2/index.js";
 import { HiSearch, HiOutlineSortDescending, HiOutlineSortAscending } from "../../../node_modules/react-icons/hi/index.js";
 import { FiSettings } from "../../../node_modules/react-icons/fi/index.js";
-import debounce from "../../../_virtual/index6.js";
 import Input from "../../Input/Input.js";
 import UtilityButton from "../../Button/UtilityButton.js";
 import Typography from "../../Typography/Typography.js";
@@ -13,22 +12,16 @@ const PrimaryTableControlsRow = ({
   searchByPlaceholder = "",
   searchField = "address",
   isSortedAscending = true,
+  searchValue = "",
+  selectedSortOption = "",
   onChange
 }) => {
-  const onInputChange = (event) => {
-    const inputValue = event.target.value;
-    const inputActionEvent = {
-      event: "inputChange",
-      payload: { value: inputValue, field: searchField }
-    };
-    const debounceInput = debounce(() => {
-      onChange == null ? void 0 : onChange(inputActionEvent);
-    }, 200);
-    debounceInput();
+  const onInputChange = (actionEvent) => {
+    onChange == null ? void 0 : onChange(actionEvent);
   };
   const onSortChange = (value) => {
     const sortActionEvent = {
-      event: "primaryChange",
+      event: "primarySortChange",
       payload: { value }
     };
     onChange == null ? void 0 : onChange(sortActionEvent);
@@ -64,10 +57,11 @@ const PrimaryTableControlsRow = ({
         justifyContent: "space-between",
         alignItems: "center",
         width: "100%",
-        minWidth: 800
+        minWidth: 800,
+        marginBottom: 16
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex" }, children: [
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -77,45 +71,86 @@ const PrimaryTableControlsRow = ({
               style: {
                 padding: "5px 8px"
               },
+              value: searchValue,
               onChange: onInputChange
             }
           ),
-          onFilterClick && /* @__PURE__ */ jsx(
+          onFilterClick && /* @__PURE__ */ jsx("div", { style: { marginLeft: 16 }, children: /* @__PURE__ */ jsx(
             UtilityButton,
             {
               isIconButton: true,
-              icon: /* @__PURE__ */ jsx(HiMiniAdjustmentsVertical, {}),
+              icon: /* @__PURE__ */ jsx(HiMiniAdjustmentsVertical, { color: "#222222" }),
               onClick: onFilterClick
             }
-          ),
-          onSettingsClick && /* @__PURE__ */ jsx(
+          ) }),
+          onSettingsClick && /* @__PURE__ */ jsx("div", { style: { marginLeft: 16 }, children: /* @__PURE__ */ jsx(
             UtilityButton,
             {
               isIconButton: true,
-              icon: /* @__PURE__ */ jsx(FiSettings, {}),
+              icon: /* @__PURE__ */ jsx(FiSettings, { color: "#222222" }),
               onClick: onSettingsClick
             }
-          )
+          ) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body3", color: "#6C6C6C", children: "Sort by" }),
-          sortOptions && onSortChange ? /* @__PURE__ */ jsx(
-            Select,
-            {
-              options: sortOptions,
-              defaultValue: sortOptions[0].value,
-              variant: "simple",
-              onChange: onSortChange
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              icon: isSortedAscending ? /* @__PURE__ */ jsx(HiOutlineSortDescending, {}) : /* @__PURE__ */ jsx(HiOutlineSortAscending, {}),
-              onClick: onOrderClick
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              width: 300,
+              justifyContent: "flex-end",
+              marginLeft: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body1",
+                  color: "#6C6C6C",
+                  style: {
+                    width: 70,
+                    flexShrink: 0,
+                    textAlign: "right",
+                    paddingRight: 4,
+                    marginRight: 8
+                  },
+                  children: "Sort by"
+                }
+              ),
+              sortOptions && onSortChange ? /* @__PURE__ */ jsx(
+                Select,
+                {
+                  options: sortOptions,
+                  defaultValue: sortOptions[0].value,
+                  value: selectedSortOption,
+                  variant: "simple",
+                  onChange: onSortChange,
+                  style: {
+                    width: 180,
+                    flexShrink: 0
+                  }
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginLeft: 8,
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: isSortedAscending ? /* @__PURE__ */ jsx(HiOutlineSortDescending, { size: 20 }) : /* @__PURE__ */ jsx(HiOutlineSortAscending, { size: 20 }),
+                      onClick: onOrderClick
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );

package/dist/components/Table/TableControls/SecondaryTableControlsRow.cjs

@@ -2,10 +2,12 @@
 var jsxRuntime = require("react/jsx-runtime");
 var iconUtil = require("../../../utils/icon-util.cjs");
 var Typography = require("../../Typography/Typography.cjs");
+var Tooltip = require("../../Tooltip/Tooltip.cjs");
 var Badge = require("../../Badge/Badge.cjs");
 const GroupItem = ({ title, items, onGroupItemClick }) => {
+  if (items.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tip: title, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
@@ -17,7 +19,7 @@ const GroupItem = ({ title, items, onGroupItemClick }) => {
         },
         children: iconUtil.getIcon(title)
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       Badge,
       {
@@ -33,11 +35,11 @@ const GroupItem = ({ title, items, onGroupItemClick }) => {
 };
 const GroupsRow = ({ groups, onGroupItemClick }) => {
   if (!groups) return null;
-  const groupArr = Object.entries(groups).map(([title, items]) => ({
+  const groupArray = Object.entries(groups).map(([title, items]) => ({
     title,
     items
   }));
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: groupArr.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: groupArray.length > 0 ? groupArray.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
     GroupItem,
     {
       title: group.title,
@@ -45,7 +47,7 @@ const GroupsRow = ({ groups, onGroupItemClick }) => {
       onGroupItemClick
     },
     group.title
-  )) });
+  )) : null });
 };
 const SecondaryTableControlsRow = ({
   groups,
@@ -70,7 +72,7 @@ const SecondaryTableControlsRow = ({
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(GroupsRow, { groups, onGroupItemClick }),
-        totalRecords ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
+        totalRecords > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
       ]
     }
   );

package/dist/components/Table/TableControls/SecondaryTableControlsRow.js

@@ -1,10 +1,12 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { getIcon } from "../../../utils/icon-util.js";
 import Typography from "../../Typography/Typography.js";
+import Tooltip from "../../Tooltip/Tooltip.js";
 import Badge from "../../Badge/Badge.js";
 const GroupItem = ({ title, items, onGroupItemClick }) => {
+  if (items.length === 0) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Tooltip, { tip: title, children: /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -16,7 +18,7 @@ const GroupItem = ({ title, items, onGroupItemClick }) => {
         },
         children: getIcon(title)
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => /* @__PURE__ */ jsx(
       Badge,
       {
@@ -32,11 +34,11 @@ const GroupItem = ({ title, items, onGroupItemClick }) => {
 };
 const GroupsRow = ({ groups, onGroupItemClick }) => {
   if (!groups) return null;
-  const groupArr = Object.entries(groups).map(([title, items]) => ({
+  const groupArray = Object.entries(groups).map(([title, items]) => ({
     title,
     items
   }));
-  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: groupArr.map((group) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: groupArray.length > 0 ? groupArray.map((group) => /* @__PURE__ */ jsx(
     GroupItem,
     {
       title: group.title,
@@ -44,7 +46,7 @@ const GroupsRow = ({ groups, onGroupItemClick }) => {
       onGroupItemClick
     },
     group.title
-  )) });
+  )) : null });
 };
 const SecondaryTableControlsRow = ({
   groups,
@@ -69,7 +71,7 @@ const SecondaryTableControlsRow = ({
       },
       children: [
         /* @__PURE__ */ jsx(GroupsRow, { groups, onGroupItemClick }),
-        totalRecords ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
+        totalRecords > 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null
       ]
     }
   );

package/dist/components/Table/TableControls/TableControls.cjs

@@ -20,7 +20,9 @@ const TableControls = ({
         sortOptions: primaryTableRowData.sortOptions,
         searchByPlaceholder: primaryTableRowData.searchByPlaceholder,
         isSortedAscending: primaryTableRowData.isSortedAscending,
-        onChange: onPrimaryChange
+        onChange: onPrimaryChange,
+        searchValue: primaryTableRowData.searchValue,
+        selectedSortOption: primaryTableRowData.selectedSortOption
       }
     ),
     secondaryTableRowData ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/Table/TableControls/TableControls.js

@@ -19,7 +19,9 @@ const TableControls = ({
         sortOptions: primaryTableRowData.sortOptions,
         searchByPlaceholder: primaryTableRowData.searchByPlaceholder,
         isSortedAscending: primaryTableRowData.isSortedAscending,
-        onChange: onPrimaryChange
+        onChange: onPrimaryChange,
+        searchValue: primaryTableRowData.searchValue,
+        selectedSortOption: primaryTableRowData.selectedSortOption
       }
     ),
     secondaryTableRowData ? /* @__PURE__ */ jsx(

package/dist/components/Table/TableControls/__stories__/CustomPaginationStandalone.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as CustomPagination } from '../CustomPagination';
+declare const meta: Meta<typeof CustomPagination>;
+export default meta;
+type Story = StoryObj<typeof CustomPagination>;
+export declare const Simple: Story;
+export declare const Truncated: Story;
+export declare const Centered: Story;
+export declare const EndFocused: Story;

package/dist/components/Table/TableControls/__stories__/PaginationNumber.stories.d.ts

@@ -0,0 +1,7 @@
+import { PaginationNumber } from '../PaginationNumber';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof PaginationNumber>;
+export default meta;
+type Story = StoryObj<typeof PaginationNumber>;
+export declare const ActiveAndInactive: Story;
+export declare const Interactive: Story;

package/dist/components/Table/TableControls/styles.d.ts

@@ -1,5 +1,5 @@
 import { GenesisTheme } from '../../../styles/theme/genesis-theme.types';
-interface StyledTableControlsProps {
+interface StyledTableControlsProperties {
     theme?: GenesisTheme;
     type?: "primary" | "secondary";
     state?: "active" | "disabled";
@@ -9,5 +9,5 @@ export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
     borderRadius: any;
     sizing: any;
 }, type?: string, state?: string) => string;
-export declare const StyledTableControls: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTableControlsProps>> & string;
+export declare const StyledTableControls: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTableControlsProperties>> & string;
 export {};

package/dist/components/Table/TablePagination.cjs

@@ -0,0 +1,51 @@
+"use strict";
+var jsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+var Table = require("./Table.cjs");
+var CustomPagination = require("./TableControls/CustomPagination.cjs");
+const TablePagination = ({
+  columns,
+  dataSource,
+  rowSelection,
+  onChange,
+  paginationStyle = CustomPagination.PaginationStyle.SIMPLE,
+  pageSize = 10,
+  isMainContentCell
+}) => {
+  const [current, setCurrent] = React.useState(1);
+  const total = dataSource.length;
+  const paginatedData = dataSource.slice(
+    (current - 1) * pageSize,
+    current * pageSize
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Table,
+      {
+        columns,
+        dataSource: paginatedData,
+        rowSelection,
+        onChange,
+        pagination: false,
+        isMainContentCell
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: { display: "flex", justifyContent: "flex-end", marginTop: 16 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          CustomPagination.default,
+          {
+            paginationStyle,
+            current,
+            total,
+            pageSize,
+            onChange: setCurrent
+          }
+        )
+      }
+    )
+  ] });
+};
+module.exports = TablePagination;

package/dist/components/Table/TablePagination.d.ts

@@ -0,0 +1,13 @@
+import { PaginationStyle } from './TableControls/CustomPagination';
+import { ColumnType } from 'antd/es/table';
+export interface TablePaginationProps<T> {
+    columns: ColumnType<T>[];
+    dataSource: T[];
+    rowSelection?: any;
+    onChange?: (...arguments_: any[]) => void;
+    paginationStyle?: PaginationStyle;
+    pageSize?: number;
+    isMainContentCell?: boolean;
+}
+declare const TablePagination: <T extends Record<string, any>>({ columns, dataSource, rowSelection, onChange, paginationStyle, pageSize, isMainContentCell, }: TablePaginationProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TablePagination;

package/dist/components/Table/TablePagination.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Table from "./Table.js";
+import CustomPagination, { PaginationStyle } from "./TableControls/CustomPagination.js";
+const TablePagination = ({
+  columns,
+  dataSource,
+  rowSelection,
+  onChange,
+  paginationStyle = PaginationStyle.SIMPLE,
+  pageSize = 10,
+  isMainContentCell
+}) => {
+  const [current, setCurrent] = useState(1);
+  const total = dataSource.length;
+  const paginatedData = dataSource.slice(
+    (current - 1) * pageSize,
+    current * pageSize
+  );
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0px" }, children: [
+    /* @__PURE__ */ jsx(
+      Table,
+      {
+        columns,
+        dataSource: paginatedData,
+        rowSelection,
+        onChange,
+        pagination: false,
+        isMainContentCell
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { display: "flex", justifyContent: "flex-end", marginTop: 16 },
+        children: /* @__PURE__ */ jsx(
+          CustomPagination,
+          {
+            paginationStyle,
+            current,
+            total,
+            pageSize,
+            onChange: setCurrent
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  TablePagination as default
+};