feat(Table): new component

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.16.5](https://github.com/softconstruct/gene-ui-components/compare/v2.16.4...v2.16.5) (2025-01-09)
+
+
+### Bug Fixes
+
+* **SuggestionList:** add optional chaining ([#244](https://github.com/softconstruct/gene-ui-components/issues/244)) ([71a02cf](https://github.com/softconstruct/gene-ui-components/commit/71a02cf250fb518cef06ee51791931020f674977))
+
 ## [2.16.4](https://github.com/softconstruct/gene-ui-components/compare/v2.16.3...v2.16.4) (2024-10-29)
 
 

package.json

@@ -88,6 +88,7 @@
         "@types/enzyme": "^3.10.18",
         "@types/enzyme-adapter-react-16": "^1.0.9",
         "@types/jest": "^29.5.11",
+        "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.3.1",
         "@types/react-is": "^18.3.0",
         "@types/react-virtualized": "^9.22.0",
@@ -175,10 +176,13 @@
         "@floating-ui/utils": "^0.2.8",
         "@geneui/icons": "^1.4.3",
         "@geneui/tokens": "^1.0.2",
+        "@tanstack/react-table": "^8.21.3",
         "@tanstack/react-virtual": "^3.13.12",
+        "@tanstack/table-core": "^8.21.3",
         "classnames": "^2.3.2",
         "nanoid": "^5.1.6",
         "qrcode.react": "^4.2.0",
+        "react-beautiful-dnd": "^13.1.1",
         "react-is": "^17.0.2",
         "react-scrollbars-custom": "^4.1.1"
     },

src/components/molecules/Pagination/Pagination.stories.tsx

@@ -12,6 +12,8 @@ const meta: Meta<IPaginationProps> = {
     argTypes: {
         current: args({ control: "text", ...propCategory.content }),
         rowsPerPageOptions: args({ control: "array", ...propCategory.content }),
+        totalItems: args({ control: "number", ...propCategory.content }),
+        currentPageItemsLength: args({ control: "number", ...propCategory.content }),
         totalPages: args({ control: "number", ...propCategory.content }),
         className: args({ control: "false", ...propCategory.appearance }),
         onPageChange: args({ control: "false", ...propCategory.action }),
@@ -26,6 +28,8 @@ const meta: Meta<IPaginationProps> = {
     args: {
         current: 30,
         rowsPerPageOptions: [10, 20, 30, 40],
+        currentPageItemsLength: 20,
+        totalItems: 300,
         totalPages: 25
     }
 };

src/components/molecules/Pagination/Pagination.test.tsx

@@ -101,7 +101,7 @@ describe("Pagination", () => {
         // Check if the text indicating the page range contains the custom label.
         const perPageValuesText = setup.find(".pagination__perpage_values").text();
         expect(perPageValuesText).toContain(customLabel);
-        // Example assertion: "10 of 20"
+        // Example assertion: "10 of 10"
         expect(perPageValuesText).toBe(`10 ${customLabel} 10`);
     });
 

src/components/molecules/Pagination/Pagination.tsx

@@ -200,7 +200,8 @@ const Pagination: FC<IPaginationProps> = ({
                     </div>
 
                     <div className="pagination__perpage_values">
-                        <span>{currentPageSize}</span> {pageSizeOfLabel} <span>{totalPages}</span>
+                        <span>{currentPageSize}</span> {pageSizeOfLabel}{" "}
+                        <span className="pagination__perpage_totalItems">{totalPages}</span>
                     </div>
                 </div>
             )}