Fix: Findings regarding table refactoring

src/components/v5/common/ActionSidebar/partials/forms/ManageTokensForm/partials/TokensTable/TokensTable.tsx

@@ -97,8 +97,6 @@ const TokensTable: FC<TokensTableProps> = ({
             '!border-negative-400': !!fieldState.error,
             '[&_tbody_td]:h-[3.375rem] [&_td:first-child]:pl-4 [&_td:nth-child(2)]:pr-2 [&_td]:pr-4 [&_th:first-child]:pl-4 [&_th:not(:first-child)]:pl-0 [&_th]:pr-4':
               !isTablet,
-            '[&_table]:table-auto': isTablet,
-            'pb-4': data.length > 10,
           })}
           columns={columns}
           data={data}

src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/SplitPaymentRecipientsField.tsx

@@ -166,20 +166,23 @@ const SplitPaymentRecipientsField: FC<SplitPaymentRecipientsFieldProps> = ({
           layout={isTablet ? 'vertical' : 'horizontal'}
           isDisabled={disabled}
           renderCellWrapper={renderCellContent}
-          footerColSpan={isTablet ? 2 : undefined}
           overrides={{
             getRowId: ({ key }) => key,
             state: {
               columnVisibility: {
                 [MEATBALL_MENU_COLUMN_ID]: !disabled && !isTablet,
-                percent: !isTablet,
               },
+            },
+            initialState: {
               pagination: {
-                pageSize: data.length,
                 pageIndex: 0,
+                pageSize: 400,
               },
             },
           }}
+          pagination={{
+            pageNumberVisible: false,
+          }}
           moreActions={getMoreActionsMenu({
             getMenuProps,
             visible: isTablet,

src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/hooks.tsx

@@ -152,6 +152,11 @@ export const useRecipientsFieldTableColumns = ({
               )}
             </div>
           ),
+          meta: {
+            footer: {
+              colSpan: isTablet ? 2 : undefined,
+            },
+          },
         }),
         columnHelper.display({
           id: 'percent',
@@ -209,6 +214,11 @@ export const useRecipientsFieldTableColumns = ({
                 );
               }
             : undefined,
+          meta: {
+            footer: {
+              display: isTablet ? 'none' : undefined,
+            },
+          },
         }),
       ],
       // eslint-disable-next-line react-hooks/exhaustive-deps

src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/SplitPaymentTable.tsx

@@ -80,11 +80,11 @@ const SplitPaymentTable: FC<SplitPaymentTableProps> = ({
               ]
             : data
         }
-        footerColSpan={isTablet ? 2 : undefined}
         overrides={{
-          state: {
-            columnVisibility: {
-              percent: !isTablet,
+          initialState: {
+            pagination: {
+              pageIndex: 0,
+              pageSize: 400,
             },
           },
         }}

src/components/v5/common/CompletedAction/partials/SplitPayment/partials/SplitPaymentTable/hooks.tsx

@@ -90,6 +90,11 @@ export const useGetSplitPaymentColumns = (
             tokenAddress={row.original.tokenAddress}
           />
         ),
+        meta: {
+          footer: {
+            colSpan: isTablet ? 2 : undefined,
+          },
+        },
       }),
       splitPaymentColumnHelper.accessor('percent', {
         enableSorting: false,
@@ -123,6 +128,11 @@ export const useGetSplitPaymentColumns = (
               </LoadingSkeleton>
             )
           : undefined,
+        meta: {
+          footer: {
+            display: isTablet ? 'none' : undefined,
+          },
+        },
       }),
     ],
     [

src/components/v5/common/Table/partials/TableFooter.tsx

@@ -9,7 +9,7 @@ interface TableFooterProps<T> {
 }
 
 export const TableFooter = <T,>({
-  colSpan,
+  colSpan: defaultColSpan,
   hasBorder,
   groups,
 }: TableFooterProps<T>) => {
@@ -29,19 +29,29 @@ export const TableFooter = <T,>({
         <tr key={footerGroup.id}>
           {footerGroup.headers.map((column, index) => {
             const isLastColumn = index === footerGroup.headers.length - 1;
+            const { footer, meta } = column.column.columnDef;
+
+            if (meta?.footer?.display === 'none') {
+              return null;
+            }
+
+            let colSpan: number | undefined = 1;
+            if (isLastColumn) {
+              colSpan = defaultColSpan;
+            }
+            if (meta?.footer?.colSpan) {
+              colSpan = meta?.footer?.colSpan;
+            }
 
             return (
               <td
-                colSpan={isLastColumn ? colSpan : 1}
+                colSpan={colSpan}
                 key={column.id}
                 className={clsx('h-full px-[1.1rem] text-md text-gray-500', {
                   'border-t border-gray-200': hasBorder,
                 })}
               >
-                {flexRender(
-                  column.column.columnDef.footer,
-                  column.getContext(),
-                )}
+                {flexRender(footer, column.getContext())}
               </td>
             );
           })}

src/components/v5/common/Table/partials/TableLayout/VerticalTableLayout.tsx

@@ -23,7 +23,7 @@ export const VerticalTableLayout = <T,>({
             key={row.id}
             className={clsx(
               rowsConfig?.getRowClassName?.(row),
-              '[&:not(:last-child)>tr:last-child>td]:border-b [&:not(:last-child)>tr:last-child>th]:border-b [&:nth-child(1)>tr:first-child>th]:rounded-tl-lg [&_tr:first-child_td]:pt-2 [&_tr:first-child_th]:h-[2.875rem] [&_tr:first-child_th]:pt-2 [&_tr:last-child_td]:pb-2 [&_tr:last-child_th]:h-[2.875rem] [&_tr:last-child_th]:pb-2',
+              '[&:last-child>tr:last-child>th]:rounded-bl-lg [&:not(:last-child)>tr:last-child>td]:border-b [&:not(:last-child)>tr:last-child>th]:border-b [&:nth-child(1)>tr:first-child>th]:rounded-tl-lg [&_tr:first-child_td]:pt-2 [&_tr:first-child_th]:h-[2.875rem] [&_tr:first-child_th]:pt-2 [&_tr:last-child_td]:pb-2 [&_tr:last-child_th]:h-[2.875rem] [&_tr:last-child_th]:pb-2',
             )}
           >
             {headerGroups.map((headerGroup) =>

src/typedefs/@tanstack_react-table/index.d.ts

@@ -1,3 +1,4 @@
+import { type ColumnMeta as BaseColumnMeta } from '@tanstack/react-table';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 
@@ -8,4 +9,11 @@ declare module '@tanstack/react-table' {
     cellContentWrapperClassName?: string;
     headCellClassName?: string;
   }
+  export interface ColumnMeta<TData extends RowData, TValue>
+    extends BaseColumnMeta<TData, TValue> {
+    footer?: {
+      colSpan?: number;
+      display?: string;
+    };
+  }
 }