Table

Tabell

Komponent för att visualisera data. Går att kombinera med andra komponenter, till exemepel Select, för att filtrera eller liknande.

Installation

npm
Yarn
pnpm

npm install @midas-ds/components

yarn add @midas-ds/components

pnpm add @midas-ds/components

import { Table } 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. 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
  }
})

Standardtabell

Kompakt tabell

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

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

Randiga rader

Använd striped om du vill att raderna ska alternera mellan vit och grå.

API

Table

Namn	Typ	Standard	Beskrivning
narrow	`boolean`	-
striped	`boolean`	-
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](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.

Namn	Typ	Standard	Beskrivning
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event).

Namn	Typ	Standard	Beskrivning
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

Namn	Typ	Standard	Beskrivning
columns	`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	`any[]`	-	Values that should invalidate the column cache when using dynamic collections.
className	`string \| ((values: TableHeaderRenderProps & { 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: TableHeaderRenderProps & { 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.

Namn	Typ	Standard	Beskrivning
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

Namn	Typ	Standard	Beskrivning
id	`Key`	-	The unique id of the row.
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	`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.
className	`string \| ((values: RowRenderProps & { 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: RowRenderProps & { 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.
href	`string`	-	A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
hrefLang	`string`	-	Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
target	`HTMLAttributeAnchorTarget`	-	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
rel	`string`	-	The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
download	`string \| boolean`	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
ping	`string`	-	A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
referrerPolicy	`HTMLAttributeReferrerPolicy`	-	How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
routerOptions	`never`	-	Options for the configured client side router.

Namn	Typ	Standard	Beskrivning
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

Namn	Typ	Standard	Beskrivning
id	`Key`	-	The unique id of the column.
allowsSorting	`boolean`	-	Whether the column allows sorting.
isRowHeader	`boolean`	-	Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) 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](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: ColumnRenderProps & { 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.

Cell

Namn	Typ	Standard	Beskrivning
id	`Key`	-	The unique id of the cell.
textValue	`string`	-	A string representation of the cell's contents, used for features like typeahead.
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](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: CellRenderProps & { 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.

Installation​

Exempelkod

Varianter​

Standardtabell​

Exempelkod

Kompakt tabell​

Exempelkod

Valbara rader​

Exempelkod

Randiga rader​

Exempelkod

API​

Table​

Props

Events

Tillgänglighet

TableHeader​

Props

Events

Row​

Props

Events

Column​

Props

Cell​

Props

Installation

Varianter

Standardtabell

Kompakt tabell

Valbara rader

Randiga rader

API

Table

TableHeader

Row

Column

Cell