Add support for size in tailwind-based Table component

Author: acelaya

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [0.9.6] - 2025-05-31
+### Added
+* Add `size` property to tailwind-based `Table` component.
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.9.5] - 2025-05-30
 ### Added
 * *Nothing*

dev/tailwind/content/TablePage.tsx

@@ -96,6 +96,7 @@ export const TablePage: FC = () => {
           ))}
         </Table>
       </div>
+
       <div className="tw:flex tw:flex-col tw:gap-y-2">
         <h2>Non-responsive table inside Card</h2>
         <SimpleCard>
@@ -133,6 +134,7 @@ export const TablePage: FC = () => {
           </Table>
         </SimpleCard>
       </div>
+
       <div className="tw:flex tw:flex-col tw:gap-y-2">
         <h2>Table with footer</h2>
         <Table
@@ -158,6 +160,64 @@ export const TablePage: FC = () => {
           ))}
         </Table>
       </div>
+
+      <div className="tw:flex tw:flex-col tw:gap-y-2">
+        <h2>Table sizes</h2>
+        <Table
+          size="sm"
+          header={
+            <Table.Row>
+              <Table.Cell>Small</Table.Cell>
+              <Table.Cell>Small</Table.Cell>
+              <Table.Cell>Small</Table.Cell>
+            </Table.Row>
+          }
+        >
+          {users.slice(0, 2).map((u) => (
+            <Table.Row key={u.id}>
+              <Table.Cell columnName="Name:">{u.name}</Table.Cell>
+              <Table.Cell columnName="Surname:">{u.surname}</Table.Cell>
+              <Table.Cell columnName="Role:">{u.role}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table>
+        <Table
+          size="md"
+          header={
+            <Table.Row>
+              <Table.Cell>Medium</Table.Cell>
+              <Table.Cell>Medium</Table.Cell>
+              <Table.Cell>Medium</Table.Cell>
+            </Table.Row>
+          }
+        >
+          {users.slice(0, 2).map((u) => (
+            <Table.Row key={u.id}>
+              <Table.Cell columnName="Name:">{u.name}</Table.Cell>
+              <Table.Cell columnName="Surname:">{u.surname}</Table.Cell>
+              <Table.Cell columnName="Role:">{u.role}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table>
+        <Table
+          size="lg"
+          header={
+            <Table.Row>
+              <Table.Cell>Large</Table.Cell>
+              <Table.Cell>Large</Table.Cell>
+              <Table.Cell>Large</Table.Cell>
+            </Table.Row>
+          }
+        >
+          {users.slice(0, 2).map((u) => (
+            <Table.Row key={u.id}>
+              <Table.Cell columnName="Name:">{u.name}</Table.Cell>
+              <Table.Cell columnName="Surname:">{u.surname}</Table.Cell>
+              <Table.Cell columnName="Role:">{u.role}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table>
+      </div>
     </div>
   );
 };

src/tailwind/content/Table.tsx

@@ -1,12 +1,13 @@
 import clsx from 'clsx';
 import type { FC, HTMLProps, PropsWithChildren, ReactNode } from 'react';
 import { createContext, useContext } from 'react';
+import type { Size } from '../types';
 
 export type SectionType = 'head' | 'body' | 'footer';
 
 const TableSectionContext = createContext<{ section: SectionType } | undefined>(undefined);
 
-const TableContext = createContext<{ responsive: boolean }>({ responsive: true });
+const TableContext = createContext<{ responsive: boolean; size: Size }>({ responsive: true, size: 'md' });
 
 export type TableElementProps = PropsWithChildren & {
   className?: string;
@@ -106,17 +107,22 @@ export type CellProps = HTMLProps<HTMLTableCellElement> & {
 const Cell: FC<CellProps> = ({ children, className, columnName, type, ...rest }) => {
   const sectionContext = useContext(TableSectionContext);
   const Tag = type ?? (sectionContext?.section !== 'body' ? 'th' : 'td');
-  const { responsive } = useContext(TableContext);
+  const { responsive, size } = useContext(TableContext);
 
   return (
     <Tag
       data-column={responsive ? columnName : undefined}
       className={clsx(
-        'tw:p-2 tw:border-lm-border tw:dark:border-dm-border',
+        'tw:border-lm-border tw:dark:border-dm-border',
         {
+          'tw:p-1': size === 'sm',
+          'tw:p-2': size === 'md',
+          'tw:p-3': size === 'lg',
+
           'tw:border-b-1': !responsive,
           'tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1': responsive,
-          // For md and lower, display the content in data-column attribute as before
+
+          // For responsive tables, display the content in data-column attribute for md sizes and lower
           'tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1': responsive && Tag === 'td',
         },
         className,
@@ -128,7 +134,7 @@ const Cell: FC<CellProps> = ({ children, className, columnName, type, ...rest })
   );
 };
 
-export type TableProps = HTMLProps<HTMLTableElement> & {
+export type TableProps = Omit<HTMLProps<HTMLTableElement>, 'size'> & {
   header: ReactNode;
   footer?: ReactNode;
 
@@ -138,20 +144,13 @@ export type TableProps = HTMLProps<HTMLTableElement> & {
    */
   responsive?: boolean;
 
-  /**
-   * @todo
-   * `default`: Only horizontal borders are rendered. No background color on any row
-   * `stripped`: Every other row has a different background color
-   * `grid`: Both horizontal and vertical borders are rendered. No background color on any row
-   */
-  // variant?: 'default' | 'stripped' | 'grid';
-
-  // size?: Size;
+  /** Determines the padding in every cell. Defaults to md */
+  size?: Size;
 };
 
-const BaseTable: FC<TableProps> = ({ header, footer, children, responsive = true, ...rest }) => {
+const BaseTable: FC<TableProps> = ({ header, footer, children, responsive = true, size = 'md', ...rest }) => {
   return (
-    <TableContext.Provider value={{ responsive }}>
+    <TableContext.Provider value={{ responsive, size }}>
       <table className="tw:w-full" {...rest}>
         <TableHead>
           {header}

test/tailwind/content/Table.test.tsx

@@ -46,6 +46,8 @@ describe('<Table />', () => {
         </Table.Row>
       ),
     },
+    { size: 'sm' as const },
+    { size: 'lg' as const },
   ])('renders as expected based on provided props', (props) => {
     const { container } = setUp(props);
     expect(container).toMatchSnapshot();