Hoppa till huvudinnehåll

Table

Tabell
Version: 1.0.4
Versionslogg
Storybook
Referens

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.

API​

Table​

NamnTypStandardBeskrivning
narrow boolean-
striped boolean-
rows *T[]-
children ReactNode-The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
selectionBehavior SelectionBehavior"toggle"How multiple selection should behave in the collection.
disabledBehavior DisabledBehavior"selection"Whether `disabledKeys` applies to all interactions, or only selection.
dragAndDropHooks DragAndDropHooks-The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Table.
disallowEmptySelection boolean-Whether the collection allows empty selection.
disabledKeys Iterable<Key>-A list of row keys to disable.
selectionMode SelectionMode-The type of selection that is allowed in the collection.
selectedKeys "all" | Iterable<Key>-The currently selected keys in the collection (controlled).
defaultSelectedKeys "all" | Iterable<Key>-The initial selected keys in the collection (uncontrolled).
sortDescriptor SortDescriptor-The current sorted column and direction.
className string | ((values: TableRenderProps & { defaultClassName: string; }) => string)-The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
style CSSProperties | ((values: TableRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)-The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
slot string-A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.

TableHeader​

Row​

Column​

Cell​

Beroenden

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