chore: use TABLE_DEFAULT_STYLING for default styling

src/components/Table.tsx

@@ -86,7 +86,7 @@ export const TABLE_DEFAULT_STYLING = {
   tableHeaderClassName: '',
   headerRowClassName: '',
   headerColumnClassName:
-    'px-4 py-3 border-base-content/10 text-base-content/50',
+    'px-4 py-3 border-base-content/10 text-base-content/50 text-sm font-medium',
   tableBodyClassName: '',
   bodyRowClassName: 'border-t border-base-content/10',
   bodyColumnClassName: 'px-4 py-3 text-base-content',
@@ -222,14 +222,37 @@ const Table = <TData extends object>({
   }, [pageSize, setPageSize]);
 
   return (
-    <div className={tableClassNames.containerClassName}>
+    <div
-      <div className={tableClassNames.tableWrapperClassName}>
+      className={cn(
-        <table className={tableClassNames.tableClassName}>
+        TABLE_DEFAULT_STYLING.containerClassName,
-          <thead className={tableClassNames.tableHeaderClassName}>
+        tableClassNames.containerClassName
+      )}
+    >
+      <div
+        className={cn(
+          TABLE_DEFAULT_STYLING.tableWrapperClassName,
+          tableClassNames.tableWrapperClassName
+        )}
+      >
+        <table
+          className={cn(
+            TABLE_DEFAULT_STYLING.tableClassName,
+            tableClassNames.tableClassName
+          )}
+        >
+          <thead
+            className={cn(
+              TABLE_DEFAULT_STYLING.tableHeaderClassName,
+              tableClassNames.tableHeaderClassName
+            )}
+          >
             {table.getHeaderGroups().map((headerGroup) => (
               <tr
                 key={headerGroup.id}
-                className={tableClassNames.headerRowClassName}
+                className={cn(
+                  TABLE_DEFAULT_STYLING.headerRowClassName,
+                  tableClassNames.headerRowClassName
+                )}
               >
                 {headerGroup.headers.map((header) => {
                   const columnRelativeDepth =
@@ -262,6 +285,7 @@ const Table = <TData extends object>({
                         {
                           'border-b': header.colSpan > 1,
                         },
+                        TABLE_DEFAULT_STYLING.headerColumnClassName,
                         tableClassNames.headerColumnClassName
                       )}
                     >
@@ -311,7 +335,12 @@ const Table = <TData extends object>({
             ))}
           </thead>
 
-          <tbody className={tableClassNames.tableBodyClassName}>
+          <tbody
+            className={cn(
+              TABLE_DEFAULT_STYLING.tableBodyClassName,
+              tableClassNames.tableBodyClassName
+            )}
+          >
             {table.getRowModel().rows.map((row) => {
               const customRowContent = renderCustomRow?.(row);
 
@@ -320,12 +349,19 @@ const Table = <TData extends object>({
               }
 
               return (
-                <tr key={row.id} className={tableClassNames.bodyRowClassName}>
+                <tr
+                  key={row.id}
+                  className={cn(
+                    TABLE_DEFAULT_STYLING.bodyRowClassName,
+                    tableClassNames.bodyRowClassName
+                  )}
+                >
                   {row.getVisibleCells().map((cell) => (
                     <td
                       key={cell.id}
                       className={cn(
                         { 'first:w-9 first:pr-0': withCheckbox },
+                        TABLE_DEFAULT_STYLING.bodyColumnClassName,
                         tableClassNames.bodyColumnClassName
                       )}
                     >
@@ -342,14 +378,25 @@ const Table = <TData extends object>({
               );
             })}
           </tbody>
-          <tfoot className={cn(tableClassNames.tableFooterClassName)}>
+          <tfoot
+            className={cn(
+              TABLE_DEFAULT_STYLING.tableFooterClassName,
+              tableClassNames.tableFooterClassName
+            )}
+          >
             {renderFooter && (
-              <tr className={cn(tableClassNames.footerRowClassName)}>
+              <tr
+                className={cn(
+                  TABLE_DEFAULT_STYLING.footerRowClassName,
+                  tableClassNames.footerRowClassName
+                )}
+              >
                 {table.getAllLeafColumns().map((column) => (
                   <td
                     key={column.id}
                     className={cn(
                       { 'first:w-9 first:pr-0': withCheckbox },
+                      TABLE_DEFAULT_STYLING.footerColumnClassName,
                       tableClassNames.footerColumnClassName
                     )}
                   >
@@ -372,7 +419,13 @@ const Table = <TData extends object>({
         emptyContent}
 
       {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
-        <div className={cn('mt-5', tableClassNames.paginationClassName)}>
+        <div
+          className={cn(
+            'mt-5',
+            TABLE_DEFAULT_STYLING.paginationClassName,
+            tableClassNames.paginationClassName
+          )}
+        >
           <Pagination
             totalItems={isServerSideTable ? totalItems : table.getRowCount()}
             itemsPerPage={table.getState().pagination.pageSize}