Table

The <Table> component displays structured data in a grid layout with rows and columns. It provides features for selecting, sorting, editing, and reordering data, making it ideal for applications that need to present and manipulate tabular information.

Use tables when you need to display datasets where users benefit from seeing multiple records at once, comparing values across columns, or performing bulk operations on selected items. Tables work well for admin interfaces, data management screens, and dashboards where structured information needs to be organized and actionable.

Anatomy

Header (sticky): Container for column headers, can stick to viewport top when scrolling.
Column: Individual column headers that can enable sorting functionality.
Selection checkbox: Checkbox for selecting individual rows or all rows at once.
Row (selectable): Individual table rows that can be selected, clicked, or dragged.
Cell: Standard cell containing data, text, or components.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Variant

Size

Venue	Type	City	Capacity
Oak Ridge Barn	Rustic or Alternative Venue	Hee-Haw City, Canada	150
Harborfront Promenade	Outdoor Venue	Port Funsies, United Kingdom	600
Cellar Lounge	Club or Lounge	Laughville, United States	250

Property	Type	Description
`variant`	`default \| grid \| muted \| admin \| master`	The available variants of this component.
`size`	`compact \| default \| spacious`	The available sizes of this component.

The Table component offers different visual styles to match your use case and data density.

Default: Standard table appearance for most use cases with clean, clear data presentation.
Muted: Reduces visual noise in tables with extensive content, helping users focus on the data.
Grid: Adds vertical borders between columns for clearer separation, useful for tables with many columns or dense data.
Admin and Master: Identifies rows relevant only for internal users. Learn more about its usage.

Usage

Tables organize information into a grid structure that makes data easy to scan, compare, and act upon. Use tables when you need to present multiple records with consistent attributes, allow users to select and perform actions on items, or enable sorting and filtering of large datasets.

The Table component supports various interaction patterns including row selection for bulk operations, column sorting for data organization, inline editing for quick updates, and drag and drop for manual reordering. Choose the features that match your use case without overwhelming users with unnecessary functionality.

Displaying data

When you need to present structured information in a clear, scannable format, use tables to organize data into rows and columns. Each row represents a record, and each column represents an attribute of that record.

Use tables with clear understandable content

Provide descriptive column headers for each column that accurately represent the data.

Don't

Avoid using vague or misleading column headers that do not clearly represent the data.

When cell content exceeds the available column width, consider truncating text to maintain table scannability and consistent row heights. Truncation works best for columns with long text values like descriptions, addresses, or notes where seeing the full content isn't critical for initial scanning.

For columns where users need to read the complete value (like names, IDs, or status) avoid truncation or provide the full text on hover using a tooltip. Balance readability with density by ensuring the most important columns display their full content while less critical columns can be truncated.

Preview

Code

Venue	Description	Rating
Main Street Park Amphitheater	An open-air amphitheater in the town park with lawn seating and a covered stage, ideal for community performances and summer comedy nights.	4.7
Shakytown Comedy Club	A cozy comedy club in the heart of Shakytown, offering an intimate atmosphere where every seat is close to the laughter.	3.6
Oak Ridge Barn	A restored timber barn with modern amenities, ideal for rustic weddings, small concerts, and community gatherings.	2.3
Harborfront Promenade	A scenic waterfront promenade with a raised stage and open lawn, perfect for sunset events and outdoor performances.	4.2
Cellar Lounge	An intimate basement lounge with low lighting and great acoustics, suited for stand‑up, small bands, and late‑night sets.	3.1

Align content

Proper alignment makes data easier to scan and compare. Different data types benefit from different alignments. Here are some general rules when to apply which alignment:

Horizontal alignment:

Left (default): Text content like names and descriptions for natural reading flow
Right: Numeric values so decimal points and place values line up vertically
Center: Icons or status indicators (use sparingly)

Vertical alignment:

Top: Best for unpredictable row heights or prioritizing top-down reading flow
Center (default): Balances content when most cells have similar heights
Bottom: Aligns text baselines or groups elements at the bottom edge

Preview

Code

Venue	Nights	Guests	Price/Night	Subtotal
Main Street Park Amphitheater Laughville, United States	1	42	$1,000.00	$1,000.00
Shakytown Comedy Club Shakytown, United States	2	54	$750.00	$1,500.00
Oak Ridge Barn Hee-Haw City, Canada	3	45	$500.00	$1,500.00
Harborfront Promenade Port Funsies, United Kingdom	2	47	$2,000.00	$4,000.00
Total				$8,000.00

Selecting rows

When users need to perform actions on multiple items at once, enable row selection. This allows users to select individual rows or all rows, then perform bulk operations like delete, export, or modify.

Row selection is particularly valuable in scenarios where users manage multiple records simultaneously, such as bulk deleting outdated entries, exporting selected data for reports, moving items between categories, or applying changes to multiple records. The selection mechanism provides visual feedback through checkboxes and highlights the selected rows to maintain clear context of what will be affected by subsequent actions.

The Table component supports two selection modes:

Multiple selection: Users can select any number of rows using checkboxes. Click individual checkboxes to select specific rows, or use the header checkbox to select all rows at once. This mode is ideal for bulk operations where users need flexibility in choosing which items to act upon.
Single selection: Users can select only one row at a time by clicking anywhere on the row. Selecting a new row automatically deselects the previous one. Use this mode when actions apply to only one item, like viewing details or editing a single record.

Preview

Code

Venue	Type	City
Oak Ridge Barn	Rustic or Alternative Venue	Hee-Haw City, Canada
Harborfront Promenade	Outdoor Venue	Port Funsies, United Kingdom
Cellar Lounge	Club or Lounge	Laughville, United States

Use multiple selection when users need to perform bulk operations on several items.

Show the number of selected items and available actions clearly.

Row Actions

Row actions let users interact with individual records directly from a table, such as editing, viewing details, or triggering specific operations. These interactions are essential for working with tabular data, and thoughtful design helps users stay oriented and confident. To support clarity, predictability, and efficiency, it’s important to align how and where these actions appear.

Use the <Button> component with the secondary (default) variant for row actions. If the action is destructive, use the destructive variant instead. In both cases, apply the small button size to maintain visual consistency and minimize visual noise in dense table layouts.

When it comes to placement, always position row actions at the end of the row. This improves scannability and clearly signals which parts of the row are interactive, helping users quickly locate available actions.

Preview

Code

Venue	Address	Rating
Main Street Park Amphitheater	123 Main Street, Laughville	4.7
Shakytown Comedy Club	456 Comedy Boulevard, Shakytown	3.6
Oak Ridge Barn	789 Oak Road, Hee-Haw City	2.3

Show only the most important 1–3 actions per row. These should be the actions users are most likely to need or expect to find without having to open a menu, such as “Edit” or “View.” If you need to support more than three actions, prioritize them by frequency and importance: display the most critical ones directly, and group the rest into a contextual menu using an <ActionMenu> (see ActionMenu section). This keeps the row clean and scannable while still offering access to all necessary actions.

Using too many visible actions at once can overwhelm users, make it hard to identify what to do, and increase visual clutter. If space is limited or the layout feels crowded, consider using icon buttons to keep actions compact. Pair them with tooltips to clearly communicate each action’s purpose without adding visual noise.

Use icons with care

Only use icons when their meaning is clear without explanation. If the icon might be ambiguous, prefer a labeled button or add context with a tooltip.

Preview

Code

Venue	Address	Rating
Main Street Park Amphitheater	123 Main Street, Laughville	4.7
Shakytown Comedy Club	456 Comedy Boulevard, Shakytown	3.6
Oak Ridge Barn	789 Oak Road, Hee-Haw City	2.3

If you cannot place all row actions at the end of the row, be mindful of clarity and consistency. Actions should remain visually distinct from content and navigation, and be grouped where possible to support scannability. Apply consistent styling to each action and avoid placing them in unexpected locations, as this can increase cognitive load and make it harder for users to understand what they can do in each row.

Place row actions at the end of the row for consistent scannability.
Limit visible actions to 1–3 per row and group the rest in an ActionMenu.

Don't

Don't display too many actions per row, as it creates visual clutter and overwhelms users.
Don't use icon-only buttons when the icon's meaning is ambiguous without a label.

Sorting columns

When working with large datasets, users often need to organize information by specific attributes to find what they're looking for or identify patterns. Sorting solves the problem of information overload by letting users reorder data in a way that makes sense for their current task—whether that's finding the highest value, the most recent date, or items alphabetically.

Enable sorting to let users click column headers and dynamically reorder rows by that column's values. This is particularly valuable when users need to:

Find extremes: Quickly locate the highest price, earliest date, or longest duration
Compare values: See how items stack up against each other when ordered by a specific metric
Identify patterns: Spot trends, outliers, or groupings that emerge when data is organized
Prioritize work: Focus on urgent items by sorting by deadline or status

Preview

Code

Venue	Capacity	Rating	Description
Main Street Park Amphitheater	500	4.7	An open-air amphitheater in the town park with lawn seating and a covered stage, ideal for community performances and summer comedy nights.
Shakytown Comedy Club	300	3.6	A cozy comedy club in the heart of Shakytown, offering an intimate atmosphere where every seat is close to the laughter.
Oak Ridge Barn	150	2.3	A restored timber barn with modern amenities, ideal for rustic weddings, small concerts, and community gatherings.
Harborfront Promenade	600	4.2	A scenic waterfront promenade with a raised stage and open lawn, perfect for sunset events and outdoor performances.
Cellar Lounge	250	3.1	An intimate basement lounge with low lighting and great acoustics, suited for stand‑up, small bands, and late‑night sets.
Grand Avenue Ballroom	800	5.0	An elegant ballroom with crystal chandeliers and a full proscenium stage, ideal for gala dinners, award nights, and concerts.
Maple Court Theatre	400	4.4	A comfortable mid‑size theatre with raked seating and modern AV, designed for comedy, theatre, and lectures.
Broadway Community Center	350	3.8	A multipurpose community center with flexible rooms and a small auditorium for talks, classes, and local performances.
Hillcrest Open Pavilion	450	2.9	An open‑air pavilion with a covered stage and movable seating, set in a hillside park for fairs and seasonal shows.

Enable sorting on columns with comparable data like numbers, dates, or alphabetical text.

Don't

Don't make every column sortable if some contain non-comparable content like icons or actions.

Inline editing

When users need to make quick edits to individual values without navigating to a separate form, use editable cells. This is particularly effective for small, atomic changes where users need to update a single field across multiple records—like updating product prices, changing task statuses, correcting typos, or adjusting quantities. By allowing edits directly within the table, you keep users in context and reduce friction.

Preview

Code

Venue	Amenities	Rating
Harborfront Promenade	WiFi, Projector, Screen	4.2
Cellar Lounge	WiFi, Bar	3.1
Grand Avenue Ballroom	WiFi, Projector, Screen, Bar, Coat check	5.0
Maple Court Theatre	WiFi, Projector, Hearing loop	4.4

Use editable cells for quick, single-value updates like changing status or correcting typos.
Choose form controls that match the data type (e.g. Select for predefined options, NumberField for numbers, DatePicker for dates).

Don't

Don't make cells editable if editing requires complex validation or multiple related fields.
Don't use editable cells when a dedicated edit form would provide better context and validation.

Reordering

When the order of items matters and users need to manually arrange them, enable drag and drop. This works well for priority lists, custom orderings, or workflows where sequence is important.

Keyboard support and multiple items

Reordering is fully keyboard accessible. Users can also move multiple items at once by selecting them before initiating the drag operation.

Preview

Code

		Venue	City
		Main Street Park Amphitheater	Laughville, United States
		Shakytown Comedy Club	Shakytown, United States
		Oak Ridge Barn	Hee-Haw City, Canada
		Harborfront Promenade	Port Funsies, United Kingdom
		Cellar Lounge	Laughville, United States

Empty states

When a table has no data to display, whether from empty search results, filters with no matches, or newly created lists, show a helpful empty state instead of a blank table body.

Preview

Code

Name	Email	Status
No results found Try adjusting your search or filters to find what you're looking for.

Include action buttons in empty states when appropriate, like "Add first item" or "Clear filters".

Don't

Don't show a generic "No data" message without context or next steps.

Sticky headers

For tables with many rows that require scrolling, sticky headers keep column labels visible as users scroll through data. This helps users maintain context about what each column represents.

Preview

Code

Venue	City	Capacity
Main Street Park Amphitheater	Laughville, United States	500
Shakytown Comedy Club	Shakytown, United States	300
Oak Ridge Barn	Hee-Haw City, Canada	150
Harborfront Promenade	Port Funsies, United Kingdom	600
Cellar Lounge	Laughville, United States	250
Grand Avenue Ballroom	Shakytown, United States	800
Maple Court Theatre	Hee-Haw City, Canada	400
Broadway Community Center	Port Funsies, United Kingdom	350
Hillcrest Open Pavilion	Laughville, United States	450
Bloomfield Garden Lawn	Shakytown, United States	1,000
Riverside Theatre	Laughville, United States	650
Downtown Conference Hall	Shakytown, United States	900
Sunset Arena	Port Funsies, United Kingdom	15,000
Grandview Stadium	Laughville, United States	40,000
Greenfield Park Pavilion	Hee-Haw City, Canada	700
City Arts Center	Shakytown, United States	1,200
Highland Amphitheatre	Port Funsies, United Kingdom	5,000
Lakeside Pavilion	Laughville, United States	1,000
Northside Community Hall	Hee-Haw City, Canada	300
Downtown Conference Center	Frankfort, United States	450
Oceanview Banquet Hall	Miami, United States	25,000
Mountain View Lodge	Breckenridge, United States	220
Urban Arts Gallery	London, United Kingdom	600
Riverside Event Space	Calgary, Canada	1,200
Heritage Museum Hall	Bristol, United Kingdom	55,000

Use sticky headers for tables with more than 10-15 rows where scrolling is necessary.

Don't

Don't make headers sticky for short tables where all rows fit on screen without scrolling.

Text selection

Text selection is disabled by default to avoid interaction complexity. When enabled, users must distinguish between clicking to select a row versus clicking to select text. Enable text selection when users frequently need to copy cell content like emails, IDs, or reference numbers. Row selection will still work through checkboxes while allowing users to select and copy text within cells.

Did you know?

Users can triple-click on a text to quickly select the whole content.

Preview

Code

Allow text selection

	Venue	Type
	Main Street Park Amphitheater	Outdoor Venue
	Shakytown Comedy Club	Club or Lounge
	Oak Ridge Barn	Rustic or Alternative Venue
	Harborfront Promenade	Outdoor Venue

Enable text selection when users frequently need to copy data like IDs, emails, or reference numbers.

Don't

Don't enable text selection by default, as it adds interaction complexity most tables don't need.

Row header

By default, screen readers announce only the content of the focused cell when navigating a table with the keyboard. This can make it difficult for users to understand which row they are in, especially in tables with many columns.

Setting rowHeader on a column tells assistive technology to announce that column's cell value alongside any other cell the user navigates to in the same row. For example, if a "Name" column is marked as a row header, a screen reader will announce "Name: Alice, Email: alice@example.com" instead of just "alice@example.com" when the user moves to the email cell.

Mark the column that best identifies each row, typically a name, title, or ID column. Every table should have at least one row header to ensure users relying on assistive technology can orient themselves within the data.

<Table.Header>
  <Table.Column rowHeader>Name</Table.Column>
  <Table.Column>Email</Table.Column>
</Table.Header>

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Table stories

Table

alignY?

"top" | "middle";

Control the vertical alignment of table content.

Defaults to:

"middle"

children?

[
  ReactElement<TableHeaderProps<object>, string | JSXElementConstructor<any>>,
  ReactElement<TableBodyProps<object>, string | JSXElementConstructor<...>>,
];

The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.

collection?

TableCollection<object>;

A pre-constructed collection to use instead of building one from items and children.

defaultSelectedKeys?

Iterable<Key> | "all";

The initial selected keys in the collection (uncontrolled).

disableKeyboardNavigation?

boolean;

Disable keyboard navigation. Use if you have input fields in your table. Be aware that this is bad for accessibility.

Defaults to:

"false"

disabledBehavior?

DisabledBehavior;

Whether disabledKeys applies to all interactions, or only selection.

disabledKeys?

Iterable<Key>;

A list of row keys to disable.

disallowEmptySelection?

boolean;

Whether the collection allows empty selection.

emptyState?

() => ReactNode;

Content to display when there are no rows in the table.

focusMode?

"row" | "cell";

Whether initial grid focus should be placed on the grid row or grid cell.

Defaults to:

'row'

onCellAction?

(key: Key) => void;

Handler that is called when a user performs an action on the cell.

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.

selectedKeys?

Iterable<Key> | "all";

The currently selected keys in the collection (controlled).

selectionBehavior?

SelectionBehavior;

How multiple selection should behave in the collection.

selectionMode?

SelectionMode;

The type of selection that is allowed in the collection.

Defaults to:

"none"

sortDescriptor?

SortDescriptor;

The current sorted column and direction.

stickyHeader?

boolean;

Make the column sticky to the top of the table.

Defaults to:

"true"

stretch?

boolean;

Stretch the table to fill the container.

Defaults to:

"false"

Table.Header

children

ReactNode;

Children of the component.

stickyHeader?

boolean;

Makes the header stick to the viewport.

Table.Column

alignX?

"left" | "center" | "right";

Horizontal text alignment of the column's content.

Defaults to:

"left"

allowsSorting?

boolean;

Whether the column allows sorting.

children?

ReactNode;

The column header label.

defaultWidth?

ColumnSize | null;

The default width of the column.

dir?

string;

hidden?

boolean;

id?

Key;

The unique id of the column.

inert?

boolean;

lang?

string;

maxWidth?

ColumnStaticSize | null;

The maximum width of the column.

minWidth?

ColumnStaticSize | null;

The minimum width of the column.

onAnimationEnd?

AnimationEventHandler<HTMLTableHeaderCellElement>;

onAnimationEndCapture?

AnimationEventHandler<HTMLTableHeaderCellElement>;

onAnimationIteration?

AnimationEventHandler<HTMLTableHeaderCellElement>;

onAnimationIterationCapture?

AnimationEventHandler<HTMLTableHeaderCellElement>;

onAnimationStart?

AnimationEventHandler<HTMLTableHeaderCellElement>;

onAnimationStartCapture?

AnimationEventHandler<HTMLTableHeaderCellElement>;

onAuxClick?

MouseEventHandler<HTMLTableHeaderCellElement>;

onAuxClickCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onClick?

MouseEventHandler<HTMLTableHeaderCellElement>;

onClickCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onContextMenu?

MouseEventHandler<HTMLTableHeaderCellElement>;

onContextMenuCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onDoubleClick?

MouseEventHandler<HTMLTableHeaderCellElement>;

onDoubleClickCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onGotPointerCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onGotPointerCaptureCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onLostPointerCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onLostPointerCaptureCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onMouseDown?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseDownCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseEnter?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseLeave?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseMove?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseMoveCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseOut?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseOutCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseOver?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseOverCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseUp?

MouseEventHandler<HTMLTableHeaderCellElement>;

onMouseUpCapture?

MouseEventHandler<HTMLTableHeaderCellElement>;

onPointerCancel?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerCancelCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerDown?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerDownCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerEnter?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerLeave?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerMove?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerMoveCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerOut?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerOutCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerOver?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerOverCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerUp?

PointerEventHandler<HTMLTableHeaderCellElement>;

onPointerUpCapture?

PointerEventHandler<HTMLTableHeaderCellElement>;

onScroll?

UIEventHandler<HTMLTableHeaderCellElement>;

onScrollCapture?

UIEventHandler<HTMLTableHeaderCellElement>;

onTouchCancel?

TouchEventHandler<HTMLTableHeaderCellElement>;

onTouchCancelCapture?

TouchEventHandler<HTMLTableHeaderCellElement>;

onTouchEnd?

TouchEventHandler<HTMLTableHeaderCellElement>;

onTouchEndCapture?

TouchEventHandler<HTMLTableHeaderCellElement>;

onTouchMove?

TouchEventHandler<HTMLTableHeaderCellElement>;

onTouchMoveCapture?

TouchEventHandler<HTMLTableHeaderCellElement>;

onTouchStart?

TouchEventHandler<HTMLTableHeaderCellElement>;

onTouchStartCapture?

TouchEventHandler<HTMLTableHeaderCellElement>;

onTransitionCancel?

TransitionEventHandler<HTMLTableHeaderCellElement>;

onTransitionCancelCapture?

TransitionEventHandler<HTMLTableHeaderCellElement>;

onTransitionEnd?

TransitionEventHandler<HTMLTableHeaderCellElement>;

onTransitionEndCapture?

TransitionEventHandler<HTMLTableHeaderCellElement>;

onTransitionRun?

TransitionEventHandler<HTMLTableHeaderCellElement>;

onTransitionRunCapture?

TransitionEventHandler<HTMLTableHeaderCellElement>;

onTransitionStart?

TransitionEventHandler<HTMLTableHeaderCellElement>;

onTransitionStartCapture?

TransitionEventHandler<HTMLTableHeaderCellElement>;

onWheel?

WheelEventHandler<HTMLTableHeaderCellElement>;

onWheelCapture?

WheelEventHandler<HTMLTableHeaderCellElement>;

rowHeader?

boolean;

Whether the column is a row header and should be announced by assistive technology during navigation. At least one column needs to be set as row header.

textValue?

string;

A string representation of the column's contents, used for accessibility announcements.

translate?

"yes" | "no";

width?

WidthProp;

The width of the column.

Table.Body

children?

ReactNode;

The children of the component.

Defaults to:

"undefined"

className?

string;

The CSS classes to apply to the component.

emptyState?

() => ReactNode;

Provides content to display when there are no rows in the table.

onLoadMore?

() => any;

Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.

Table.Row

children

CellElement | CellElement[] | CellRenderer

Rendered contents of the row or row child items.

download?

string | boolean;

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.

href?

string;

A URL to link to. See MDN.

hrefLang?

string;

Hints at the human language of the linked URL. SeeMDN.

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.

rel?

string;

The relationship between the linked resource and the current page. See MDN.

routerOptions?

undefined;

Options for the configured client side router.

row

GridNode<object>;

target?

HTMLAttributeAnchorTarget;

The target window for the link. See MDN.

textValue?

string;

A string representation of the row's contents, used for features like typeahead.

Table.Cell

align?

"left" | "center" | "right" | "justify";

Defaults to:

"left"

alignY?

"top" | "middle";

Defaults to:

"middle"

cell

GridNode<object>;

Table.EditableCell

action?

string | ((formData: FormData) => void | Promise<void>);

The action to submit the form to. Supports React 19 form actions.

alignX?

"left" | "center" | "right";

Horizontal text alignment of the cell content.

Defaults to:

'left'

children

ReactNode;

Display content shown when the cell is not being edited.

disabled?

boolean;

Whether editing is disabled. Hides the edit trigger button.

Defaults to:

"false"

field

ReactNode | (() => ReactNode);

Form field shown when editing. Must include name attribute for form data. Supports input elements like TextField, Select, etc.

onCancel?

() => void;

Called when the user cancels editing via the cancel button.

onSubmit?

(e: FormEvent<HTMLFormElement>) => void;

Called when the editing form is submitted, either via the save button or outside click.

overflow?

"truncate" | "wrap";

Text overflow behavior for this specific cell. Overrides the table-level overflow setting.

Defaults to:

"undefined (inherits from table)"

saving?

boolean;

Whether the cell is currently saving. Shows a loading indicator on the save button.

Defaults to:

"false"

Alternative components

Choosing the right alternative to data tables is crucial for effectively displaying your data and enhancing user interaction. Depending on the type of data and the desired user experience, different components can offer different benefits. Here are some alternatives to data tables that might better suit your needs:

SelectionList: Displays a list of interactive items, useful to create an actionable list of related items, such as a list of users.
Cards: Helpful if the data needs to be displayed with more visual hierarchy. Keep in mind that you can't compare data in this way not as good as tables, because the eyes have to move much more.
List: When presenting a simple, linear collection of items, often with less data per item. Easy to read and navigate, especially for data that doesn’t require complex organization.
Grid: Layout in a table-like structure. This gives you full control over the size of the columns and rows and allows you to align them according to your needs.
Columns: Create columns in one row, useful if you need to align content in a table-like way with fewer rows.

Is there still not the right alternative for you please get in touch with us!

Admin- & master mark

Used for marking internal-only features.

useAsyncListData

If you need to load async data into tables.

Last update: 2 hours ago