Fix pagination bug in Landing Page

GUI/src/components/ApiEndpointCard/Endpoints/RequestVariables/index.tsx

@@ -365,7 +365,7 @@ const RequestVariables: React.FC<RequestVariablesProps> = ({
             buildRawDataView()
           ) : (
             <>
-              <DataTable sortable={true} data={rowsData[tab as EndpointTab]} columns={columns} />
+              <DataTable sortable data={rowsData[tab as EndpointTab]} columns={columns} />
               <hr style={{ margin: 0, borderTop: "1px solid #D2D3D8" }} />
             </>
           )}

GUI/src/components/DataTable/PagesRow.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { Table } from "@tanstack/react-table";
+import clsx from 'clsx'
+
+interface PagesRowProps {
+  table: Table<any>;
+  setPageIndex: React.Dispatch<React.SetStateAction<number>>;
+  pagesShown?: number;
+}
+
+const PagesRow: React.FC<PagesRowProps> = ({ 
+  table,
+  setPageIndex,
+  pagesShown = 7,
+}) => {
+  const { t } = useTranslation();
+
+  const pages = useMemo(() => {
+    const current = table.getState().pagination.pageIndex;
+    const pages: number[] = [];
+    const lastShownPage = Math.min(table.getPageCount(), current + pagesShown);
+
+    pages.push(current);
+
+    for (; pages.length < Math.min(pagesShown, table.getPageCount());) {
+      if (pages[0] > 0) pages.unshift(pages[0] - 1);
+      if (pages[pages.length - 1] + 1 < lastShownPage) {
+        pages.push(pages[pages.length - 1] + 1);
+      }
+    }
+
+    return pages;
+  }, [pagesShown]);
+
+  return (
+    <nav role="navigation" aria-label={t('global.paginationNavigation') || ''}>
+      <ul className="links">
+        {pages.map((page, i) => {
+          if ((i === 0 && page !== 0) ||
+            (i === pagesShown - 1 && page !== table.getPageCount() - 1)) {
+            return <p key={page}>...</p>;
+          }
+          return (
+            <li
+              key={page}
+              className={clsx({ active: table.getState().pagination.pageIndex === page })}
+            >
+              <Link
+                to='#'
+                onClick={() => setPageIndex(page)}
+                aria-label={t('global.gotoPage') + page}
+                aria-current={table.getState().pagination.pageIndex === page}
+              >
+                {page + 1}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}
+
+export default PagesRow;

GUI/src/components/DataTable/TableFooter.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Table } from "@tanstack/react-table";
+import { MdOutlineEast, MdOutlineWest } from "react-icons/md";
+import PagesRow from "./PagesRow";
+
+interface TableFooterProps {
+  table: Table<any>;
+  setPageIndex: React.Dispatch<React.SetStateAction<number>>;
+  setPageSize: React.Dispatch<React.SetStateAction<number>>;
+  pageSizeOptions?: number[];
+}
+
+const TableFooter: React.FC<TableFooterProps> = ({
+  table,
+  setPageIndex,
+  setPageSize,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}) => {
+  const { t } = useTranslation();
+
+  const nextPage = () => setPageIndex(prev => prev + 1);
+  const previousPage = () => setPageIndex(prev => prev - 1);
+
+  const handlePageSizeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setPageSize(Number(e.target.value));
+    setTimeout(() => {
+      if(table.getState().pagination.pageIndex >= table.getPageCount()){
+        setPageIndex(table.getPageCount() - 1);
+      }
+    }, 0);
+  }
+
+  return (
+    <div className="data-table__pagination-wrapper">
+      {table.getPageCount() * table.getState().pagination.pageSize > table.getState().pagination.pageSize && (
+        <div className="data-table__pagination">
+          <button
+            className="previous"
+            onClick={previousPage}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <MdOutlineWest />
+          </button>
+          <PagesRow table={table} setPageIndex={setPageIndex} />
+          <button
+            className="next"
+            onClick={nextPage}
+            disabled={!table.getCanNextPage()}
+          >
+            <MdOutlineEast />
+          </button>
+        </div>
+      )}
+      <div className="data-table__page-size">
+        <label>{t('global.resultCount')}</label>
+        <select
+          value={table.getState().pagination.pageSize}
+          onChange={handlePageSizeChange}
+        >
+          {pageSizeOptions.map(pageSize => (
+            <option key={pageSize} value={pageSize}>
+              {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}
+
+export default TableFooter;

GUI/src/components/DataTable/TableHeader.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Icon, Track } from "@buerokratt-ria/header/src/header/components";
+import { ColumnDef, Table, flexRender } from "@tanstack/react-table";
+import { MdExpandLess, MdExpandMore, MdUnfoldMore } from "react-icons/md";
+import Filter from "./Filter";
+
+type ColumnMeta = {
+  meta: {
+    size: number | string
+  }
+}
+
+type CustomColumnDef = ColumnDef<any> & ColumnMeta;
+
+interface TableHeaderProps {
+  table: Table<any>;
+  sortable: boolean | undefined;
+  filterable: boolean | undefined;
+}
+
+const TableHeader: React.FC<TableHeaderProps> = ({ table, sortable, filterable }) => {
+  return <thead>
+    {table.getHeaderGroups().map((headerGroup) => (
+      <tr key={headerGroup.id}>
+        {headerGroup.headers.map((header) => (
+          <th key={header.id} style={{ width: (header.column.columnDef as CustomColumnDef).meta?.size }}>
+            {header.isPlaceholder ? null : (
+              <>
+                <Track gap={8}>
+                  {sortable && header.column.getCanSort() && (
+                    <button onClick={header.column.getToggleSortingHandler()}>
+                      {{
+                        asc: <Icon icon={<MdExpandMore fontSize={20} />} size="medium" />,
+                        desc: <Icon icon={<MdExpandLess fontSize={20} />} size="medium" />,
+                      }[header.column.getIsSorted() as string] ?? (
+                          <Icon icon={<MdUnfoldMore fontSize={22} />} size="medium" />
+                        )}
+                    </button>
+                  )}
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                  {filterable && header.column.getCanFilter() && (
+                    <Filter column={header.column} table={table} />
+                  )}
+                </Track>
+              </>
+            )}
+          </th>
+        ))}
+      </tr>
+    ))}
+  </thead>
+}
+
+export default TableHeader;