Table

Tabell

Storybook

React Aria

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.

import { Table, TableHeader, Column, TableBody, Row, Cell } from '@midas-ds/components'

<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

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', isRowHeader: true },
  { 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 isRowHeader={column.isRowHeader}>{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 size='medium' om du vill ha en kompaktare tabell.

<Table
  aria-label='Fruit'
  size='medium'
>
  ...
</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

single

<Table
  aria-label='Fruit'
  selectionMode='single'
>
  ...
</Table>

	Namn	Beskrivning
	Apple	Pink lady is a good one
	Banana	A yellow fruit
	Pear	Usually green

multiple

<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

Valda rader: apple

Randiga rader

Använd striped om du vill att raderna ska vara olika.

<Table
  aria-label='Fruit'
  striped
>
  ...
</Table>

Namn	Beskrivning
Apple	Pink lady is a good one
Banana	A yellow fruit
Pear	Usually green

Virtuell tabell

För stora tabeller med mycket data kan en Virtualizer hjälpa till att reducera mängden renderade DOM-element, begränsat till vad användaren ser för tillfället.

Notera att tabellen behöver ange ett värde för höjd och overflow.

För användning av randiga rader behöver data-even-attributet anges för jämna rader.

import { Virtualizer, TableLayout } from 'react-aria-components'
import { Table, TableHeader, Column, TableBody, Row, Cell } from '@midas-ds/components'

const VirtualizedExample = () => {
  const rows = [...Array.from(Array(5000).keys())].map(i => ({
    id: i,
    foo: `Foo: ${i}`,
    bar: `Bar: ${i}`,
    baz: `Baz: ${i}`,
  }))

  return (
    <Virtualizer
      layout={TableLayout}
      layoutOptions={{
        rowHeight: 48,
        headingHeight: 48,
      }}
    >
      <Table
        aria-label='Virtualized Table'
        selectionMode='multiple'
        striped
        style={{ height: 300, overflow: 'auto', scrollPaddingTop: 48 }}
      >
        <TableHeader>
          <Column isRowHeader>Foo</Column>
          <Column>Bar</Column>
          <Column>Baz</Column>
        </TableHeader>
        <TableBody items={rows}>
          {item => (
            <Row data-even={item.id % 2 === 0}>
              <Cell>{item.foo}</Cell>
              <Cell>{item.bar}</Cell>
              <Cell>{item.baz}</Cell>
            </Row>
          )}
        </TableBody>
      </Table>
    </Virtualizer>
  )
}

En demo av denna kod finns på vår Storybook.

API

Table

Name	Type	Default	Description
size	Size	large	Row height (large: 48px, medium: 40px)
striped	boolean	false	Alternating colors for rows
children	ReactNode | ((item: T) => ReactNode)	-	The contents of the collection.
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<object>	-	The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the Table.
disabledKeys	Iterable<Key>	-	A list of row keys to disable.
selectionMode	SelectionMode	-	The type of selection that is allowed in the collection.
disallowEmptySelection	boolean	-	Whether the collection allows empty selection.
selectedKeys	Iterable<Key> | "all"	-	The currently selected keys in the collection (controlled).
defaultSelectedKeys	Iterable<Key> | "all"	-	The initial selected keys in the collection (uncontrolled).
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.
shouldSelectOnPressUp	boolean	-	Whether selection should occur on press up instead of press down.
sortDescriptor	SortDescriptor	-	The current sorted column and direction.
className	ClassNameOrFunction<DisclosureRenderProps>	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	StyleOrFunction<DisclosureRenderProps>	-	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 null value indicates that the local props completely override all props received from a parent.
dir	string	-
lang	string	-
hidden	boolean	-
inert	boolean	-
translate	"yes" | "no"	-

TableHeader

Row

Column

Cell