Table

Tabell

Komponent för att visualisera data. Kan kombineras med andra komponenter, till exemepel 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 populeras. Vi kommer basera samliga 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

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 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`	-	@deprecated This variant will be replaced with a new scaling api accross all components.
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 `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	`Iterable<Key> \| "all"`	-	The currently selected keys in the collection (controlled).
defaultSelectedKeys	`Iterable<Key> \| "all"`	-	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 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 `null` value indicates that the local props completely override all props received from a parent.

Name	Type	Description
onRowAction	`(key: Key) => void`	Handler that is called when a user performs an action on the row.
onSelectionChange	`(keys: Selection) => void`	Handler that is called when the selection changes.
onSortChange	`(descriptor: SortDescriptor) => any`	Handler that is called when the sorted column or direction changes.
onScroll	`(e: UIEvent<HTMLTableElement, UIEvent>) => void`	Handler that is called when a user scrolls. See MDN.

Name	Type	Description
aria-label	`string`	Defines a string value that labels the current element.
aria-labelledby	`string`	Identifies the element (or elements) that labels the current element.
aria-describedby	`string`	Identifies the element (or elements) that describes the object.
aria-details	`string`	Identifies the element (or elements) that provide a detailed, extended description for the object.

TableHeader

Name	Type	Default	Description
columns	`Iterable<T>`	-	A list of table columns.
children	`ReactNode \| ((item: T) => ReactElement<any, string \| JSXElementConstructor<any>>)`	-	A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop.
dependencies	`readonly any[]`	-	Values that should invalidate the column cache when using dynamic collections.
className	`string \| ((values: TableHeaderRenderProps & { 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: TableHeaderRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	-	The inline style for the element. A function may be provided to compute the style based on component state.

Name	Type	Description
onHoverStart	`(e: HoverEvent) => void`	Handler that is called when a hover interaction starts.
onHoverEnd	`(e: HoverEvent) => void`	Handler that is called when a hover interaction ends.
onHoverChange	`(isHovering: boolean) => void`	Handler that is called when the hover state changes.

Row

Name	Type	Default	Description
columns	`Iterable<T>`	-	A list of columns used when dynamically rendering cells.
children	`ReactNode \| ((item: T) => ReactElement<any, string \| JSXElementConstructor<any>>)`	-	The cells within the row. Supports static items or a function for dynamic rendering.
value	`object`	-	The object value that this row represents. When using dynamic collections, this is set automatically.
dependencies	`readonly any[]`	-	Values that should invalidate the cell cache when using dynamic collections.
textValue	`string`	-	A string representation of the row's contents, used for features like typeahead.
isDisabled	`boolean`	-	Whether the row is disabled.
id	`Key`	-	The unique id of the row.
className	`string \| ((values: RowRenderProps & { 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: RowRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	-	The inline style for the element. A function may be provided to compute the style based on component state.
href	`string`	-	A URL to link to. See MDN.
hrefLang	`string`	-	Hints at the human language of the linked URL. SeeMDN.
target	`HTMLAttributeAnchorTarget`	-	The target window for the link. See MDN.
rel	`string`	-	The relationship between the linked resource and the current page. See MDN.
download	`string \| boolean`	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
ping	`string`	-	A space-separated list of URLs to ping when the link is followed. See MDN.
referrerPolicy	`HTMLAttributeReferrerPolicy`	-	How much of the referrer to send when following the link. See MDN.
routerOptions	`never`	-	Options for the configured client side router.

Name	Type	Description
onAction	`() => void`	Handler that is called when a user performs an action on the row. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.
onHoverStart	`(e: HoverEvent) => void`	Handler that is called when a hover interaction starts.
onHoverEnd	`(e: HoverEvent) => void`	Handler that is called when a hover interaction ends.
onHoverChange	`(isHovering: boolean) => void`	Handler that is called when the hover state changes.

Column

Name	Type	Default	Description
id	`Key`	-	The unique id of the column.
allowsSorting	`boolean`	-	Whether the column allows sorting.
isRowHeader	`boolean`	-	Whether a column is a row header and should be announced by assistive technology during row navigation.
textValue	`string`	-	A string representation of the column's contents, used for accessibility announcements.
width	`ColumnSize`	-	The width of the column. This prop only applies when the `<Table>` is wrapped in a `<ResizableTableContainer>`.
defaultWidth	`ColumnSize`	-	The default width of the column. This prop only applies when the `<Table>` is wrapped in a `<ResizableTableContainer>`.
minWidth	`ColumnStaticSize`	-	The minimum width of the column. This prop only applies when the `<Table>` is wrapped in a `<ResizableTableContainer>`.
maxWidth	`ColumnStaticSize`	-	The maximum width of the column. This prop only applies when the `<Table>` is wrapped in a `<ResizableTableContainer>`.
children	`ReactNode \| ((values: ColumnRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`	-	The children of the component. A function may be provided to alter the children based on component state.
className	`string \| ((values: ColumnRenderProps & { 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: ColumnRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	-	The inline style for the element. A function may be provided to compute the style based on component state.

Cell

Name	Type	Default	Description
textValue	`string`	-	A string representation of the cell's contents, used for features like typeahead.
colSpan	`number`	-	Indicates how many columns the data cell spans.
children	`ReactNode \| ((values: CellRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`	-	The children of the component. A function may be provided to alter the children based on component state.
className	`string \| ((values: CellRenderProps & { 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: CellRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	-	The inline style for the element. A function may be provided to compute the style based on component state.

Table

Installation

Varianter

Standardtabell

Kompakt tabell

Valbara rader

Kontrollerade val

Randiga rader

API

Table

Props

Events

Tillgänglighet

TableHeader

Props

Events

Row

Props

Events

Column

Props

Cell

Props

Installation​

Varianter​

Standardtabell​

Kompakt tabell​

Valbara rader​

Kontrollerade val​

Randiga rader​

API​

Table​

Props

Events

Tillgänglighet

TableHeader​

Props

Events

Row​

Props

Events

Column​

Props

Cell​

Props

Installation

Varianter

Standardtabell

Kompakt tabell

Valbara rader

Kontrollerade val

Randiga rader

API

Table

TableHeader

Row

Column

Cell