Table

import { TBody, TCell, THead, TRow, Table } from '@/ui/table/Table';

const MONTHS = [
  { month: 'January', min: '22°C', max: '29°C', rain: '61 mm' },
  { month: 'February', min: '22°C', max: '29°C', rain: '48 mm' },
  { month: 'March', min: '23°C', max: '30°C', rain: '56 mm' },
];

export function TableDemo() {
  return (
    <Table caption="Weather in Punta Cana" captionClassName="sr-only">
      <THead>
        <TRow>
          <TCell as="th">Month</TCell>
          <TCell as="th">Temperature (min)</TCell>
          <TCell as="th">Temperature (max)</TCell>
          <TCell as="th">Precipitation</TCell>
        </TRow>
      </THead>
      <TBody>
        {MONTHS.map(({ month, min, max, rain }) => (
          <TRow key={month}>
            <TCell as="th">{month}</TCell>
            <TCell>{min}</TCell>
            <TCell>{max}</TCell>
            <TCell>{rain}</TCell>
          </TRow>
        ))}
      </TBody>
    </Table>
  );
}

'use client';

import { TBody, TCell, THead, TRow, Table } from '@/ui/table/Table';

const STOPS = ['Airport', 'Bus station', 'Harbour', 'City centre', 'Resort'];
const DEPARTURES = ['07:30', '09:00', '10:30', '12:00', '13:30', '15:00', '16:30', '18:00'];

export function TableStickyDemo() {
  return (
    <div className="max-w-375">
      <Table caption="Shuttle timetable" captionClassName="sr-only" sticky>
        <THead>
          <TRow>
            <TCell as="th">Stop</TCell>
            {DEPARTURES.map((_, index) => (
              <TCell as="th" key={index}>{`Bus ${index + 1}`}</TCell>
            ))}
          </TRow>
        </THead>
        <TBody>
          {STOPS.map((stop, stopIndex) => (
            <TRow key={stop}>
              <TCell as="th">{stop}</TCell>
              {DEPARTURES.map((time) => {
                const [hours, minutes] = time.split(':').map(Number);
                const at = hours * 60 + minutes + stopIndex * 15;

                return (
                  <TCell key={time}>
                    {`${String(Math.floor(at / 60)).padStart(2, '0')}:${String(at % 60).padStart(2, '0')}`}
                  </TCell>
                );
              })}
            </TRow>
          ))}
        </TBody>
      </Table>
    </div>
  );
}

import { TBody, TCell, THead, TRow, Table } from '@/ui/table/Table';

const MONTHS = [
  { month: 'January', sunshine: '8 h', sea: '26°C' },
  { month: 'February', sunshine: '9 h', sea: '27°C' },
  { month: 'March', sunshine: '10 h', sea: '28°C' },
];

export function TableIconsDemo() {
  return (
    <Table caption="Weather in Punta Cana" captionClassName="sr-only">
      <THead>
        <TRow>
          <TCell as="th">Month</TCell>
          <TCell as="th" icon="SunView">
            Sunshine
          </TCell>
          <TCell as="th" icon="SwimmingArea">
            Sea
          </TCell>
        </TRow>
      </THead>
      <TBody>
        {MONTHS.map(({ month, sunshine, sea }) => (
          <TRow key={month}>
            <TCell as="th">{month}</TCell>
            <TCell>{sunshine}</TCell>
            <TCell>{sea}</TCell>
          </TRow>
        ))}
      </TBody>
    </Table>
  );
}

import { TBody, TCell, THead, TRow, Table } from '@/ui/table/Table';

const WEEKS = [
  { week: 'Week 1', dates: 'June 1 – 8', price: '€1,290' },
  { week: 'Week 2', dates: 'June 8 – 15', price: '€1,390' },
  { week: 'Week 3', dates: 'June 15 – 22', price: '€1,490' },
];

export function TableTitlesDemo() {
  return (
    <Table caption="Prices per week" captionClassName="sr-only">
      <THead>
        <TRow>
          <TCell as="th">Week</TCell>
          <TCell as="th" icon="PlaneDefault" title="Flight">
            From Paris CDG
          </TCell>
          <TCell as="th" title="Price">
            per person
          </TCell>
        </TRow>
      </THead>
      <TBody>
        {WEEKS.map(({ week, dates, price }) => (
          <TRow key={week}>
            <TCell as="th" title={week}>
              {dates}
            </TCell>
            <TCell>Included</TCell>
            <TCell title={price}>All inclusive</TCell>
          </TRow>
        ))}
      </TBody>
    </Table>
  );
}

import { TABLE_HEADER_STYLE, TBody, TCell, TFoot, THead, TRow, Table } from '@/ui/table/Table';

const FEATURES = [
  { name: 'Ski pass', essential: 'Included', premium: 'Included', exclusive: 'Included' },
  { name: 'Ski lessons', essential: '—', premium: 'Included', exclusive: 'Included' },
  { name: 'Spa access', essential: '—', premium: '—', exclusive: 'Included' },
];

const COLUMN_OVERRIDES = [
  { style: TABLE_HEADER_STYLE },
  undefined,
  { className: 'bg-saffron font-semibold' },
];

export function TableColumnsDemo() {
  return (
    <Table
      caption="Compare the packages"
      captionClassName="sr-only"
      columnOverrides={COLUMN_OVERRIDES}
    >
      <THead>
        <TRow>
          <TCell as="th">Package</TCell>
          <TCell as="th">Essential</TCell>
          <TCell as="th">Premium</TCell>
          <TCell as="th">Exclusive</TCell>
        </TRow>
      </THead>
      <TBody>
        {FEATURES.map(({ name, essential, premium, exclusive }) => (
          <TRow key={name}>
            <TCell as="th">{name}</TCell>
            <TCell>{essential}</TCell>
            <TCell>{premium}</TCell>
            <TCell>{exclusive}</TCell>
          </TRow>
        ))}
      </TBody>
      <TFoot>
        <TRow>
          <TCell as="th">From</TCell>
          <TCell>€1,290</TCell>
          <TCell>€1,590</TCell>
          <TCell>€2,190</TCell>
        </TRow>
      </TFoot>
    </Table>
  );
}

import type { CSSProperties } from 'react';

import { TBody, TCell, THead, TRow, Table } from '@/ui/table/Table';

const HIGHLIGHTED_ROW = { '--table-td-bg-color': 'var(--color-wave)' } as CSSProperties;

const WEEKS = [
  { week: 'Week 1', price: '€1,290', places: '12' },
  { week: 'Week 2', price: '€1,190', places: '3' },
  { week: 'Week 3', price: '€1,390', places: '0' },
];

export function TableRowStylesDemo() {
  return (
    <Table caption="Availabilities" captionClassName="sr-only">
      <THead>
        <TRow>
          <TCell as="th">Week</TCell>
          <TCell as="th">Price</TCell>
          <TCell as="th">Remaining places</TCell>
        </TRow>
      </THead>
      <TBody>
        {WEEKS.map(({ week, price, places }) => (
          <TRow
            className={week === 'Week 2' ? 'font-semibold text-white' : undefined}
            key={week}
            style={week === 'Week 2' ? HIGHLIGHTED_ROW : undefined}
          >
            <TCell as="th">{week}</TCell>
            <TCell>{price}</TCell>
            <TCell className={places === '0' ? 'bg-red text-white' : undefined}>{places}</TCell>
          </TRow>
        ))}
      </TBody>
    </Table>
  );
}