fix(/lib/components/table): prevent scrollbars around <Table>s (the…

…mesberg#608)

* Update default.ts

* Update Table.tsx

* Update TableBody.tsx

* Update TableCell.tsx

* Update TableRow.tsx

* Update defaults.ts

* Fix prettier errors

src/lib/components/Table/Table.tsx

@@ -3,8 +3,8 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite';
+import type { FlowbiteTableBodyTheme } from './TableBody';
 import { TableBody } from './TableBody';
-import type { FlowbiteTableCellTheme } from './TableCell';
 import { TableCell } from './TableCell';
 import type { TableContextType } from './TableContext';
 import { TableContext } from './TableContext';
@@ -16,13 +16,14 @@ import { TableRow } from './TableRow';
 
 export interface FlowbiteTableTheme {
   root: FlowbiteTableRootTheme;
-  cell: FlowbiteTableCellTheme;
   head: FlowbiteTableHeadTheme;
   row: FlowbiteTableRowTheme;
+  body: FlowbiteTableBodyTheme;
 }
 
 export interface FlowbiteTableRootTheme {
   base: string;
+  shadow: string;
   wrapper: string;
 }
 
@@ -43,6 +44,7 @@ const TableComponent: FC<TableProps> = ({
   return (
     <div data-testid="table-element" className={classNames(theme.root.wrapper)}>
       <TableContext.Provider value={{ striped, hoverable }}>
+        <div className={classNames(theme.root.shadow, className)}></div>
         <table className={classNames(theme.root.base, className)} {...props}>
           {children}
         </table>

src/lib/components/Table/TableBody.tsx

@@ -1,7 +1,25 @@
+import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import type { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
+import { useTheme } from '../Flowbite';
+import type { FlowbiteTableCellTheme } from './TableCell';
 
-export type TableBodyProps = PropsWithChildren<ComponentProps<'tbody'>>;
+export interface FlowbiteTableBodyTheme {
+  base: string;
+  cell: FlowbiteTableCellTheme;
+}
 
-export const TableBody: FC<TableBodyProps> = ({ children, ...props }) => {
-  return <tbody {...props}>{children}</tbody>;
+export interface TableBodyProps extends PropsWithChildren, ComponentProps<'tbody'> {
+  theme?: DeepPartial<FlowbiteTableCellTheme>;
+}
+
+export const TableBody: FC<TableBodyProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+  const theme = mergeDeep(useTheme().theme.table.body, customTheme);
+
+  return (
+    <tbody className={classNames(theme.base, className)} {...props}>
+      {children}
+    </tbody>
+  );
 };

src/lib/components/Table/TableCell.tsx

@@ -13,7 +13,7 @@ export interface TableCellProps extends PropsWithChildren, ComponentProps<'td'>
 }
 
 export const TableCell: FC<TableCellProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(useTheme().theme.table.cell, customTheme);
+  const theme = mergeDeep(useTheme().theme.table.body.cell, customTheme);
 
   return (
     <td className={classNames(theme.base, className)} {...props}>

src/lib/components/Table/TableRow.tsx

@@ -6,6 +6,7 @@ import { useTheme } from '../Flowbite';
 import { useTableContext } from './TableContext';
 
 export interface FlowbiteTableRowTheme {
+  base: string;
   hovered: string;
   striped: string;
 }
@@ -21,7 +22,7 @@ export const TableRow: FC<TableRowProps> = ({ children, className, theme: custom
   return (
     <tr
       data-testid="table-row-element"
-      className={classNames(striped && theme.striped, hoverable && theme.hovered, className)}
+      className={classNames(theme.base, striped && theme.striped, hoverable && theme.hovered, className)}
       {...props}
     >
       {children}

src/lib/theme/default.ts

@@ -1008,18 +1008,23 @@ const theme: FlowbiteTheme = {
   table: {
     root: {
       base: 'w-full text-left text-sm text-gray-500 dark:text-gray-400',
-      wrapper: 'relative overflow-x-auto shadow-md sm:rounded-lg',
+      shadow: 'absolute bg-white dark:bg-black w-full h-full top-0 left-0 rounded-lg drop-shadow-md -z-10',
+      wrapper: 'relative',
     },
-    cell: {
-      base: 'px-6 py-4',
+    body: {
+      base: 'group/body',
+      cell: {
+        base: 'group-first/body:group-first/row:first:rounded-tl-lg group-first/body:group-first/row:last:rounded-tr-lg group-last/body:group-last/row:first:rounded-bl-lg group-last/body:group-last/row:last:rounded-br-lg px-6 py-4',
+      },
     },
     head: {
-      base: 'bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400',
+      base: 'group/head text-xs uppercase text-gray-700 dark:text-gray-400',
       cell: {
-        base: 'px-6 py-3',
+        base: 'group-first/head:first:rounded-tl-lg group-first/head:last:rounded-tr-lg bg-gray-50 dark:bg-gray-700 px-6 py-3',
       },
     },
     row: {
+      base: 'group/row',
       hovered: 'hover:bg-gray-50 dark:hover:bg-gray-600',
       striped: 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700',
     },