import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import { Example, CssVariables, JumpTo } from '../../.storybook/blocks';
import { Button } from "../react";
import * as stories from './table.stories';
import { Flex } from '../react';
import styles from '../styles.module.css';

<Meta of={stories} />

# Table
>Table brukes for å vise strukturert informasjon på en ryddig og oversiktlig måte. Tabeller kan gjøre det enklere for brukerne å skanne og sammenligne informasjon.

<JumpTo />

## Kode
- Legg klassen `table` på `<table>`
- Bruk `<thead>` med `<tr><th>` som barn for topplinje
- Bruk `<tbody>` med `<tr><td>` som barn for rader
- Bruk `aria-label` for å navngi tabellen for skjermlesere
- Bruk `data-nowrap` hvor du vil på tabellen, rader eller celler for å hindre linjeskift
<Canvas of={stories.Default} />

## Horisontale titler
- Bruk `<th scope="row">` som første barn i en rad for å få horisontal overskrift
<Canvas of={stories.WithHorizontalTitles} />

## Låste bredder
- Tabeller tilpasser kolonnebredder automatisk etter innhold
- Dette kan være upraktisk når innholdet endrer seg/sorteres/pagineres
- Bruk `data-fixed` på `<table>` for låste bredder. **OBS:** Fungerer ikke med [mobil scroll](#mobil-scroll)
- Bruk evt. `style="width: X"` på `<th>` for å sette bredde på gitte kolonner
<Canvas of={stories.WithFixedWidths} />

## Numeriske verdier
- Bruk `data-numeric` for tall med lik bredde.
<Canvas of={stories.WithNumericValues} />

## Tekstjustering
- Bruk `data-justify="start | center | end"` for å justere tekstplassering.
<Canvas of={stories.WithJustify} />

## Vertikal justering av innhold
- Bruk `data-align="start | center"` for å vertikalt justere innhold (`start` er default)
<Canvas of={stories.WithAlign} />

## Sortering
- Bruk `<th aria-sort="none | ascending | descending | other">`
- Bruk `<button type="button">` i `<th>` for sorting
- Bruk [TanStack Table](https://tanstack.com/table/latest) eller annen valgfri kode for å utføre sorteringen
- **React?** Bruk `<Table.ThSortable aria-sort={} onClick={}>` for automisk knapp og støtte for flere verdier i `aria-sort` : `"acending" | "asc" | "desc" | "descending" | "down" | "false" | "none" | "up" | false | null`. Dersom **onClick er undefined**, vil en vanlig `<th>` uten sortering rendres.
- Se også [låste bredder](#laste-bredder)
<Canvas of={stories.SortableSimple} />

## Bunnlinje
- Bruk `<tfoot>` med `<tr><th>` som barn for bunnlinje
<Canvas of={stories.WithFooter} />

## Størrelser
- Bruk `data-size="sm | md | lg"`
<Canvas of={stories.Sizes} />

## Ekspandering
- Legg `<button aria-expanded="true | false">` som barn av `td` eller `th`
- Legg til en rad etter `<tr><td colspan="x">`, hvor `x` er antall kolonner
<Canvas of={stories.ExpandableSimple} />

## Checkbox
- Legg et [Field](/designsystem/field/) med `<input type="checkbox">` og `<label>` i første celle
<Canvas of={stories.CheckableSimple} />

## Rad med handling
- Legg `data-clickdelegatefor="TARGET-ID"` på en `<tr>`, hvor `TARGET-ID` er `id` til en knapp, lenke eller checkbox inni raden
<Canvas of={stories.ClickableSimple} />

## Paginering
- Tabell kan brukes sammen med [Pagination](/designsystem/pagination/)
<Canvas of={stories.PaginatableSimple} />

## Mobil: Scroll
- Plasser tabellen inni en `<figure>` for å få scroll på mobil
- Bruk `data-nowrap` hvor du vil på tabellen, rader eller celler for å hindre linjeskift
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-table--mobile-scroll">Se scroll tabell i egen visning</Button>
  <Canvas className="sbdocs-canvas--max-height" of={stories.MobileDivided} />
</div>

## Mobile: Divided
- Legg `data-mobile="divided"` på `<table>` for todelt visning opp til `768px`
- Bruk `data-mobile-size="768"` for å sette egen breakpoint
- Bruk `data-mobile-source="self"` for breakpoint basert på egen størrelse - ikke viewport
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-table--mobile-divided">Se divided tabell i egen visning</Button>
  <Canvas className="sbdocs-canvas--max-height" of={stories.MobileDivided} />
</div>

## Mobile: Spaced
- Legg `data-mobile="spaced"` på `<table>` for todelt visning opp til `768px`
- Bruk `data-mobile-size="768"` for å sette egen breakpoint
- Bruk `data-mobile-source="self"` for breakpoint basert på egen størrelse - ikke viewport
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-table--mobile-spaced">Se spaced tabell i egen visning</Button>
  <Canvas className="sbdocs-canvas--max-height" of={stories.MobileSpaced} />
</div>

## Mobile: Stacked
- Legg `data-mobile="stacked"` på `<table>` for stablet visning opp til `768px`
- Bruk `data-mobile-size="768"` for å sette egen breakpoint
- Bruk `data-mobile-source="self"` for breakpoint basert på egen størrelse - ikke viewport
<div className="sbdocs-canvas-thumbnail">
  <Button data-arrow data-variant="primary" href="?path=/story/designsystem-table--mobile-stacked">Se stacked tabell i egen visning</Button>
  <Canvas className="sbdocs-canvas--max-height" of={stories.MobileStacked} />
</div>

## Kant rundt
- Legg `data-border="true"` på `<table>` for å få kant rundt tabellen
- **Merk:** Skal hovedsakelig kun brukes når tabell ligger rett på gåsunge bakgrunn
<Canvas of={stories.WithBorderAround} />

## Uten kant
- Legg `data-border="false"` på `<table>` for å fjerne alle `border` linjer
- **Merk:** Skal hovedsakelig kun brukes når tabell har kun to kolonner
<Canvas of={stories.WithoutBorders} />

<CssVariables component="table" exclude="zebra,sticky,hover,sorted" />