@apify/ui-library 1.132.1 → 1.133.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.132.1",
+    "version": "1.133.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -23,7 +23,7 @@
         "postpublish": "npm run clean"
     },
     "//": [
-        "Storybook for the components lives in a separate package components-storybook.",
+        "Storybook for the components lives in a separate package ui-storybook.",
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
@@ -70,5 +70,5 @@
         "src",
         "style"
     ],
-    "gitHead": "10415388fd2ce4e24af29ddfe3090214c4a48b51"
+    "gitHead": "4df09cdffad169b379e062cc4dbc1641d8a6f0c7"
 }

package/src/components/index.ts

@@ -30,3 +30,4 @@ export * from './checkbox/index.js';
 export * from './collapsible_card/index.js';
 export * from './select/index.js';
 export * from './switch/index.js';
+export * from './table/index.js';

package/src/components/link.stories.tsx

@@ -69,6 +69,18 @@ export default {
             control: 'text',
             description: 'The link text or content to display',
         },
+        ariaHidden: {
+            control: 'boolean',
+            description: 'Whether the link should be hidden from screen readers (useful for decorative links)',
+        },
+        ariaLabel: {
+            control: 'text',
+            description: 'Accessible label for screen readers when the link text is not descriptive',
+        },
+        tabIndex: {
+            control: 'number',
+            description: 'Tab index for keyboard navigation (default is 0)',
+        },
     },
     parameters: {
         design: {

package/src/components/link.tsx

@@ -19,6 +19,9 @@ export interface RegularLinkProps {
     target?: string,
     trackingId?: string,
     trackingData?: object,
+    tabIndex?: number,
+    ariaHidden?: boolean,
+    ariaLabel?: string,
 }
 
 /**
@@ -104,6 +107,9 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
     onClick,
     trackingId,
     trackingData,
+    tabIndex,
+    ariaHidden,
+    ariaLabel,
     ...rest
 }, ref) => {
     const {
@@ -139,6 +145,9 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
             target={target || (isExternal ? '_blank' : '_self')}
             onClick={trackedOnClick}
             ref={ref}
+            tabIndex={tabIndex}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}
             {...rest}
         >
             {children}

package/src/components/table/index.ts

@@ -0,0 +1,16 @@
+export { Table } from './table.js';
+export { TableHead } from './table_head.js';
+export { TableBody } from './table_body.js';
+export { TableFoot } from './table_foot.js';
+export { TableHeadRow } from './table_head_row.js';
+export { TableHeadCell } from './table_head_cell.js';
+export { TableRow } from './table_row.js';
+export { TableCell, TableCellLink } from './table_cell.js';
+export { HorizontallyScrollableTableWrapper } from './table_wrapper.js';
+export { TableExpansionRow } from './table_expansion_row.js';
+export { TableEmptyRow } from './table_empty_row.js';
+export { TableLoadingRow } from './table_loading_row.js';
+export { TableErrorRow } from './table_error_row.js';
+export { tableClassNames } from './table.styled.js';
+export { tableTestIds } from './table_test_ids.js';
+export type { HorizontallyScrollableTableWrapperProps, TableExpansion, TableRowProps } from './types.js';

package/src/components/table/table.context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import type { To } from '../link.js';
+
+export const TableRowLinkContext = createContext<To | undefined>(undefined);

package/src/components/table/table.stories.tsx

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
+
+import { Text } from '../text/index.js';
+import { Table } from './table.js';
+import { TableBody } from './table_body.js';
+import { TableCell, TableCellLink } from './table_cell.js';
+import { TableEmptyRow } from './table_empty_row.js';
+import { TableErrorRow } from './table_error_row.js';
+import { TableHead } from './table_head.js';
+import { TableHeadCell } from './table_head_cell.js';
+import { TableHeadRow } from './table_head_row.js';
+import { TableLoadingRow } from './table_loading_row.js';
+import { TableRow } from './table_row.js';
+import { HorizontallyScrollableTableWrapper } from './table_wrapper.js';
+import { tableTestIds } from './table_test_ids.js';
+
+// ---------------------------------------------------------------------------
+// Mock data
+// ---------------------------------------------------------------------------
+
+type MockItem = {
+    _id: string;
+    name: string;
+    status: string;
+    email: string;
+};
+
+const MOCK_DATA: MockItem[] = [
+    { _id: '1', name: 'Web Scraper', status: 'active', email: 'alice@example.com' },
+    { _id: '2', name: 'Data Extractor', status: 'inactive', email: 'bob@example.com' },
+    { _id: '3', name: 'Email Sender', status: 'pending', email: 'carol@example.com' },
+    { _id: '4', name: 'PDF Parser', status: 'active', email: 'dave@example.com' },
+];
+
+// ---------------------------------------------------------------------------
+// Storybook meta
+// ---------------------------------------------------------------------------
+
+const meta: Meta = {
+    title: 'UI-Library/Table',
+    tags: ['new'],
+    component: Table,
+    subcomponents: {
+        HorizontallyScrollableTableWrapper,
+        TableHead,
+        TableHeadRow,
+        TableHeadCell,
+        TableBody,
+        TableRow,
+        TableCell,
+        TableCellLink,
+        TableEmptyRow,
+        TableLoadingRow,
+        TableErrorRow,
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'Compositional table primitives. Compose together to build any table layout. See subcomponents below.',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/** Basic table with primitives only. */
+export const Default: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    {MOCK_DATA.map((item) => (
+                        <TableRow key={item._id}>
+                            <TableCell>{item.name}</TableCell>
+                            <TableCell>{item.email}</TableCell>
+                            <TableCell>{item.status}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByTestId(tableTestIds.WRAPPER)).toBeInTheDocument();
+        await expect(canvas.getByTestId(tableTestIds.TABLE)).toBeInTheDocument();
+        await expect(canvas.getAllByTestId(tableTestIds.ROW).length).toBe(MOCK_DATA.length);
+    },
+};
+
+/** Empty state with TableEmptyRow. */
+export const Empty: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    <TableEmptyRow colSpan={3}>No data available</TableEmptyRow>
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByTestId(tableTestIds.EMPTY_ROW)).toBeInTheDocument();
+        await expect(canvas.queryAllByTestId(tableTestIds.ROW).length).toBe(0);
+    },
+};
+
+/** Loading state with TableLoadingRow. */
+export const Loading: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    <TableLoadingRow colSpan={3} />
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByTestId(tableTestIds.LOADING_ROW)).toBeInTheDocument();
+    },
+};
+
+/** Error state with TableErrorRow. */
+export const WithError: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    <TableErrorRow colSpan={3} error={new globalThis.Error('Connection timed out')} />
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByTestId(tableTestIds.ERROR_ROW)).toBeInTheDocument();
+    },
+};
+
+/** Nested links — row-level link via `to` prop + inner TableCellLink. */
+export const WithNestedLinks: Story = {
+    render: () => (
+        <HorizontallyScrollableTableWrapper>
+            <Table>
+                <TableHead>
+                    <TableHeadRow>
+                        <TableHeadCell>Name</TableHeadCell>
+                        <TableHeadCell>Email</TableHeadCell>
+                        <TableHeadCell>Status</TableHeadCell>
+                    </TableHeadRow>
+                </TableHead>
+                <TableBody>
+                    {MOCK_DATA.map((item) => (
+                        <TableRow key={item._id} to={`/items/${item._id}`}>
+                            <TableCell>
+                                <TableCellLink to={`/actors/${item._id}`}>{item.name}</TableCellLink>
+                            </TableCell>
+                            <TableCell>{item.email}</TableCell>
+                            <TableCell>{item.status}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </HorizontallyScrollableTableWrapper>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getAllByTestId(tableTestIds.ROW).length).toBe(MOCK_DATA.length);
+
+        // Each cell in a row with `to` should have an overlay link + first cell has inner link
+        const cells = canvas.getAllByTestId(tableTestIds.CELL);
+        const firstCellLinks = cells[0].querySelectorAll('a');
+        await expect(firstCellLinks.length).toBe(2);
+    },
+};
+
+/** Direct inline data — no hooks, no data fetching. */
+export const DirectData: Story = {
+    render: () => {
+        const items = [
+            { _id: '1', key: 'API_TOKEN', value: '••••••••', updatedAt: '2025-04-01' },
+            { _id: '2', key: 'BASE_URL', value: 'https://api.example.com', updatedAt: '2025-03-15' },
+            { _id: '3', key: 'TIMEOUT_MS', value: '30000', updatedAt: '2025-02-20' },
+        ];
+
+        return (
+            <HorizontallyScrollableTableWrapper>
+                <Table>
+                    <TableHead>
+                        <TableHeadRow>
+                            <TableHeadCell>Key</TableHeadCell>
+                            <TableHeadCell>Value</TableHeadCell>
+                            <TableHeadCell>Updated</TableHeadCell>
+                        </TableHeadRow>
+                    </TableHead>
+                    <TableBody>
+                        {items.map((item) => (
+                            <TableRow key={item._id}>
+                                <TableCell><Text weight="bold">{item.key}</Text></TableCell>
+                                <TableCell>{item.value}</TableCell>
+                                <TableCell>{item.updatedAt}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </HorizontallyScrollableTableWrapper>
+        );
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getAllByTestId(tableTestIds.ROW).length).toBe(3);
+    },
+};

package/src/components/table/table.styled.ts

@@ -0,0 +1,207 @@
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import { Box } from '../box.js';
+
+/** z-index for sticky table head cells. Consumers can override via CSS if needed. */
+const STICKY_HEAD_Z_INDEX = 5;
+
+export const tableClassNames = {
+    TABLE: 'Table',
+    HEAD: 'Table-Head',
+    BODY: 'Table-Body',
+    FOOT: 'Table-Foot',
+
+    HEAD_ROW: 'Table-Head-Row',
+    HEAD_CELL: 'Table-Head-Cell',
+
+    BODY_ROW: 'Table-Body-Row',
+    BODY_ROW_CLICKABLE: 'Table-Body-Row_clickable',
+    BODY_ROW_EXPANDED: 'Table-Body-Row_expanded',
+    BODY_CELL: 'Table-Body-Cell',
+
+    FOOT_ROW: 'Table-Foot-Row',
+    FOOT_CELL: 'Table-Foot-Cell',
+
+    ROW_EMPTY: 'Table-Row-Empty',
+    ROW_EMPTY_CELL: 'Table-Row-Empty-Cell',
+
+    ROW_EXPANSION: 'Table-Row-Expansion',
+    ROW_EXPANSION_CELL: 'Table-Row-Expansion-Cell',
+
+    WRAPPER_SCROLLABLE: 'Table-Scrollable-Content',
+    WRAPPER_SHADOW_LEFT: 'Table-Scrollable-Shadow-Left',
+    WRAPPER_SHADOW_RIGHT: 'Table-Scrollable-Shadow-Right',
+
+    // Responsive hiding
+    HIDDEN_SM: 'Table-Cell_hiddenSM',
+    HIDDEN_MD: 'Table-Cell_hiddenMD',
+    HIDDEN_LG: 'Table-Cell_hiddenLG',
+
+    // Nested links
+    CELL_OVERLAY_LINK: 'Table-Cell-Overlay-Link',
+    CELL_LINK: 'Table-Cell-Link',
+};
+
+export const StyledTable = styled.table`
+    position: relative;
+    border-collapse: separate;
+    border-spacing: 0;
+    min-width: 100%;
+
+    /* Head cell rounding */
+    .${tableClassNames.HEAD_CELL}:first-child {
+        border-top-left-radius: ${theme.radius.radius12};
+    }
+    .${tableClassNames.HEAD_CELL}:last-child {
+        border-top-right-radius: ${theme.radius.radius12};
+    }
+
+    /* Generic cell padding */
+    .${tableClassNames.HEAD_CELL},
+    .${tableClassNames.BODY_CELL},
+    .${tableClassNames.ROW_EMPTY_CELL},
+    .${tableClassNames.ROW_EXPANSION_CELL} {
+        padding: ${theme.space.space8};
+        position: relative;
+    }
+
+    /* Head styling */
+    .${tableClassNames.HEAD_CELL} {
+        position: sticky;
+        top: 0;
+        z-index: ${STICKY_HEAD_Z_INDEX};
+        height: 4rem;
+        background-color: ${theme.color.neutral.backgroundMuted};
+        border-bottom: solid 1px ${theme.color.neutral.separatorSubtle};
+        color: ${theme.color.neutral.textMuted};
+    }
+
+    /* Body styling */
+    .${tableClassNames.BODY_ROW}:hover {
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    .${tableClassNames.BODY_ROW}:not(:first-child) .${tableClassNames.BODY_CELL} {
+        border-top: solid 1px ${theme.color.neutral.separatorSubtle};
+    }
+
+    .${tableClassNames.BODY_ROW_CLICKABLE} {
+        cursor: pointer;
+    }
+
+    /* Foot styling */
+    .${tableClassNames.FOOT_ROW}:not(:first-child) .${tableClassNames.FOOT_CELL} {
+        border-top: solid 1px ${theme.color.neutral.separatorSubtle};
+    }
+
+    /* Responsive hiding */
+    .${tableClassNames.HIDDEN_SM} {
+        display: none !important;
+    }
+
+    @media ${theme.device.tablet} {
+        .${tableClassNames.HIDDEN_MD} {
+            display: none !important;
+        }
+    }
+
+    @media ${theme.device.desktop} {
+        .${tableClassNames.HIDDEN_LG} {
+            display: none !important;
+        }
+    }
+
+    /* Expansion row */
+    .${tableClassNames.ROW_EXPANSION_CELL} {
+        border-top: solid 1px ${theme.color.neutral.separatorSubtle};
+        box-shadow: inset 0rem 0.2rem 0.8rem -0.2rem ${theme.color.neutral.separatorSubtle};
+    }
+
+    /* Nested links — see https://www.notion.so/apify/How-to-Nested-links-4863b883e9e1498b965531d946721926 */
+    .${tableClassNames.CELL_OVERLAY_LINK} {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        cursor: pointer;
+    }
+
+    .${tableClassNames.CELL_LINK} {
+        position: relative;
+        z-index: 1;
+        color: ${theme.color.neutral.text};
+        cursor: pointer;
+        /* Extra padding for easier clicking, compensated by negative margin */
+        padding: ${theme.space.space4} ${theme.space.space8};
+        margin: -${theme.space.space4} -${theme.space.space8};
+
+        &:hover {
+            z-index: 2;
+            color: ${theme.color.primary.text};
+        }
+    }
+
+    /* Empty row */
+    .${tableClassNames.ROW_EMPTY_CELL} {
+        text-align: center;
+        padding: ${theme.space.space16};
+    }
+`;
+
+export const StyledHorizontallyScrollableTableWrapper = styled(Box)`
+    position: relative;
+    width: 100%;
+    background-color: ${theme.color.neutral.background};
+    border: solid 1px ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    .${tableClassNames.WRAPPER_SCROLLABLE} {
+        position: relative;
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1.6rem;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        z-index: ${STICKY_HEAD_Z_INDEX + 1};
+    }
+
+    &::before {
+        left: 0;
+        background: linear-gradient(to right, ${theme.color.neutral.separatorSubtle}, transparent);
+    }
+
+    &::after {
+        right: 0;
+        background: linear-gradient(to left, ${theme.color.neutral.separatorSubtle}, transparent);
+    }
+
+    &.${tableClassNames.WRAPPER_SHADOW_LEFT}::before {
+        opacity: 1;
+    }
+
+    &.${tableClassNames.WRAPPER_SHADOW_RIGHT}::after {
+        opacity: 1;
+    }
+`;
+
+export const StyledTableFooterWrapper = styled(Box)`
+    position: relative;
+    width: 100%;
+    background-color: ${theme.color.neutral.backgroundMuted};
+    border-top: solid 1px ${theme.color.neutral.separatorSubtle};
+    overflow-x: auto;
+    scrollbar-width: none;
+`;

package/src/components/table/table.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, HTMLAttributes } from 'react';
+
+import { StyledTable, tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const Table: FC<HTMLAttributes<HTMLTableElement>> = ({ className, ...rest }) => (
+    <StyledTable data-test={tableTestIds.TABLE} className={clsx(tableClassNames.TABLE, className)} {...rest} />
+);

package/src/components/table/table_body.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, HTMLAttributes } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableBody: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
+    <tbody data-test={tableTestIds.BODY} className={clsx(tableClassNames.BODY, className)} {...rest} />
+);

package/src/components/table/table_cell.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import type { FC, TdHTMLAttributes } from 'react';
+import { useContext } from 'react';
+
+import { Link, type LinkProps } from '../link.js';
+import { TableRowLinkContext } from './table.context.js';
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableCell: FC<TdHTMLAttributes<HTMLTableCellElement>> = ({ className, children, ...rest }) => {
+    const rowLink = useContext(TableRowLinkContext);
+
+    return (
+        <td data-test={tableTestIds.CELL} className={clsx(tableClassNames.BODY_CELL, className)} {...rest}>
+            {rowLink && <Link className={tableClassNames.CELL_OVERLAY_LINK} to={rowLink} tabIndex={-1} ariaHidden />}
+            {children}
+        </td>
+    );
+};
+
+/**
+ * Inner link inside a cell whose row has a `to` prop (overlay link).
+ * Elevated above the row overlay via `z-index` so it remains clickable and hoverable.
+ * Includes extra padding (compensated by negative margin) for easier click targets.
+ */
+export const TableCellLink: FC<LinkProps> = ({ className, ...rest }) => (
+    <Link className={clsx(tableClassNames.CELL_LINK, className)} {...rest} />
+);

package/src/components/table/table_empty_row.tsx

@@ -0,0 +1,12 @@
+import type { FC, ReactNode } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableEmptyRow: FC<{ colSpan: number; children: ReactNode }> = ({ colSpan, children }) => (
+    <tr data-test={tableTestIds.EMPTY_ROW} className={tableClassNames.ROW_EMPTY}>
+        <td colSpan={colSpan} className={tableClassNames.ROW_EMPTY_CELL}>
+            {children}
+        </td>
+    </tr>
+);

package/src/components/table/table_error_row.tsx

@@ -0,0 +1,13 @@
+import type { FC, ReactNode } from 'react';
+
+import { Text } from '../text/index.js';
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableErrorRow: FC<{ colSpan: number; children?: ReactNode; error?: Error | null }> = ({ colSpan, children, error }) => (
+    <tr data-test={tableTestIds.ERROR_ROW} className={tableClassNames.ROW_EMPTY}>
+        <td colSpan={colSpan} className={tableClassNames.ROW_EMPTY_CELL}>
+            {children ?? <Text color="error">{error?.message ?? 'Failed to load data'}</Text>}
+        </td>
+    </tr>
+);

package/src/components/table/table_expansion_row.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import type { FC, ReactNode } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+import type { TableExpansion } from './types.js';
+
+export const TableExpansionRow: FC<{
+    colSpan: number;
+    children: ReactNode;
+    expansion: TableExpansion;
+    itemId: string;
+    className?: string;
+}> = ({ colSpan, children, expansion, itemId, className }) => {
+    if (!expansion.isExpanded(itemId)) return null;
+
+    return (
+        <tr data-test={tableTestIds.EXPANSION_ROW} className={clsx(tableClassNames.ROW_EXPANSION, className)}>
+            <td colSpan={colSpan} className={tableClassNames.ROW_EXPANSION_CELL}>
+                {children}
+            </td>
+        </tr>
+    );
+};

package/src/components/table/table_foot.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+import type { FC, HTMLAttributes } from 'react';
+
+import { tableClassNames } from './table.styled.js';
+import { tableTestIds } from './table_test_ids.js';
+
+export const TableFoot: FC<HTMLAttributes<HTMLTableSectionElement>> = ({ className, ...rest }) => (
+    <tfoot data-test={tableTestIds.FOOT} className={clsx(tableClassNames.FOOT, className)} {...rest} />
+);