Table

const Preview = () => {
  return (
    <Table>
      <caption>Table caption</caption>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell>Header 1</Table.HeaderCell>
          <Table.HeaderCell>Header 2</Table.HeaderCell>
          <Table.HeaderCell>Header 3</Table.HeaderCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Cell 1</Table.Cell>
          <Table.Cell>Cell 2</Table.Cell>
          <Table.Cell>Cell 3</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Cell 4</Table.Cell>
          <Table.Cell>Cell 5</Table.Cell>
          <Table.Cell>Cell 6</Table.Cell>
        </Table.Row>
      </Table.Body>
      <Table.Foot>
        <Table.Row>
          <Table.HeaderCell>Footer 1</Table.HeaderCell>
          <Table.HeaderCell>Footer 2</Table.HeaderCell>
          <Table.HeaderCell>Footer 3</Table.HeaderCell>
        </Table.Row>
      </Table.Foot>
    </Table>
  );
};

render(<Preview />)

const Zebra = () => {
  return (
    <Table zebra>
      <caption>Antall søknader per måned</caption>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell>Måned</Table.HeaderCell>
          <Table.HeaderCell>2023</Table.HeaderCell>
          <Table.HeaderCell>2024</Table.HeaderCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.HeaderCell scope='row'>Januar</Table.HeaderCell>
          <Table.Cell>1 230</Table.Cell>
          <Table.Cell>1 450</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.HeaderCell scope='row'>Februar</Table.HeaderCell>
          <Table.Cell>980</Table.Cell>
          <Table.Cell>1 120</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.HeaderCell scope='row'>Mars</Table.HeaderCell>
          <Table.Cell>1 150</Table.Cell>
          <Table.Cell>1 300</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
};

render(<Zebra />)

const Border = () => {
  return (
    <Table border>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell>Header 1</Table.HeaderCell>
          <Table.HeaderCell>Header 2</Table.HeaderCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Cell 1</Table.Cell>
          <Table.Cell>Cell 2</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
};

render(<Border />)

const Numbers = () => (
  <Table
    style={{
      tableLayout: 'fixed',
      fontVariantNumeric: 'tabular-nums',
    }}
  >
    <caption>Antall søknader per måned</caption>
    <Table.Head>
      <Table.Row>
        <Table.HeaderCell scope='col'>Måned</Table.HeaderCell>
        <Table.HeaderCell scope='col' style={{ textAlign: 'right' }}>
          2023
        </Table.HeaderCell>
        <Table.HeaderCell scope='col' style={{ textAlign: 'right' }}>
          2024
        </Table.HeaderCell>
      </Table.Row>
    </Table.Head>
    <Table.Body>
      <Table.Row>
        <Table.HeaderCell scope='row'>Januar</Table.HeaderCell>
        <Table.Cell style={{ textAlign: 'right' }}>1 230</Table.Cell>
        <Table.Cell style={{ textAlign: 'right' }}>1 450</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.HeaderCell scope='row'>Februar</Table.HeaderCell>
        <Table.Cell style={{ textAlign: 'right' }}>980</Table.Cell>
        <Table.Cell style={{ textAlign: 'right' }}>1 120</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.HeaderCell scope='row'>Mars</Table.HeaderCell>
        <Table.Cell style={{ textAlign: 'right' }}>1 150</Table.Cell>
        <Table.Cell style={{ textAlign: 'right' }}>1 300</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
);

render(<Numbers />)

const Sortable = () => {
  const dummyData = [
    {
      id: 1,
      navn: 'Lise Nordmann',
      epost: 'lise@nordmann.no',
      telefon: '22345678',
    },
    {
      id: 2,
      navn: 'Kari Nordmann',
      epost: 'kari@nordmann.no',
      telefon: '87654321',
    },
    {
      id: 3,
      navn: 'Ola Nordmann',
      epost: 'ola@nordmann.no',
      telefon: '32345678',
    },
    {
      id: 4,
      navn: 'Per Nordmann',
      epost: 'per@nordmann.no',
      telefon: '12345678',
    },
  ];

  const [sortField, setSortField] = useState<
    keyof (typeof dummyData)[0] | null
  >(null);
  const [sortDirection, setSortDirection] =
    useState<TableHeaderCellProps['sort']>(undefined);

  const handleSort = (field: keyof (typeof dummyData)[0]) => {
    if (sortField === field && sortDirection === 'descending') {
      setSortField(null);
      setSortDirection(undefined);
    } else {
      setSortField(field);
      setSortDirection(
        sortField === field && sortDirection === 'ascending'
          ? 'descending'
          : 'ascending',
      );
    }
  };

  const sortedData = [...dummyData].sort((a, b) => {
    if (sortField === null) return 0;
    if (a[sortField] < b[sortField])
      return sortDirection === 'ascending' ? -1 : 1;
    if (a[sortField] > b[sortField])
      return sortDirection === 'ascending' ? 1 : -1;
    return 0;
  });

  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.HeaderCell
            sort={sortField === 'navn' ? sortDirection : 'none'}
            onClick={() => handleSort('navn')}
          >
            Navn
          </Table.HeaderCell>
          <Table.HeaderCell>Epost</Table.HeaderCell>
          <Table.HeaderCell
            sort={sortField === 'telefon' ? sortDirection : 'none'}
            onClick={() => handleSort('telefon')}
          >
            Telefon
          </Table.HeaderCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        {sortedData.map((row) => (
          <Table.Row key={row.id}>
            <Table.Cell>{row.navn}</Table.Cell>
            <Table.Cell>{row.epost}</Table.Cell>
            <Table.Cell>{row.telefon}</Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
};

render(<Sortable />)