Table component page

package.json

@@ -32,9 +32,9 @@
     "@fortawesome/react-fontawesome": "0.2.2",
     "@hookform/resolvers": "4.1.3",
     "@react-spring/web": "9.7.5",
-    "@tailwindcss/vite": "4.0.15",
-    "@tanstack/react-query": "5.69.0",
-    "@tanstack/react-query-devtools": "5.69.0",
+    "@tailwindcss/vite": "4.0.17",
+    "@tanstack/react-query": "5.71.1",
+    "@tanstack/react-query-devtools": "5.71.1",
     "@tanstack/react-table": "8.21.2",
     "axios": "1.8.4",
     "class-variance-authority": "0.7.1",
@@ -46,26 +46,26 @@
     "qs": "6.14.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-hook-form": "7.54.2",
+    "react-hook-form": "7.55.0",
     "react-i18next": "15.4.1",
-    "react-router-dom": "7.4.0",
+    "react-router-dom": "7.4.1",
     "recharts": "2.15.1",
     "tailwind-merge": "3.0.2",
-    "tailwindcss": "4.0.15",
+    "tailwindcss": "4.0.17",
     "uuid": "11.1.0",
     "yup": "1.6.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.6",
     "@eslint/js": "9.23.0",
-    "@storybook/addon-essentials": "8.6.8",
-    "@storybook/addon-interactions": "8.6.8",
-    "@storybook/addon-onboarding": "8.6.8",
-    "@storybook/addon-themes": "8.6.8",
-    "@storybook/blocks": "8.6.8",
-    "@storybook/react": "8.6.8",
-    "@storybook/react-vite": "8.6.8",
-    "@storybook/test": "8.6.8",
+    "@storybook/addon-essentials": "8.6.11",
+    "@storybook/addon-interactions": "8.6.11",
+    "@storybook/addon-onboarding": "8.6.11",
+    "@storybook/addon-themes": "8.6.11",
+    "@storybook/blocks": "8.6.11",
+    "@storybook/react": "8.6.11",
+    "@storybook/react-vite": "8.6.11",
+    "@storybook/test": "8.6.11",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
@@ -76,21 +76,21 @@
     "@types/react-dom": "18.3.1",
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-v8": "3.0.9",
+    "@vitest/coverage-v8": "3.1.1",
     "eslint": "9.23.0",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.19",
-    "eslint-plugin-storybook": "0.11.6",
+    "eslint-plugin-storybook": "0.12.0",
     "globals": "16.0.0",
     "jsdom": "26.0.0",
     "msw": "2.7.3",
     "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "0.6.11",
     "rimraf": "6.0.1",
-    "storybook": "8.6.8",
+    "storybook": "8.6.11",
     "typescript": "5.8.2",
-    "typescript-eslint": "8.27.0",
-    "vite": "6.2.2",
-    "vitest": "3.0.9"
+    "typescript-eslint": "8.29.0",
+    "vite": "6.2.4",
+    "vitest": "3.1.1"
   }
 }

src/common/components/Router/Router.tsx

@@ -46,6 +46,7 @@ const SearchInputComponents = lazy(
 const SelectComponents = lazy(() => import('pages/Components/components/SelectComponents'));
 const SkeletonComponents = lazy(() => import('pages/Components/components/SkeletonComponents'));
 const SpinnerComponents = lazy(() => import('pages/Components/components/SpinnerComponents'));
+const TableComponents = lazy(() => import('pages/Components/components/TableComponents'));
 const TabsComponents = lazy(() => import('pages/Components/components/TabsComponents'));
 const TextComponents = lazy(() => import('pages/Components/components/TextComponents'));
 const TextareaComponents = lazy(() => import('pages/Components/components/TextareaComponents'));
@@ -191,6 +192,10 @@ export const routes: RouteObject[] = [
                 path: 'spinner',
                 element: withSuspense(<SpinnerComponents />),
               },
+              {
+                path: 'table',
+                element: withSuspense(<TableComponents />),
+              },
               {
                 path: 'tabs',
                 element: withSuspense(<TabsComponents />),

src/common/components/Table/Table.tsx

@@ -11,28 +11,28 @@ import { BaseComponentProps } from 'common/utils/types';
  * which are used to populate the rows of the table.
  * @see {@link BaseComponentProps}
  */
-export interface TableProps<TData = unknown, TValue = unknown> extends BaseComponentProps {
-  columns: ColumnDef<TData, TValue>[];
+export interface TableProps<TData = unknown> extends BaseComponentProps {
+  columns: ColumnDef<TData>[];
   data: TData[];
 }
 
 /**
  * The `Table` component renders a `table` element using the column definitions
  * and data supplied in the properties.
- *
- * Uses TanStack Table.
- * @template TData - The type of the table data object.
- * @param {TableProps} props - Component properteis.
- * @returns {JSX.Element} JSX
- * @see {@link https://tanstack.com/table/latest TanStack Table}
+ * This component is built using the `@tanstack/react-table` library.
+ * It provides a simple and flexible way to display tabular data in a React application.
  */
-const Table = <TData, TValue>({
+const Table = <TData,>({
   className,
   columns,
   data,
   testId = 'table',
-}: TableProps<TData, TValue>): JSX.Element => {
-  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+}: TableProps<TData>): JSX.Element => {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
 
   return (
     <table
@@ -66,6 +66,22 @@ const Table = <TData, TValue>({
           </tr>
         ))}
       </tbody>
+      <tfoot>
+        {table.getFooterGroups().map((footerGroup) => (
+          <tr key={footerGroup.id}>
+            {footerGroup.headers.map((header) => (
+              <th
+                key={header.id}
+                className="border-t border-neutral-400/10 py-2 pr-2 font-semibold"
+              >
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(header.column.columnDef.footer, header.getContext())}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </tfoot>
     </table>
   );
 };

src/common/components/Table/__stories__/Table.stories.tsx

@@ -48,7 +48,7 @@ const decoratedTableColumns = [
   columnHelper.accessor('value', {
     header: () => 'Value',
   }),
-];
+] as ColumnDef<TableData>[];
 
 // the data to populate the table
 const myTableData: TableData[] = [
@@ -70,10 +70,7 @@ export const Simple: Story = {
   },
   render: ({ columns, data }) => {
     return (
-      <Table<TableData, string>
-        columns={columns as ColumnDef<TableData, string>[]}
-        data={data as TableData[]}
-      />
+      <Table<TableData> columns={columns as ColumnDef<TableData>[]} data={data as TableData[]} />
     );
   },
 };
@@ -86,10 +83,7 @@ export const DecoratedColumns: Story = {
   },
   render: ({ columns, data }) => {
     return (
-      <Table<TableData, string>
-        columns={columns as ColumnDef<TableData, string>[]}
-        data={data as TableData[]}
-      />
+      <Table<TableData> columns={columns as ColumnDef<TableData>[]} data={data as TableData[]} />
     );
   },
 };

src/common/components/Table/__tests__/Table.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import { render, screen } from 'test/test-utils';
 import Table from '../Table';
 
@@ -32,11 +32,11 @@ describe('Table', () => {
       ],
     }),
     columnHelper.accessor('max', { cell: (info) => info.renderValue(), header: 'Max' }),
-  ];
+  ] as ColumnDef<Foo>[];
 
   it('should render successfully', async () => {
     // ARRANGE
-    render(<Table<Foo, number> data={data} columns={columns} />);
+    render(<Table<Foo> data={data} columns={columns} />);
     await screen.findByTestId('table');
 
     // ASSERT
@@ -45,7 +45,7 @@ describe('Table', () => {
 
   it('should use custom testId', async () => {
     // ARRANGE
-    render(<Table<Foo, number> data={data} columns={columns} testId="custom-testId" />);
+    render(<Table<Foo> data={data} columns={columns} testId="custom-testId" />);
     await screen.findByTestId('custom-testId');
 
     // ASSERT
@@ -54,7 +54,7 @@ describe('Table', () => {
 
   it('should use custom className', async () => {
     // ARRANGE
-    render(<Table<Foo, number> data={data} columns={columns} className="custom-className" />);
+    render(<Table<Foo> data={data} columns={columns} className="custom-className" />);
     await screen.findByTestId('table');
 
     // ASSERT

src/pages/Components/ComponentsPage.tsx

@@ -1,4 +1,5 @@
-import { Outlet } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import Page from 'common/components/Content/Page';
 import Container from 'common/components/Content/Container';
@@ -14,6 +15,12 @@ import Columns from 'common/components/Content/Columns';
  * @returns {JSX.Element} JSX
  */
 const ComponentsPage = (): JSX.Element => {
+  const location = useLocation();
+  // Scroll to top when the pathname changes
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [location.pathname]);
+
   return (
     <Page testId="page-components">
       <Container className="my-4 min-h-[50vh]">
@@ -94,6 +101,9 @@ const ComponentsPage = (): JSX.Element => {
             <MenuNavLink to="spinner" styleActive>
               Spinner
             </MenuNavLink>
+            <MenuNavLink to="table" styleActive>
+              Table
+            </MenuNavLink>
             <MenuNavLink to="tabs" styleActive>
               Tabs
             </MenuNavLink>

src/pages/Components/components/AccordionComponents.tsx

@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 
 import { BaseComponentProps } from 'common/utils/types';
 import { ComponentProperty } from '../model/components';
@@ -49,7 +49,7 @@ const AccordionComponents = ({
       cell: (info) => info.renderValue(),
       header: () => 'Description',
     }),
-  ];
+  ] as ColumnDef<ComponentProperty>[];
 
   return (
     <section className={className} data-testid={testId}>
@@ -67,7 +67,7 @@ const AccordionComponents = ({
           <Heading level={3} className="mb-2">
             Properties
           </Heading>
-          <Table<ComponentProperty, string> data={data} columns={columns} />
+          <Table<ComponentProperty> data={data} columns={columns} />
         </div>
 
         <Heading level={3} className="mb-2">

src/pages/Components/components/AlertComponents.tsx

@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 
 import { BaseComponentProps } from 'common/utils/types';
 import { ComponentProperty } from '../model/components';
@@ -45,7 +45,7 @@ const AlertComponents = ({
       cell: (info) => info.renderValue(),
       header: () => 'Description',
     }),
-  ];
+  ] as ColumnDef<ComponentProperty>[];
 
   return (
     <section className={className} data-testid={testId}>
@@ -63,7 +63,7 @@ const AlertComponents = ({
         <Heading level={3} className="mb-2">
           Properties
         </Heading>
-        <Table<ComponentProperty, string> data={data} columns={columns} />
+        <Table<ComponentProperty> data={data} columns={columns} />
       </div>
 
       <Heading level={3}>Examples</Heading>

src/pages/Components/components/AvatarComponents.tsx

@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 
 import { BaseComponentProps } from 'common/utils/types';
 import avatarPicture from './avatar-picture.png';
@@ -55,7 +55,7 @@ const AvatarComponents = ({
       cell: (info) => info.renderValue(),
       header: () => 'Description',
     }),
-  ];
+  ] as ColumnDef<ComponentProperty>[];
 
   return (
     <section className={className} data-testid={testId}>
@@ -73,7 +73,7 @@ const AvatarComponents = ({
         <Heading level={3} className="mb-2">
           Properties
         </Heading>
-        <Table<ComponentProperty, string> data={data} columns={columns} />
+        <Table<ComponentProperty> data={data} columns={columns} />
       </div>
 
       <Heading level={3}>Examples</Heading>

src/pages/Components/components/BadgeComponents.tsx

@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 
 import { BaseComponentProps } from 'common/utils/types';
 import { ComponentProperty } from '../model/components';
@@ -61,7 +61,7 @@ const BadgeComponents = ({
       cell: (info) => info.renderValue(),
       header: () => 'Description',
     }),
-  ];
+  ] as ColumnDef<ComponentProperty>[];
 
   return (
     <section className={className} data-testid={testId}>
@@ -79,7 +79,7 @@ const BadgeComponents = ({
         <Heading level={3} className="mb-2">
           Properties
         </Heading>
-        <Table<ComponentProperty, string> data={data} columns={columns} />
+        <Table<ComponentProperty> data={data} columns={columns} />
       </div>
 
       <Heading level={3}>Examples</Heading>

src/pages/Components/components/BreadcrumbsComponents.tsx

@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 
 import { BaseComponentProps } from 'common/utils/types';
 import { ComponentProperty } from '../model/components';
@@ -42,7 +42,7 @@ const BreadcrumbsComponents = ({
       cell: (info) => info.renderValue(),
       header: () => 'Description',
     }),
-  ];
+  ] as ColumnDef<ComponentProperty>[];
 
   return (
     <section className={className} data-testid={testId}>
@@ -60,7 +60,7 @@ const BreadcrumbsComponents = ({
           <Heading level={3} className="mb-2">
             Properties
           </Heading>
-          <Table<ComponentProperty, string> data={breadcrumbsData} columns={columns} />
+          <Table<ComponentProperty> data={breadcrumbsData} columns={columns} />
         </div>
 
         <Heading level={3} className="mb-2">