@mattilsynet/design 3.2.9 → 3.3.1

package/mtds/ai/table.stories.tsx

@@ -0,0 +1,1715 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	type ColumnDef,
+	type ExpandedState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import { pagination } from "../";
+import { Button, Field, Pagination, Table } from "../react";
+import styles from "../styles.module.css";
+import mockData from "./table.mockData";
+
+const meta = {
+	title: "Designsystem/Table",
+	parameters: {
+		layout: "padded",
+	},
+	decorators: [
+		(Story) => (
+			<div className={styles.grid} data-gap="4">
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+type ColumnKeys = keyof (typeof mockData)[0];
+type ColumnsType = {
+	key: ColumnKeys;
+	label: string;
+	numeric?: boolean;
+	expand?: React.ReactNode;
+}[];
+type RowType = (typeof mockData)[0] & { expand?: React.ReactNode };
+
+const mockDataSmall = mockData.slice(0, 4);
+const mockExpand = mockData.slice(0, 10).map((row: RowType) => ({
+	...row,
+	expand: (
+		<div>
+			Content {row.firstName} {row.lastName}
+		</div>
+	),
+}));
+
+const mockColumns = [
+	{ accessorKey: "firstName", header: "First name" },
+	{ accessorKey: "lastName", header: "Last name" },
+	{ header: "Age", accessorKey: "age" },
+	{ header: "Visits", accessorKey: "visits" },
+];
+
+const mobileDecorators: StoryObj["decorators"] = [
+	(Story) => {
+		useEffect(() => {
+			if (document.querySelector(".sbdocs-wrapper")) return; // Do not shrink in docs mode
+			const el = window.frameElement as HTMLElement;
+			const iframe = el?.nodeName === "IFRAME" ? el : undefined;
+			if (iframe) iframe.style.maxWidth = "400px";
+			return () => iframe?.removeAttribute("style");
+		}, []);
+
+		return <Story />;
+	},
+];
+
+export const Default: Story = {
+	render: () => (
+		<table className={styles.table} aria-label="Example table">
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Antoni</td>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>128</td>
+				</tr>
+				<tr>
+					<td>Jenine</td>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr>
+					<td>Leigh</td>
+					<td>Klein</td>
+					<td>26</td>
+					<td>114</td>
+				</tr>
+				<tr>
+					<td>Zara</td>
+					<td>Greenrodd</td>
+					<td>28</td>
+					<td>36</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const React: Story = {
+	render: () => (
+		<Table aria-label="Example table">
+			<Table.Thead>
+				<Table.Tr>
+					<Table.Th>First name</Table.Th>
+					<Table.Th>Last name</Table.Th>
+					<Table.Th>Age</Table.Th>
+					<Table.Th>Visits</Table.Th>
+				</Table.Tr>
+			</Table.Thead>
+			<Table.Tbody>
+				<Table.Tr>
+					<Table.Td>Antoni</Table.Td>
+					<Table.Td>Foyston</Table.Td>
+					<Table.Td>74</Table.Td>
+					<Table.Td>128</Table.Td>
+				</Table.Tr>
+				<Table.Tr>
+					<Table.Td>Jenine</Table.Td>
+					<Table.Td>Healey</Table.Td>
+					<Table.Td>22</Table.Td>
+					<Table.Td>194</Table.Td>
+				</Table.Tr>
+				<Table.Tr>
+					<Table.Td>Leigh</Table.Td>
+					<Table.Td>Klein</Table.Td>
+					<Table.Td>26</Table.Td>
+					<Table.Td>114</Table.Td>
+				</Table.Tr>
+				<Table.Tr>
+					<Table.Td>Zara</Table.Td>
+					<Table.Td>Greenrodd</Table.Td>
+					<Table.Td>28</Table.Td>
+					<Table.Td>36</Table.Td>
+				</Table.Tr>
+			</Table.Tbody>
+		</Table>
+	),
+};
+
+export const DefaultTanstack: Story = {
+	render: function Render(args) {
+		const isNumeric = ["age", "visits"];
+		const table = useReactTable({
+			getCoreRowModel: getCoreRowModel(),
+			data: mockDataSmall,
+			columns: mockColumns,
+		});
+
+		return (
+			<Table aria-label="Tanstack table" {...args}>
+				<Table.Thead>
+					{table.getHeaderGroups().map(({ id, headers }) => (
+						<Table.Tr key={id}>
+							{headers.map((header) => (
+								<Table.Th
+									key={header.id}
+									colSpan={header.colSpan}
+									data-numeric={isNumeric.includes(header.id)}
+								>
+									{flexRender(
+										header.column.columnDef.header,
+										header.getContext(),
+									)}
+								</Table.Th>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Thead>
+				<Table.Tbody>
+					{table.getRowModel().rows.map((row) => (
+						<Table.Tr key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<Table.Td
+									key={cell.id}
+									data-numeric={isNumeric.includes(cell.column.id)}
+								>
+									{cell.getValue() as React.ReactNode}
+								</Table.Td>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Tbody>
+			</Table>
+		);
+	},
+};
+
+export const HeadingsSimple: Story = {
+	render: (args) => {
+		const columns: ColumnsType = [
+			{ key: "firstName", label: "First name" },
+			{ key: "lastName", label: "Last name" },
+			{ key: "age", label: "Age", numeric: true },
+			{ key: "visits", label: "Visits", numeric: true },
+			{ key: "date", label: "Date", numeric: true },
+		];
+
+		return (
+			<table className={styles.table} aria-label="Headings table" {...args}>
+				<thead>
+					<tr>
+						<th colSpan={2}>Name</th>
+						<th colSpan={3}>Stats</th>
+					</tr>
+					<tr>
+						{columns.map(({ label, numeric }) => (
+							<th key={label} data-numeric={numeric}>
+								{label}
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{mockDataSmall.map((row) => (
+						<tr key={`${row.firstName}-${row.lastName}`}>
+							{columns.map(({ key, numeric }) => (
+								<td key={key} data-numeric={numeric}>
+									{key === "date"
+										? new Date(Number(row[key])).toLocaleDateString()
+										: row[key]}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
+		);
+	},
+};
+
+export const HeadingsTanstack: Story = {
+	render: function Render(args) {
+		const columns: ColumnDef<RowType>[] = useMemo(
+			() => [
+				{
+					header: "Name",
+					columns: [
+						{
+							accessorKey: "firstName",
+							header: "First name",
+						},
+						{
+							accessorKey: "lastName",
+							header: "Last name",
+						},
+					],
+				},
+				{
+					header: "Stats",
+					columns: [
+						{
+							header: "Age",
+							accessorKey: "age",
+						},
+						{
+							header: "Visits",
+							accessorKey: "visits",
+						},
+						{
+							header: "Date",
+							accessorKey: "date",
+							cell: (info) =>
+								new Date(Number(info.getValue())).toLocaleDateString(),
+						},
+					],
+				},
+			],
+			[],
+		);
+
+		const table = useReactTable({
+			getCoreRowModel: getCoreRowModel(),
+			data: mockDataSmall,
+			columns,
+		});
+
+		return (
+			<Table aria-label="Headings Tanstack table" {...args}>
+				<Table.Thead>
+					{table.getHeaderGroups().map(({ id, headers }) => (
+						<Table.Tr key={id}>
+							{headers.map((header) => (
+								<Table.Th key={header.id} colSpan={header.colSpan}>
+									{header.isPlaceholder ||
+										flexRender(
+											header.column.columnDef.header,
+											header.getContext(),
+										)}
+								</Table.Th>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Thead>
+				<Table.Tbody>
+					{table.getRowModel().rows.map((row) => (
+						<Table.Tr key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<Table.Td key={cell.id}>
+									{cell.getValue() as React.ReactNode}
+								</Table.Td>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Tbody>
+			</Table>
+		);
+	},
+};
+
+export const SortableSimple: Story = {
+	render: function Render(args) {
+		const [sort, setSort] = useState<{
+			key: ColumnKeys;
+			value: "none" | "ascending" | "descending";
+		}>({
+			key: "firstName",
+			value: "none",
+		});
+
+		const updateSort = (newKey: ColumnKeys) =>
+			setSort(({ key, value }) => ({
+				key: newKey,
+				value:
+					newKey !== key || value === "none"
+						? "ascending"
+						: value === "ascending"
+							? "descending"
+							: "none",
+			}));
+
+		const columns: ColumnsType = [
+			{ key: "firstName", label: "First name" },
+			{ key: "lastName", label: "Last name" },
+			{ key: "age", label: "Age", numeric: true },
+			{ key: "visits", label: "Visits", numeric: true },
+		];
+
+		return (
+			<table className={styles.table} aria-label="Sortable table" {...args}>
+				<thead>
+					<tr>
+						{columns.map(({ key, label, numeric }) => (
+							<th
+								key={key}
+								data-numeric={numeric}
+								aria-sort={sort.key === key ? sort.value : "none"}
+							>
+								<button type="button" onClick={() => updateSort(key)}>
+									{label}
+								</button>
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{mockDataSmall
+						.slice() // Make a copy for mutability
+						.sort((a, b) => {
+							if (sort.value === "none") return 0;
+							const asc = sort.value === "ascending";
+							const aVal = asc ? a[sort.key] : b[sort.key];
+							const bVal = asc ? b[sort.key] : a[sort.key];
+
+							return typeof aVal === "number"
+								? Number(aVal) - Number(bVal)
+								: String(aVal).localeCompare(String(bVal));
+						})
+						.map((row) => (
+							<tr key={`${row.firstName}-${row.lastName}`}>
+								{columns.map(({ key, numeric }) => (
+									<td key={key} data-numeric={numeric}>
+										{row[key]}
+									</td>
+								))}
+							</tr>
+						))}
+				</tbody>
+			</table>
+		);
+	},
+};
+
+export const SortableTanstack: Story = {
+	render: function Render(args) {
+		const [sorting, setSorting] = useState<SortingState>([]);
+		const table = useReactTable({
+			getCoreRowModel: getCoreRowModel(),
+			getSortedRowModel: getSortedRowModel(),
+			onSortingChange: setSorting,
+			state: { sorting },
+			data: mockData,
+			columns: mockColumns,
+		});
+
+		return (
+			<Table aria-label="Sortable Tanstack table" {...args}>
+				<Table.Thead>
+					{table.getHeaderGroups().map(({ id, headers }) => (
+						<Table.Tr key={id}>
+							{headers.map((header) => (
+								<Table.ThSortable
+									key={header.id}
+									colSpan={header.colSpan}
+									aria-sort={header.column.getIsSorted()}
+									onClick={header.column.getToggleSortingHandler()}
+								>
+									{flexRender(
+										header.column.columnDef.header,
+										header.getContext(),
+									)}
+								</Table.ThSortable>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Thead>
+				<Table.Tbody>
+					{table.getRowModel().rows.map((row) => (
+						<Table.Tr key={row.id}>
+							{row.getVisibleCells().map((cell) => (
+								<Table.Td key={cell.id}>
+									{cell.getValue() as React.ReactNode}
+								</Table.Td>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Tbody>
+			</Table>
+		);
+	},
+};
+
+export const PaginatableSimple: Story = {
+	render: function Render(args) {
+		const size = 10;
+		const [page, setPage] = useState(0);
+		const index = page * size;
+		const columns: ColumnsType = [
+			{ key: "firstName", label: "First name" },
+			{ key: "lastName", label: "Last name" },
+			{ key: "age", label: "Age", numeric: true },
+			{ key: "visits", label: "Visits", numeric: true },
+		];
+
+		const { pages, next, prev } = pagination({
+			current: page + 1,
+			total: Math.ceil(mockData.length / size),
+			show: 7,
+		});
+
+		return (
+			<>
+				<table
+					className={styles.table}
+					aria-label="Paginatable table"
+					{...args}
+				>
+					<thead>
+						<tr>
+							{columns.map(({ label, numeric }) => (
+								<th key={label} data-numeric={numeric}>
+									{label}
+								</th>
+							))}
+						</tr>
+					</thead>
+					<tbody>
+						{mockData.slice(index, index + size).map((row) => (
+							<tr key={`${row.firstName}-${row.lastName}`}>
+								{columns.map(({ key, numeric }) => (
+									<td key={key} data-numeric={numeric}>
+										{row[key]}
+									</td>
+								))}
+							</tr>
+						))}
+					</tbody>
+				</table>
+				<nav className={styles.pagination} data-size="sm">
+					<ul>
+						<li>
+							<button
+								disabled={!prev}
+								className={styles.button}
+								type="button"
+								onClick={() => setPage(prev - 1)}
+							>
+								Forrige
+							</button>
+						</li>
+						{pages.map(({ current, key, page }) => (
+							<li key={key}>
+								{!!page && (
+									<button
+										aria-current={current}
+										className={styles.button}
+										type="button"
+										onClick={() => setPage(page - 1)}
+									>
+										{page}
+									</button>
+								)}
+							</li>
+						))}
+						<li>
+							<button
+								disabled={!next}
+								className={styles.button}
+								type="button"
+								onClick={() => setPage(next - 1)}
+							>
+								Neste
+							</button>
+						</li>
+					</ul>
+				</nav>
+			</>
+		);
+	},
+};
+
+export const PaginatableTanstack: Story = {
+	render: function Render(args) {
+		const table = useReactTable({
+			getCoreRowModel: getCoreRowModel(),
+			getPaginationRowModel: getPaginationRowModel(),
+			data: mockData,
+			columns: mockColumns,
+		});
+
+		const { pages, next, prev } = pagination({
+			current: table.getState().pagination.pageIndex + 1,
+			total: table.getPageCount(),
+			show: 7,
+		});
+
+		return (
+			<>
+				<Table aria-label="Paginatable Tanstack table" {...args}>
+					<Table.Thead>
+						{table.getHeaderGroups().map(({ id, headers }) => (
+							<Table.Tr key={id}>
+								{headers.map((header) => (
+									<Table.Th key={header.id} colSpan={header.colSpan}>
+										{flexRender(
+											header.column.columnDef.header,
+											header.getContext(),
+										)}
+									</Table.Th>
+								))}
+							</Table.Tr>
+						))}
+					</Table.Thead>
+					<Table.Tbody>
+						{table.getRowModel().rows.map((row) => (
+							<Table.Tr key={row.id}>
+								{row.getVisibleCells().map((cell) => (
+									<Table.Td key={cell.id}>
+										{cell.getValue() as React.ReactNode}
+									</Table.Td>
+								))}
+							</Table.Tr>
+						))}
+					</Table.Tbody>
+				</Table>
+				<Pagination data-size="sm" aria-label="Sidenavigering">
+					<ul>
+						<li>
+							<Button
+								disabled={!prev}
+								onClick={() => table.setPageIndex(prev - 1)}
+							>
+								Forrige
+							</Button>
+						</li>
+						{pages.map(({ current, key, page }) => (
+							<li key={key}>
+								{!!page && (
+									<Button
+										aria-current={current}
+										onClick={() => table.setPageIndex(page - 1)}
+									>
+										{page}
+									</Button>
+								)}
+							</li>
+						))}
+						<li>
+							<Button
+								disabled={!next}
+								onClick={() => table.setPageIndex(next - 1)}
+							>
+								Neste
+							</Button>
+						</li>
+					</ul>
+				</Pagination>
+			</>
+		);
+	},
+};
+
+export const SearchableSimple: Story = {
+	render: function Render(args) {
+		const [search, setSearch] = useState("");
+		const columns: ColumnsType = [
+			{ key: "firstName", label: "First name" },
+			{ key: "lastName", label: "Last name" },
+			{ key: "age", label: "Age", numeric: true },
+			{ key: "visits", label: "Visits", numeric: true },
+		];
+		const filtered = mockData.filter((row) => {
+			const text = Object.values(row).join(" ");
+			return text.toLowerCase().includes(search.toLowerCase());
+		});
+
+		return (
+			<>
+				<ds-field className={styles.field}>
+					<label>Search</label>
+					<input
+						className={styles.input}
+						type="search"
+						onChange={({ target }) => setSearch(target.value)}
+						value={search}
+					/>
+				</ds-field>
+				<table
+					className={styles.table}
+					aria-label="Searchable table"
+					data-fixed
+					{...args}
+				>
+					<thead>
+						<tr>
+							{columns.map(({ label, numeric }) => (
+								<th key={label} data-numeric={numeric}>
+									{label}
+								</th>
+							))}
+						</tr>
+					</thead>
+					<tbody>
+						{filtered.map((row) => (
+							<tr key={`${row.firstName}-${row.lastName}`}>
+								{columns.map(({ key, numeric }) => (
+									<td key={key} data-numeric={numeric}>
+										{row[key]}
+									</td>
+								))}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</>
+		);
+	},
+};
+
+export const SearchableTanstack: Story = {
+	render: function Render(args) {
+		const [search, setSearch] = useState("");
+		const table = useReactTable({
+			getCoreRowModel: getCoreRowModel(),
+			getFilteredRowModel: getFilteredRowModel(),
+			onGlobalFilterChange: setSearch,
+			data: mockData,
+			state: { globalFilter: search },
+			columns: mockColumns,
+		});
+
+		return (
+			<>
+				<Field
+					as="input"
+					type="search"
+					label="Search"
+					onChange={({ target }) => setSearch(target.value)}
+					value={search}
+				/>
+				<Table aria-label="Searchable Tanstack table" data-fixed {...args}>
+					<Table.Thead>
+						{table.getHeaderGroups().map(({ id, headers }) => (
+							<Table.Tr key={id}>
+								{headers.map((header) => (
+									<Table.Th key={header.id} colSpan={header.colSpan}>
+										{flexRender(
+											header.column.columnDef.header,
+											header.getContext(),
+										)}
+									</Table.Th>
+								))}
+							</Table.Tr>
+						))}
+					</Table.Thead>
+					<Table.Tbody>
+						{table.getRowModel().rows.map((row) => (
+							<Table.Tr key={row.id}>
+								{row.getVisibleCells().map((cell) => (
+									<Table.Td key={cell.id}>
+										{cell.getValue() as React.ReactNode}
+									</Table.Td>
+								))}
+							</Table.Tr>
+						))}
+					</Table.Tbody>
+				</Table>
+			</>
+		);
+	},
+};
+
+export const ExpandableSimple: Story = {
+	render: function Render(args) {
+		const columns: ColumnsType = [
+			{ key: "firstName", label: "First name" },
+			{ key: "lastName", label: "Last name" },
+			{ key: "age", label: "Age", numeric: true },
+			{ key: "visits", label: "Visits", numeric: true },
+		];
+
+		return (
+			<table className={styles.table} aria-label="Expandable table" {...args}>
+				<thead>
+					<tr>
+						{columns.map(({ label, numeric }) => (
+							<th key={label} data-numeric={numeric}>
+								{label}
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{mockExpand.map(function Row(row) {
+						const [expanded, setExpanded] = useState(false);
+
+						return (
+							<Fragment key={`${row.firstName}-${row.lastName}`}>
+								<tr>
+									{columns.map(({ key, numeric }, cellIndex) => (
+										<td key={key} data-numeric={numeric}>
+											{cellIndex === 0 ? (
+												<button
+													aria-expanded={expanded}
+													onClick={() => setExpanded(!expanded)}
+													type="button"
+												>
+													{row[key]}
+												</button>
+											) : (
+												row[key]
+											)}
+										</td>
+									))}
+								</tr>
+								<tr>
+									<td colSpan={columns.length}>{row.expand}</td>
+								</tr>
+							</Fragment>
+						);
+					})}
+				</tbody>
+			</table>
+		);
+	},
+};
+
+export const ExpandableTanstack: Story = {
+	render: function Render(args) {
+		const [expanded, setExpanded] = useState<ExpandedState>({});
+		const table = useReactTable({
+			getCoreRowModel: getCoreRowModel(),
+			onExpandedChange: setExpanded,
+			state: { expanded },
+			data: mockExpand,
+			columns: mockColumns,
+		});
+
+		return (
+			<Table aria-label="Expandable Tanstack table" {...args}>
+				<Table.Thead>
+					{table.getHeaderGroups().map(({ id, headers }) => (
+						<Table.Tr key={id}>
+							{headers.map((header) => (
+								<Table.Th key={header.id} colSpan={header.colSpan}>
+									{flexRender(
+										header.column.columnDef.header,
+										header.getContext(),
+									)}
+								</Table.Th>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Thead>
+				<Table.Tbody>
+					{table.getRowModel().rows.map((row) => (
+						<Fragment key={row.id}>
+							<Table.Tr>
+								{row.getVisibleCells().map((cell, cellIndex) => (
+									<Table.Td key={cell.id}>
+										{cellIndex === 0 ? (
+											<Button
+												aria-expanded={row.getIsExpanded()}
+												onClick={() => row.toggleExpanded()}
+											>
+												{cell.getValue() as React.ReactNode}
+											</Button>
+										) : (
+											(cell.getValue() as React.ReactNode)
+										)}
+									</Table.Td>
+								))}
+							</Table.Tr>
+							<Table.Tr hidden={!row.getIsExpanded()}>
+								<Table.Td colSpan={row.getVisibleCells().length}>
+									{row.original.expand}
+								</Table.Td>
+							</Table.Tr>
+						</Fragment>
+					))}
+				</Table.Tbody>
+			</Table>
+		);
+	},
+};
+
+export const CheckableSimple: Story = {
+	render: function Render(args) {
+		const columns: ColumnsType = [
+			{ key: "firstName", label: "First name" },
+			{ key: "lastName", label: "Last name" },
+			{ key: "age", label: "Age", numeric: true },
+			{ key: "visits", label: "Visits", numeric: true },
+		];
+
+		return (
+			<table className={styles.table} aria-label="Checkable table" {...args}>
+				<thead>
+					<tr>
+						{columns.map(({ label, numeric }) => (
+							<th key={label} data-numeric={numeric}>
+								{label}
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{mockDataSmall.map((row, i) => (
+						<tr
+							key={`${row.firstName}-${row.lastName}`}
+							data-clickdelegatefor={`check-${i}`}
+						>
+							{columns.map(({ key, numeric }, cellIndex) => (
+								<td key={key} data-numeric={numeric}>
+									{cellIndex ? (
+										row[key]
+									) : (
+										<ds-field className={styles.field}>
+											<input
+												className={styles.input}
+												type="checkbox"
+												id={`check-${i}`}
+											/>
+											<label>{row[key]}</label>
+										</ds-field>
+									)}
+								</td>
+							))}
+						</tr>
+					))}
+				</tbody>
+			</table>
+		);
+	},
+};
+
+export const CheckableTanstack: Story = {
+	render: function Render(args) {
+		const table = useReactTable({
+			getCoreRowModel: getCoreRowModel(),
+			data: mockData,
+			columns: mockColumns,
+		});
+
+		return (
+			<Table aria-label="Checkable Tanstack table" {...args}>
+				<Table.Thead>
+					{table.getHeaderGroups().map(({ id, headers }) => (
+						<Table.Tr key={id}>
+							{headers.map((header) => (
+								<Table.Th key={header.id} colSpan={header.colSpan}>
+									{header.isPlaceholder ||
+										flexRender(
+											header.column.columnDef.header,
+											header.getContext(),
+										)}
+								</Table.Th>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Thead>
+				<Table.Tbody>
+					{table.getRowModel().rows.map((row) => (
+						<Table.Tr key={row.id} data-clickdelegatefor={`check-${row.id}`}>
+							{row.getVisibleCells().map((cell, index) => (
+								<Table.Td key={cell.id}>
+									{index ? (
+										(cell.getValue() as React.ReactNode)
+									) : (
+										<Field
+											id={`check-${row.id}`}
+											as="input"
+											type="checkbox"
+											checked={row.getIsSelected()}
+											onChange={row.getToggleSelectedHandler()}
+											label={cell.getValue() as React.ReactNode}
+										/>
+									)}
+								</Table.Td>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Tbody>
+			</Table>
+		);
+	},
+};
+
+export const ClickableSimple: Story = {
+	render: () => (
+		<table
+			className={styles.table}
+			data-border="true"
+			data-fixed
+			aria-label="Table with clickable rows"
+		>
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr data-clickdelegatefor="button-1">
+					<td>
+						<button
+							id="button-1"
+							type="button"
+							onClick={() => alert("clicked row 1")}
+						>
+							Antoni
+						</button>
+					</td>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>
+						<a href="#none">128</a>
+					</td>
+				</tr>
+				<tr data-clickdelegatefor="button-2">
+					<td>
+						<button
+							id="button-2"
+							type="button"
+							onClick={() => alert("clicked row 2")}
+						>
+							Jenine
+						</button>
+					</td>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr data-clickdelegatefor="button-3">
+					<td>
+						<button
+							id="button-3"
+							type="button"
+							onClick={() => alert("clicked row 3")}
+						>
+							Leigh
+						</button>
+					</td>
+					<td>Klein</td>
+					<td>26</td>
+					<td>114</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const ClickableTanstack: Story = {
+	render: function Render(args) {
+		const table = useReactTable({
+			getCoreRowModel: getCoreRowModel(),
+			data: mockData,
+			columns: mockColumns,
+		});
+
+		return (
+			<Table aria-label="Checkable Tanstack table" {...args}>
+				<Table.Thead>
+					{table.getHeaderGroups().map(({ id, headers }) => (
+						<Table.Tr key={id}>
+							{headers.map((header) => (
+								<Table.Th key={header.id} colSpan={header.colSpan}>
+									{header.isPlaceholder ||
+										flexRender(
+											header.column.columnDef.header,
+											header.getContext(),
+										)}
+								</Table.Th>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Thead>
+				<Table.Tbody>
+					{table.getRowModel().rows.map((row, rowIndex) => (
+						<Table.Tr key={row.id} data-clickdelegatefor={`button-${rowIndex}`}>
+							{row.getVisibleCells().map((cell, index) => (
+								<Table.Td key={cell.id}>
+									{index ? (
+										(cell.getValue() as React.ReactNode)
+									) : (
+										<Button
+											id={`button-${rowIndex}`}
+											onClick={() => alert(`clicked row ${rowIndex + 1}`)}
+										>
+											{cell.getValue() as React.ReactNode}
+										</Button>
+									)}
+								</Table.Td>
+							))}
+						</Table.Tr>
+					))}
+				</Table.Tbody>
+			</Table>
+		);
+	},
+};
+
+export const WithHorizontalTitles: Story = {
+	render: () => (
+		<table className={styles.table} aria-label="Table with horizontal titles">
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th scope="row">Antoni</th>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>128</td>
+				</tr>
+				<tr>
+					<th scope="row">Jenine</th>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr>
+					<th scope="row">Leigh</th>
+					<td>Klein</td>
+					<td>26</td>
+					<td>114</td>
+				</tr>
+				<tr>
+					<th scope="row">Zara</th>
+					<td>Greenrodd</td>
+					<td>28</td>
+					<td>36</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const WithFixedWidths: Story = {
+	render: () => (
+		<table
+			className={styles.table}
+			data-fixed
+			aria-label="Table with fixed widths"
+		>
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Antoni</td>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>128</td>
+				</tr>
+				<tr>
+					<td>Jenine</td>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr>
+					<td>Leigh</td>
+					<td>Klein</td>
+					<td>26</td>
+					<td>114</td>
+				</tr>
+				<tr>
+					<td>Zara</td>
+					<td>Greenrodd</td>
+					<td>28</td>
+					<td>36</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const WithAlign: Story = {
+	render: () => (
+		<div className={styles.grid}>
+			<code>data-align="start":</code>
+			<table
+				className={styles.table}
+				data-align="start"
+				aria-label="Table with align start"
+			>
+				<tbody>
+					<tr>
+						<th data-nowrap>Reference number</th>
+						<td>1</td>
+					</tr>
+					<tr>
+						<th>Description</th>
+						<td>
+							A preliminary version.
+							<br />
+							An application for a certificate has been initiated.
+						</td>
+					</tr>
+					<tr>
+						<th>Template</th>
+						<td>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
+							enim ut ex posuere suscipit id eu justo. Cras vehicula ornare
+							efficitur. Etiam commodo est velit, eget mattis felis sollicitudin
+							sit amet. Etiam non dui fermentum, malesuada augue in, elementum
+							felis.
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<br />
+			<code>data-align="center":</code>
+			<table
+				className={styles.table}
+				data-align="center"
+				aria-label="Table with align start"
+			>
+				<tbody>
+					<tr>
+						<th data-nowrap>Reference number</th>
+						<td>1</td>
+					</tr>
+					<tr>
+						<th>Description</th>
+						<td>
+							A preliminary version.
+							<br />
+							An application for a certificate has been initiated.
+						</td>
+					</tr>
+					<tr>
+						<th>Template</th>
+						<td>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed
+							enim ut ex posuere suscipit id eu justo. Cras vehicula ornare
+							efficitur. Etiam commodo est velit, eget mattis felis sollicitudin
+							sit amet. Etiam non dui fermentum, malesuada augue in, elementum
+							felis.
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	),
+};
+
+export const WithNumericValues: Story = {
+	render: () => (
+		<table className={styles.table} aria-label="Table with numeric values">
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Antoni</td>
+					<td>Foyston</td>
+					<td data-numeric>74</td>
+					<td data-numeric>128</td>
+				</tr>
+				<tr>
+					<td>Jenine</td>
+					<td>Healey</td>
+					<td data-numeric>22</td>
+					<td data-numeric>194</td>
+				</tr>
+				<tr>
+					<td>Leigh</td>
+					<td>Klein</td>
+					<td data-numeric>26</td>
+					<td data-numeric>114</td>
+				</tr>
+				<tr>
+					<td>Zara</td>
+					<td>Greenrodd</td>
+					<td data-numeric>28</td>
+					<td data-numeric>36</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const WithJustify: Story = {
+	render: () => (
+		<table className={styles.table} aria-label="Table with numeric values">
+			<thead>
+				<tr>
+					<th>Kostnad</th>
+					<th data-justify="end">Pris</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Gebyr 1</td>
+					<td data-justify="end" data-numeric>
+						128 kr
+					</td>
+				</tr>
+				<tr>
+					<td>Gebyr 2</td>
+					<td data-justify="end" data-numeric>
+						194 kr
+					</td>
+				</tr>
+				<tr>
+					<td>Gebyr 3</td>
+					<td data-justify="end" data-numeric>
+						114 kr
+					</td>
+				</tr>
+				<tr>
+					<th>Total</th>
+					<th data-justify="end" data-numeric>
+						194 kr
+					</th>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const WithFooter: Story = {
+	render: () => (
+		<table className={styles.table} aria-label="Table with footer">
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Antoni</td>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>128</td>
+				</tr>
+				<tr>
+					<td>Jenine</td>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr>
+					<td>Leigh</td>
+					<td>Klein</td>
+					<td>26</td>
+					<td>114</td>
+				</tr>
+				<tr>
+					<td>Zara</td>
+					<td>Greenrodd</td>
+					<td>28</td>
+					<td>36</td>
+				</tr>
+			</tbody>
+			<tfoot>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</tfoot>
+		</table>
+	),
+};
+
+export const WithBorderAround: Story = {
+	render: () => (
+		<table
+			className={styles.table}
+			data-border="true"
+			aria-label="Table with border around"
+		>
+			<thead>
+				<tr>
+					<th data-nowrap>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th>Antoni</th>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>128</td>
+				</tr>
+				<tr>
+					<th>Jenine</th>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr>
+					<th>Leigh</th>
+					<td>Klein</td>
+					<td>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis
+						quam, pulvinar et lacus et, molestie semper ante.
+					</td>
+					<td>114</td>
+				</tr>
+				<tr>
+					<th>Zara</th>
+					<td>Greenrodd</td>
+					<td>28</td>
+					<td>36</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const WithoutBorders: Story = {
+	render: () => (
+		<div className={styles.grid} style={{ minWidth: 400 }}>
+			<h2 className={styles.heading}>Table heading</h2>
+			<table
+				className={styles.table}
+				data-border="false"
+				aria-label="Table without borders"
+			>
+				<tbody>
+					<tr>
+						<th>Antoni Foyston</th>
+						<td>74</td>
+					</tr>
+					<tr>
+						<th>Jenine Healey</th>
+						<td>22</td>
+					</tr>
+					<tr>
+						<th>Leigh Klein</th>
+						<td>14</td>
+					</tr>
+					<tr>
+						<th>Zara Greenrodd</th>
+						<td>28</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<>
+			<table
+				data-fixed
+				data-size="sm"
+				className={styles.table}
+				aria-label="Small table"
+			>
+				<thead>
+					<tr>
+						<th>Size</th>
+						<th>Attr</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Small</td>
+						<td>
+							<code>data-size="sm"</code>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<table
+				data-fixed
+				data-size="md"
+				className={styles.table}
+				aria-label="Small table"
+			>
+				<thead>
+					<tr>
+						<th>Size</th>
+						<th>Attr</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Medium</td>
+						<td>
+							<code>data-size="md"</code>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			<table
+				data-fixed
+				data-size="lg"
+				className={styles.table}
+				aria-label="Small table"
+			>
+				<thead>
+					<tr>
+						<th>Size</th>
+						<th>Attr</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Large</td>
+						<td>
+							<code>data-size="lg"</code>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</>
+	),
+};
+
+export const MobileScroll: Story = {
+	decorators: mobileDecorators,
+	parameters: {
+		viewport: {
+			defaultViewport: "mobile2", // Large mobile default viewport
+		},
+	},
+	render: () => (
+		<figure>
+			<table
+				className={styles.table}
+				aria-label="Mobile scrollable table"
+				data-nowrap
+			>
+				<thead>
+					<tr>
+						<th>First name</th>
+						<th>Last name</th>
+						<th>Description</th>
+						<th>Age</th>
+						<th>Visits</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Antoni</td>
+						<td>Foyston</td>
+						<td>Lorem ipsum dolor sit amet consectetur.</td>
+						<td>74</td>
+						<td>128</td>
+					</tr>
+					<tr>
+						<td>Jenine</td>
+						<td>Healey</td>
+						<td>Lorem ipsum dolor sit amet consectetur.</td>
+						<td>22</td>
+						<td>194</td>
+					</tr>
+					<tr>
+						<td>Leigh</td>
+						<td>Klein</td>
+						<td>Lorem ipsum dolor sit amet consectetur.</td>
+						<td>26</td>
+						<td>114</td>
+					</tr>
+					<tr>
+						<td>Zara</td>
+						<td>Greenrodd</td>
+						<td>Lorem ipsum dolor sit amet consectetur.</td>
+						<td>28</td>
+						<td>36</td>
+					</tr>
+				</tbody>
+			</table>
+		</figure>
+	),
+};
+
+export const MobileDivided: Story = {
+	decorators: mobileDecorators,
+	parameters: {
+		viewport: {
+			defaultViewport: "mobile2", // Large mobile default viewport
+		},
+	},
+	render: () => (
+		<table
+			className={styles.table}
+			data-mobile="divided"
+			aria-label="Mobile divided table"
+		>
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th>Antoni</th>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>128</td>
+				</tr>
+				<tr>
+					<th>Jenine</th>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr>
+					<th>Leigh</th>
+					<td>Klein</td>
+					<td>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis
+						quam, pulvinar et lacus et, molestie semper ante.
+					</td>
+					<td>114</td>
+				</tr>
+				<tr>
+					<th>Zara</th>
+					<td>Greenrodd</td>
+					<td>28</td>
+					<td>36</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const MobileSpaced: Story = {
+	decorators: mobileDecorators,
+	parameters: {
+		viewport: {
+			defaultViewport: "mobile2", // Large mobile default viewport
+		},
+	},
+	render: () => (
+		<table
+			className={styles.table}
+			data-mobile="spaced"
+			aria-label="Mobile spaced table"
+		>
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th>Antoni</th>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>128</td>
+				</tr>
+				<tr>
+					<th>Jenine</th>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr>
+					<th>Leigh</th>
+					<td>Klein</td>
+					<td>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis
+						quam, pulvinar et lacus et, molestie semper ante.
+					</td>
+					<td>114</td>
+				</tr>
+				<tr>
+					<th>Zara</th>
+					<td>Greenrodd</td>
+					<td>28</td>
+					<td>36</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};
+
+export const MobileStacked: Story = {
+	decorators: mobileDecorators,
+	parameters: {
+		viewport: {
+			defaultViewport: "mobile2", // Large mobile default viewport
+		},
+	},
+	render: () => (
+		<table
+			className={styles.table}
+			data-mobile="stacked"
+			aria-label="Mobile stacked table"
+		>
+			<thead>
+				<tr>
+					<th>First name</th>
+					<th>Last name</th>
+					<th>Age</th>
+					<th>Visits</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<th>Antoni</th>
+					<td>Foyston</td>
+					<td>74</td>
+					<td>128</td>
+				</tr>
+				<tr>
+					<th>Jenine</th>
+					<td>Healey</td>
+					<td>22</td>
+					<td>194</td>
+				</tr>
+				<tr>
+					<th>Leigh</th>
+					<td>Klein</td>
+					<td>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis
+						quam, pulvinar et lacus et, molestie semper ante.
+					</td>
+					<td>114</td>
+				</tr>
+				<tr>
+					<th>Zara</th>
+					<td>Greenrodd</td>
+					<td>28</td>
+					<td>36</td>
+				</tr>
+			</tbody>
+		</table>
+	),
+};