Table

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>.

Import


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

Appearance

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

Props

Table

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.
`stickyHeader`	`boolean`	`none`	Make the column sticky to the top of the table.
`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.
`disableKeyboardNavigation`	`boolean`	`false`	Disable keyboard navigation. Use if you have input fields in your table. Be aware that this is bad for accessibility.

Table.Header

Sorry! There are currently no props available.

Table.Column

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

Table.Body

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

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.Cell

Sorry! There are currently no props available.

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 expanded, which enlarges the cells.

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

Formatters

We have formatting helper for dates and values you can easily ensure consistent and accurate display. See NumericFormat, DateFormat for more informations.

Preview

Code

Event	Date	Location	Price	Ticket Number
Music Festival	Freitag, 25. August 2023	Central Park	$50.00	123456789
Movie Premiere	Sonntag, 10. September 2023	Red Carpet Theater	$100.00	987654321
Conference	Donnerstag, 5. Oktober 2023	Convention Center	$200.12	246813579
Sports Tournament	Montag, 20. November 2023	Stadium	$75.00	135792468

Using input fields

Example for using controlled state with input fields inside a table.

Avoid mutation

It's best practice in React to avoid mutation cause of unpredicatable side effects. For more detailed explanations see here.

Preview

Code

Name	Firstname	Year of birth
Potter	Harry	1980
Malfoy	Draco	1980
Diggory	Cedric	1977
Lovegood	Luna	1981