refactor(FE-339): Export TABLE_DEFAULT_STYLING and refine table classes

src/components/Table.tsx

@@ -72,21 +72,22 @@ const emptyContentDefaultValue = (
   </div>
 );
 
-const TABLE_DEFAULT_STYLING = {
+export const TABLE_DEFAULT_STYLING = {
   containerClassName: 'w-full mb-20',
   tableWrapperClassName:
     'overflow-x-auto border border-solid border-base-content/10 rounded-lg',
   tableClassName: 'font-inter w-full table-auto text-sm font-medium',
   tableHeaderClassName: '',
   headerRowClassName: '',
-  headerColumnClassName: 'px-4 py-3 text-base-content/50',
+  headerColumnClassName:
+    'px-4 py-3 border-base-content/10 text-base-content/50',
   tableBodyClassName: '',
-  bodyRowClassName: 'border-t border-t-base-content/10',
+  bodyRowClassName: 'border-t border-base-content/10',
   bodyColumnClassName: 'px-4 py-3 text-base-content',
   paginationClassName: '',
-  tableFooterClassName: 'bg-gray-100 font-semibold border border-gray-200',
-  footerRowClassName: 'border-t-2 border-gray-300',
-  footerColumnClassName: 'px-6 py-3 text-xs text-gray-900',
+  tableFooterClassName: 'font-semibold border-base-content/10',
+  footerRowClassName: 'bg-base-200 border-t-2 border-base-content/10',
+  footerColumnClassName: 'p-4 text-base-content whitespace-nowrap',
 };
 
 const Table = <TData extends object>({
@@ -251,13 +252,15 @@ const Table = <TData extends object>({
                         {
                           'first:w-9 first:pr-0': withCheckbox,
                         },
+                        {
+                          'border-b': header.colSpan > 1,
+                        },
                         tableClassNames.headerColumnClassName
                       )}
                     >
                       <div
-                        className={cn('flex items-center gap-1', {
-                          'justify-center relative after:content-[""] after:absolute after:left-0 after:right-0 after:bottom-0 after:h-px after:bg-base-content/10 after:translate-y-4':
-                            header.colSpan > 1,
+                        className={cn('flex items-center gap-1 min-h-full', {
+                          'justify-center': header.colSpan > 1,
                         })}
                       >
                         {flexRender(
@@ -321,13 +324,16 @@ const Table = <TData extends object>({
               </tr>
             ))}
           </tbody>
-          <tfoot className={cn(className.tableFooterClassName)}>
+          <tfoot className={cn(tableClassNames.tableFooterClassName)}>
             {renderFooter && (
-              <tr className={className.footerRowClassName}>
+              <tr className={cn(tableClassNames.footerRowClassName)}>
                 {table.getAllLeafColumns().map((column) => (
                   <td
                     key={column.id}
-                    className={className.footerColumnClassName}
+                    className={cn(
+                      { 'first:w-9 first:pr-0': withCheckbox },
+                      tableClassNames.footerColumnClassName
+                    )}
                   >
                     {column.columnDef.footer &&
                       flexRender(column.columnDef.footer, {