Table

Component for building tables.

The <Table> component allows to present data in a table format. It enhances the functionality of regular <table> elements with the possibility to interact and select the data, as well as, helps with accessibility by providing keyboard navigation.

You can sort with the <Table> and add a selectionMode property with which you have the possibility to select entire rows.

The component is divided into several parts. So there are the <Table.Header>, <Table.Body>, <Table.Column>, <Table.Row> and <Table.Cell>.

Usage

Import

To import the component you just have to use this code below.


import { Table } from '@marigold/components';

Appearance

Property	Type	Description
`variant`	`grid`	The available variants of this component.
`size`	`compact \| expanded`	The available sizes of this component.

Props

Property	Type	Default	Description
`selectionMode`	`none, single, multiple`	`none`	The type of selection that is allowed in the collection.
`onSelectionChange`	`(keys: Selection) => any`	`none`	Handler that is called when the selection changes.
`stretch`	`boolean`	`false`	Stretch table to fill the container.
`disabledKeys`	`Object`	`none`	Disabled the selected row.
`sortDescriptor`	`Object`	`none`	The current sorted column and direction.
`onSortChange`	`function`	`none`	Handler that is called when the sort direction changes.

Table Body Props

Property	Type	Default	Description
`key`	`Key`	`none`	The key for the table body.
`items`	`Iterable<object>`	`none`	Item objects in the table body
`loadingState`	`error \| idle \| loading \| loadingMore \| filtering \| sorting`	`none`	The current loading state of the table.
`onLoadMore`	`(property) onLoadMore?: (() => any) \| undefined`	`none`	Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.

Table Row Props

Property	Type	Default	Description
`key`	`Key`	`none`	The key for table row.
`download`	`string \| boolean \| undefined`	`none`	Causes the browser to download the linked URL. A string may be provided to suggest a file name .
`href`	`string \| undefined`	`none`	A URL to link .
`ping`	`string \| undefined`	`none`	A space-separated list of URLs to ping when the link is followed .
`referrerPolicy`	`React.HTMLAttributeReferrerPolicy \| undefined`	`none`	How much of the referrer to send when following the link.
`rel`	`string \| undefined`	`none`	The relationship between the linked resource and the current page
`target`	`React.HTMLAttributeAnchorTarget \| undefined`	`none`	The target window for the link.
`textValue`	`string \| undefined`	`none`	A string representation of the row's contents, used for features like typeahead.

Table Column Props

Property	Type	Default	Description
`key`	`Key`	`none`	The key for the Column.
`align`	`center \| left \| right \| justify \| char`	`none`	Control the alignment of Column.
`stickyHeader`	`boolean`	`none`	Make the column sticky to the top of the table.
`allowResizing`	`boolean \| undefined`	`none`	Whether the column allows resizing.
`allowSorting`	`boolean \| undefined`	`none`	Whether the column allows sorting.
`isRowHeader`	`boolean \| undefined`	`none`	Whether a column is a row header and should be announced by assistive technology during row navigation.
`width`	`string \| number`	`none`	Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width

Examples

Compact variant

In this example you can see the size compact from the theme b2b. It reduces the cell spacing. There is also another size, which is called expaned, which enlarges the cells. The core-Theme has also two variants called tableLines and tableBorder.

Preview

Code

Name	Firstname	House	Year of birth
Potter	Harry	Gryffindor	1980
Malfoy	Draco	Slytherin	1980
Diggory	Cedric	Hufflepuff	1977
Lovegood	Luna	Ravenclaw	1981

Aligned Columns

In this example you can align any Table Column by using align property over <Table.Column align='right'> .

Preview

Code

Event	Date	Location	Price	Ticket Number
Music Festival	2023-08-25	Central Park	$50	123456789
Movie Premiere	2023-09-10	Red Carpet Theater	$100	987654321
Conference	2023-10-05	Convention Center	$200	246813579
Sports Tournament	2023-11-20	Stadium	$75	135792468

Fixed Header

We can set the header of the table to be fixed while scrolling by using stickyHeader over <Table stickyHeader> .

Preview

Code

Loading data ⬇️ ......

Selection mode single

If you have set the selectionMode to single, then you just can select only one row of the table.

Preview

Code

Name	Firstname	House	Year of birth
Potter	Harry	Gryffindor	1980
Malfoy	Draco	Slytherin	1980
Diggory	Cedric	Hufflepuff	1977
Lovegood	Luna	Ravenclaw	1981

Selection mode multiple

This example shows how to use the selectionMode, but with the setting that multiple checkboxes appear and you can select as many lines as you want.

Preview

Code

Name	Firstname	House	Year of birth
Potter	Harry	Gryffindor	1980
Malfoy	Draco	Slytherin	1980
Diggory	Cedric	Hufflepuff	1977
Lovegood	Luna	Ravenclaw	1981

Dynamic collections

You don't have to hard code the table items, you could also create a dynamic collection and iterate through it. That's what the example shows.

Preview

Code

Name	Firstname	House	Year of birth
Potter	Harry	Gryffindor	1980
Malfoy	Draco	Slytherin	1980
Diggory	Cedric	Hufflepuff	1977
Lovegood	Luna	Ravenclaw	1981

Disabled Rows

You can also disable certain rows. For that all you have to do is add the property disabledKeys with the certain key to the table.

Preview

Code

Name	Firstname	House	Year of birth
Potter	Harry	Gryffindor	1980
Malfoy	Draco	Slytherin	1980
Diggory	Cedric	Hufflepuff	1977
Lovegood	Luna	Ravenclaw	1981

Sorting

The options to sort are ascending or descending. For this purpose the properties (onSortChange, sortDescriptor) for sorting must be specified.

Preview

Code

Name	Height	Mass	Birth Year
Luke Skywalker	172	77	19BBY
C-3PO	167	75	112BBY
R2-D2	96	32	33BBY
Darth Vader	202	136	41.9BBY
Leia Organa	150	49	19BBY
Owen Lars	178	120	52BBY
Beru Whitesun lars	165	75	47BBY
R5-D4	97	32	unknown
Biggs Darklighter	183	84	24BBY
Obi-Wan Kenobi	182	77	57BBY

Sort:  /

Async sorting

In this example the <Table> is also sortable but its build async. For that you must use the useAsyncList hook. The hook manages the async list data and provides convenience methods for updating the data.

Preview

Code

Name	Height	Mass	Birth Year

Nested Columns

Columns can be nested, which will result in more than one header row to be created. Note the usage of isRowHeader in the example below. By default, only the first column is included in the accessibility name for each row.

Preview

Code

Name		Information
First Name	Last Name	Age	Birthday
Sam	Smith	36	May 3
Julia	Jones	24	February 10
Peter	Parker	28	September 7
Bruce	Wayne	32	December 18

Fixed Column width

In a Table you can specify the width of a column using width property in the Table.Column component, this allows you to set a fixed width for a specific columnm ensuring consistent column widths throughout the table .

Preview

Code

Name	Firstname	House	Year of birth
Potter	Harry	Gryffindor	1980
Malfoy	Draco	Slytherin	1980
Diggory	Cedric	Hufflepuff	1977
Lovegood	Luna	Ravenclaw	1981