Hoppa till huvudinnehåll

Table

Tabell
Version: 1.0.3
Versionslogg
Storybook
Referens

Introduktion​

En enkel tabell för att visualisera data. Går att kombinera med andra komponenter som till exemepel Select för att filtrera eller liknande.

Installation och användning​

npm install @midas-ds/table
import { Table } from '@midas-ds/table'

För en tabell behövs data för hur kolumnerna och raderna ska populeras. Vi kommer basera samliga tabeller på följande dataset. Börja med att sätta upp dina kolumner. Raderna ska sedan referera till kolumnernas id.

const columns = [
  { name: 'Namn', id: 'name', isRowHeader: true },
  { name: 'Beskrivning', id: 'desc', width: 'max-content' },
]

const rows = fruits.map((fruit) => {
  return {
    id: fruit.value,
    name: fruit.name,
    desc: fruit.description,
  }
})

Väljbara rader​

Tabellen har inbyggd funktion för att kunna välja en eller flera rader med selectionMode vilket kan vara antingen single eller multiple

Smalare rader​

Använd narrow om du vill ha en mindre tabell.

Randiga rader​

Använd striped om du vill ha en randig tabell.

Beroenden​

  • @midas-ds/checkbox@1.0.2
  • react-aria-components@^1.1.1
  • lucide-react@^0.453.0