A data table and a text table

// apps/docs/examples/ui/table.tsx'use client';
import {formatCurrency, formatNumber} from '@workspace/active-format';import {Code} from '@workspace/active-ui/components/composed/code';import {  Table,  TableBody,  TableCaption,  TableCell,  TableFooter,  TableHead,  TableHeader,  TableRow,} from '@workspace/active-ui/components/primitives/table';
// Fixed figures, formatted by active-format in the language of the page.const SCHEMES = [  {name: 'Pension scheme 2026', participants: 214, contributions: 1284500.5},  {name: 'Bridging scheme', participants: 38, contributions: 96300},  {name: 'Early retirement', participants: 7, contributions: 12250.75},];const money = (amount: number) =>  formatCurrency({amount, currency: 'EUR'}, 'en');
const SETTINGS = [  ['dateFormat', 'How a date is written, such as DMY_NUMERIC.'],  [    'numberFormat',    'The separators of a number, such as COMMA_DECIMAL_DOT_GROUP.',  ],];
/** * A data table: one row per record, numbers aligned to the right, a footer * with the totals and a caption. Below it a text table (`layout="text"`), * whose cells wrap and keep identifiers whole. */export default function TableExample() {  const total = SCHEMES.reduce((sum, s) => sum + s.contributions, 0);  return (    <div className="flex w-full max-w-xl flex-col gap-8">      <Table>        <TableCaption>Contributions collected in 2026</TableCaption>        <TableHeader>          <TableRow>            <TableHead>Scheme</TableHead>            <TableHead className="text-right">Participants</TableHead>            <TableHead className="text-right">Contributions</TableHead>          </TableRow>        </TableHeader>        <TableBody>          {SCHEMES.map((scheme) => (            <TableRow key={scheme.name}>              <TableCell className="font-medium">{scheme.name}</TableCell>              <TableCell className="text-right tabular-nums">                {formatNumber(scheme.participants, 'integer', 'en')}              </TableCell>              <TableCell className="text-right tabular-nums">                {money(scheme.contributions)}              </TableCell>            </TableRow>          ))}        </TableBody>        <TableFooter>          <TableRow>            <TableCell colSpan={2}>Total</TableCell>            <TableCell className="text-right tabular-nums">              {money(total)}            </TableCell>          </TableRow>        </TableFooter>      </Table>
      <Table layout="text" scrollLabel="Settings, scrolls sideways">        <TableHeader>          <TableRow>            <TableHead>Setting</TableHead>            <TableHead>Meaning</TableHead>          </TableRow>        </TableHeader>        <TableBody>          {SETTINGS.map(([name, meaning]) => (            <TableRow key={name}>              <TableCell>                <Code>{name}</Code>              </TableCell>              <TableCell>{meaning}</TableCell>            </TableRow>          ))}        </TableBody>      </Table>    </div>  );}