Table
Komponent för att visualisera data. Kan kombineras med andra komponenter, till exempel Select, för att filtrera eller SearchField för att söka osv.
<Table aria-label='Fruit'>
<TableHeader>
<Column>Name</Column>
<Column>Description</Column>
</TableHeader>
<TableBody>
<Row>
<Cell>Banana</Cell>
<Cell>A yellow fruit</Cell>
</Row>
<Row>
<Cell>Pear</Cell>
<Cell>Usually green</Cell>
</Row>
</TableBody>
</Table>
Name | Description |
---|---|
Banana | A yellow fruit |
Pear | Usually green |
Installation
- npm
- Yarn
- pnpm
npm install @midas-ds/components
yarn add @midas-ds/components
pnpm add @midas-ds/components
import { Table, TableHeader, Column, TableBody, Row, Cell } from '@midas-ds/components'
Varianter
För en tabell behövs data för hur kolumnerna och raderna ska få sitt innehåll. Vi kommer basera samtliga tabeller på följande dataset.
Börja med att sätta upp dina kolumner. Nycklarna på raderna ska sedan referera till värdet för kolumnernas id
, i det här fallet name
och description
.
const columns = [
{ name: 'Namn', id: 'name' },
{ name: 'Beskrivning', id: 'description', width: 'max-content' },
]
const rows = [
{
id: 'apple',
name: 'Apple',
description: 'Pink lady is a good one',
},
{
id: 'banana',
name: 'Banana',
description: 'A yellow fruit',
},
{
id: 'pear',
name: 'Pear',
description: 'Usually green',
},
]
Standardtabell
<Table aria-label='Fruit'>
<TableHeader columns={columns}>
{column => {
return <Column>{column.name}</Column>
}}
</TableHeader>
<TableBody items={rows}>
{item => {
return (
<Row columns={columns}>
{column => {
return <Cell>{item[column.id]}</Cell>
}}
</Row>
)
}}
</TableBody>
</Table>
Namn | Beskrivning |
---|---|
Apple | Pink lady is a good one |
Banana | A yellow fruit |
Pear | Usually green |
Kompakt tabell
Använd narrow
om du vill ha en kompaktare tabell.
<Table
aria-label='Fruit'
narrow
>
...
</Table>
Namn | Beskrivning |
---|---|
Apple | Pink lady is a good one |
Banana | A yellow fruit |
Pear | Usually green |
Valbara rader
Tabellen har inbyggd funktion för att kunna välja en eller flera rader med selectionMode
vilket kan vara antingen single
eller multiple
<Table
aria-label='Fruit'
selectionMode='single'
>
...
</Table>
Namn | Beskrivning | |
---|---|---|
Apple | Pink lady is a good one | |
Banana | A yellow fruit | |
Pear | Usually green |
<Table
aria-label='Fruit'
selectionMode='multiple'
>
...
</Table>
Namn | Beskrivning | |
---|---|---|
Apple | Pink lady is a good one | |
Banana | A yellow fruit | |
Pear | Usually green |
Kontrollerade val
Om du själv vill ha kontroll över vilka eller vilken rad som är vald kan du använda useState
import type React from 'react'
import type { Selection } from 'react-aria-components'
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(['apple']))
<Table
aria-label='Fruit'
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
selectionMode='multiple'
>
...
</Table>
Namn | Beskrivning | |
---|---|---|
Apple | Pink lady is a good one | |
Banana | A yellow fruit | |
Pear | Usually green |
Randiga rader
Använd striped
om du vill att raderna ska alternera mellan vit och grå.
<Table
aria-label='Fruit'
striped
>
...
</Table>
Namn | Beskrivning |
---|---|
Apple | Pink lady is a good one |
Banana | A yellow fruit |
Pear | Usually green |
API
Table
Name | Type | Default | Description |
---|---|---|---|
narrow | boolean | - | A more compact version of the table |
striped | boolean | - | Alternating colors for rows |
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 |
dragAndDropHooks | DragAndDropHooks | - | The drag and drop hooks returned by |
disallowEmptySelection | boolean | - | Whether the collection allows empty selection. |
disabledKeys | Iterable<Key> | - | A list of row keys to disable. |
escapeKeyBehavior | "none" | "clearSelection" | 'clearSelection' | Whether pressing the escape key should clear selection in the table or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
selectionMode | SelectionMode | - | The type of selection that is allowed in the collection. |
selectedKeys | Iterable<Key> | "all" | - | The currently selected keys in the collection (controlled). |
defaultSelectedKeys | Iterable<Key> | "all" | - | The initial selected keys in the collection (uncontrolled). |
shouldSelectOnPressUp | boolean | - | Whether selection should occur on press up instead of press down. |
sortDescriptor | SortDescriptor | - | The current sorted column and direction. |
className | string | ((values: TableRenderProps & { defaultClassName: string; }) => string) | - | The CSS 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 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 |