Table
Display and interact with structured data in rows and columns.
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.
Do
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 | 2 | 33 | $1,000.00 | $2,000.00 |
Shakytown Comedy Club Shakytown, United States | 1 | 27 | $750.00 | $750.00 |
Oak Ridge Barn Hee-Haw City, Canada | 2 | 57 | $500.00 | $1,000.00 |
Harborfront Promenade Port Funsies, United Kingdom | 1 | 45 | $2,000.00 | $2,000.00 |
Total | $5,750.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 |
Do
Use multiple selection when users need to perform bulk operations on several items.
Do
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 | Action |
|---|---|---|---|
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 | Action |
|---|---|---|---|
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.
Do
- 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. |
Do
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 |
Do
- 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. | ||
Do
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 |
Do
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
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 |
Do
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!
Table
alignY?"top" | "middle" | "bottom" | "baseline";
Controls vertical alignment of cell content.
Defaults to:
"middle"allowTextSelection?boolean;
Controls whether text selection is allowed in cells.
Defaults to:
"false"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.
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.
children?ReactNode;
The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
defaultSelectedKeys?Iterable<Key> | "all";
The initial selected keys in the collection (uncontrolled).
dir?string;
disabledBehavior?DisabledBehavior;
Whether
disabledKeys applies to all interactions, or only selection.Defaults to:
"all"disabledKeys?Iterable<Key>;
A list of row keys to disable.
disallowEmptySelection?boolean;
Whether the collection allows empty selection.
dragAndDropHooks?DragAndDropHooks<object>;
The drag and drop hooks returned by
useDragAndDrop used to enable drag and drop behavior for the Table.escapeKeyBehavior?"clearSelection" | "none";
Whether pressing the escape key should clear selection in the table or not.
Most experiences should not modify this option as it eliminates a keyboard user's ability to
easily clear selection. Only use if the escape key is being handled externally or should not
trigger selection clearing contextually.
Defaults to:
'clearSelection'hidden?boolean;
inert?boolean;
lang?string;
onAnimationEnd?AnimationEventHandler<HTMLTableElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLTableElement>;
onAnimationIteration?AnimationEventHandler<HTMLTableElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLTableElement>;
onAnimationStart?AnimationEventHandler<HTMLTableElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLTableElement>;
onAuxClick?MouseEventHandler<HTMLTableElement>;
onAuxClickCapture?MouseEventHandler<HTMLTableElement>;
onClick?MouseEventHandler<HTMLTableElement>;
onClickCapture?MouseEventHandler<HTMLTableElement>;
onContextMenu?MouseEventHandler<HTMLTableElement>;
onContextMenuCapture?MouseEventHandler<HTMLTableElement>;
onDoubleClick?MouseEventHandler<HTMLTableElement>;
onDoubleClickCapture?MouseEventHandler<HTMLTableElement>;
onGotPointerCapture?PointerEventHandler<HTMLTableElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLTableElement>;
onLostPointerCapture?PointerEventHandler<HTMLTableElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLTableElement>;
onMouseDown?MouseEventHandler<HTMLTableElement>;
onMouseDownCapture?MouseEventHandler<HTMLTableElement>;
onMouseEnter?MouseEventHandler<HTMLTableElement>;
onMouseLeave?MouseEventHandler<HTMLTableElement>;
onMouseMove?MouseEventHandler<HTMLTableElement>;
onMouseMoveCapture?MouseEventHandler<HTMLTableElement>;
onMouseOut?MouseEventHandler<HTMLTableElement>;
onMouseOutCapture?MouseEventHandler<HTMLTableElement>;
onMouseOver?MouseEventHandler<HTMLTableElement>;
onMouseOverCapture?MouseEventHandler<HTMLTableElement>;
onMouseUp?MouseEventHandler<HTMLTableElement>;
onMouseUpCapture?MouseEventHandler<HTMLTableElement>;
onPointerCancel?PointerEventHandler<HTMLTableElement>;
onPointerCancelCapture?PointerEventHandler<HTMLTableElement>;
onPointerDown?PointerEventHandler<HTMLTableElement>;
onPointerDownCapture?PointerEventHandler<HTMLTableElement>;
onPointerEnter?PointerEventHandler<HTMLTableElement>;
onPointerLeave?PointerEventHandler<HTMLTableElement>;
onPointerMove?PointerEventHandler<HTMLTableElement>;
onPointerMoveCapture?PointerEventHandler<HTMLTableElement>;
onPointerOut?PointerEventHandler<HTMLTableElement>;
onPointerOutCapture?PointerEventHandler<HTMLTableElement>;
onPointerOver?PointerEventHandler<HTMLTableElement>;
onPointerOverCapture?PointerEventHandler<HTMLTableElement>;
onPointerUp?PointerEventHandler<HTMLTableElement>;
onPointerUpCapture?PointerEventHandler<HTMLTableElement>;
onRowAction?(key: Key) => void;
Handler that is called when a user performs an action on the row.
onScroll?UIEventHandler<HTMLTableElement>;
onScrollCapture?UIEventHandler<HTMLTableElement>;
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.
onTouchCancel?TouchEventHandler<HTMLTableElement>;
onTouchCancelCapture?TouchEventHandler<HTMLTableElement>;
onTouchEnd?TouchEventHandler<HTMLTableElement>;
onTouchEndCapture?TouchEventHandler<HTMLTableElement>;
onTouchMove?TouchEventHandler<HTMLTableElement>;
onTouchMoveCapture?TouchEventHandler<HTMLTableElement>;
onTouchStart?TouchEventHandler<HTMLTableElement>;
onTouchStartCapture?TouchEventHandler<HTMLTableElement>;
onTransitionCancel?TransitionEventHandler<HTMLTableElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLTableElement>;
onTransitionEnd?TransitionEventHandler<HTMLTableElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLTableElement>;
onTransitionRun?TransitionEventHandler<HTMLTableElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLTableElement>;
onTransitionStart?TransitionEventHandler<HTMLTableElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLTableElement>;
onWheel?WheelEventHandler<HTMLTableElement>;
onWheelCapture?WheelEventHandler<HTMLTableElement>;
overflow?"truncate" | "wrap";
Controls how cell content overflows. Works best when columns have defined width props.
Defaults to:
"wrap"selectedKeys?Iterable<Key> | "all";
The currently selected keys in the collection (controlled).
selectionMode?SelectionMode;
The type of selection that is allowed in the collection.
shouldSelectOnPressUp?boolean;
Whether selection should occur on press up instead of press down.
slot?string | null;
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.sortDescriptor?SortDescriptor;
The current sorted column and direction.
translate?"yes" | "no";
Table.Header
children?ReactNode |
((item: T) => ReactElement<unknown, 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.columns?Iterable<T>;
A list of table columns.
dependencies?readonly any[]Values that should invalidate the column cache when using dynamic collections.
dir?string;
hidden?boolean;
inert?boolean;
lang?string;
onAnimationEnd?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationIteration?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationStart?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLTableSectionElement>;
onAuxClick?MouseEventHandler<HTMLTableSectionElement>;
onAuxClickCapture?MouseEventHandler<HTMLTableSectionElement>;
onClick?MouseEventHandler<HTMLTableSectionElement>;
onClickCapture?MouseEventHandler<HTMLTableSectionElement>;
onContextMenu?MouseEventHandler<HTMLTableSectionElement>;
onContextMenuCapture?MouseEventHandler<HTMLTableSectionElement>;
onDoubleClick?MouseEventHandler<HTMLTableSectionElement>;
onDoubleClickCapture?MouseEventHandler<HTMLTableSectionElement>;
onGotPointerCapture?PointerEventHandler<HTMLTableSectionElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLTableSectionElement>;
onHoverChange?(isHovering: boolean) => void;
Handler that is called when the hover state changes.
onHoverEnd?(e: HoverEvent) => void;
Handler that is called when a hover interaction ends.
onHoverStart?(e: HoverEvent) => void;
Handler that is called when a hover interaction starts.
onLostPointerCapture?PointerEventHandler<HTMLTableSectionElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLTableSectionElement>;
onMouseDown?MouseEventHandler<HTMLTableSectionElement>;
onMouseDownCapture?MouseEventHandler<HTMLTableSectionElement>;
onMouseEnter?MouseEventHandler<HTMLTableSectionElement>;
onMouseLeave?MouseEventHandler<HTMLTableSectionElement>;
onMouseMove?MouseEventHandler<HTMLTableSectionElement>;
onMouseMoveCapture?MouseEventHandler<HTMLTableSectionElement>;
onMouseOut?MouseEventHandler<HTMLTableSectionElement>;
onMouseOutCapture?MouseEventHandler<HTMLTableSectionElement>;
onMouseOver?MouseEventHandler<HTMLTableSectionElement>;
onMouseOverCapture?MouseEventHandler<HTMLTableSectionElement>;
onMouseUp?MouseEventHandler<HTMLTableSectionElement>;
onMouseUpCapture?MouseEventHandler<HTMLTableSectionElement>;
onPointerCancel?PointerEventHandler<HTMLTableSectionElement>;
onPointerCancelCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerDown?PointerEventHandler<HTMLTableSectionElement>;
onPointerDownCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerEnter?PointerEventHandler<HTMLTableSectionElement>;
onPointerLeave?PointerEventHandler<HTMLTableSectionElement>;
onPointerMove?PointerEventHandler<HTMLTableSectionElement>;
onPointerMoveCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerOut?PointerEventHandler<HTMLTableSectionElement>;
onPointerOutCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerOver?PointerEventHandler<HTMLTableSectionElement>;
onPointerOverCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerUp?PointerEventHandler<HTMLTableSectionElement>;
onPointerUpCapture?PointerEventHandler<HTMLTableSectionElement>;
onScroll?UIEventHandler<HTMLTableSectionElement>;
onScrollCapture?UIEventHandler<HTMLTableSectionElement>;
onTouchCancel?TouchEventHandler<HTMLTableSectionElement>;
onTouchCancelCapture?TouchEventHandler<HTMLTableSectionElement>;
onTouchEnd?TouchEventHandler<HTMLTableSectionElement>;
onTouchEndCapture?TouchEventHandler<HTMLTableSectionElement>;
onTouchMove?TouchEventHandler<HTMLTableSectionElement>;
onTouchMoveCapture?TouchEventHandler<HTMLTableSectionElement>;
onTouchStart?TouchEventHandler<HTMLTableSectionElement>;
onTouchStartCapture?TouchEventHandler<HTMLTableSectionElement>;
onTransitionCancel?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionEnd?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionRun?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionStart?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLTableSectionElement>;
onWheel?WheelEventHandler<HTMLTableSectionElement>;
onWheelCapture?WheelEventHandler<HTMLTableSectionElement>;
render?DOMRenderFunction<"thead" | "div", TableHeaderRenderProps>;
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if
<button>is expected, you cannot render an<a>). - Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
sticky?boolean;
Makes the header stick to the top of the viewport when scrolling.
translate?"yes" | "no";
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 | ((item: T) => ReactNode);
The contents of the collection.
dependencies?readonly any[]Values that should invalidate the item cache when using dynamic collections.
dir?string;
emptyState?(props: TableBodyRenderProps) => ReactNode;
Render function called when the table body has no items to display.
hidden?boolean;
inert?boolean;
items?Iterable<T>;
Item objects in the collection.
lang?string;
onAnimationEnd?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationIteration?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationStart?AnimationEventHandler<HTMLTableSectionElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLTableSectionElement>;
onAuxClick?MouseEventHandler<HTMLTableSectionElement>;
onAuxClickCapture?MouseEventHandler<HTMLTableSectionElement>;
onClick?MouseEventHandler<HTMLTableSectionElement>;
onClickCapture?MouseEventHandler<HTMLTableSectionElement>;
onContextMenu?MouseEventHandler<HTMLTableSectionElement>;
onContextMenuCapture?MouseEventHandler<HTMLTableSectionElement>;
onDoubleClick?MouseEventHandler<HTMLTableSectionElement>;
onDoubleClickCapture?MouseEventHandler<HTMLTableSectionElement>;
onGotPointerCapture?PointerEventHandler<HTMLTableSectionElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLTableSectionElement>;
onLostPointerCapture?PointerEventHandler<HTMLTableSectionElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLTableSectionElement>;
onMouseDown?MouseEventHandler<HTMLTableSectionElement>;
onMouseDownCapture?MouseEventHandler<HTMLTableSectionElement>;
onMouseEnter?MouseEventHandler<HTMLTableSectionElement>;
onMouseLeave?MouseEventHandler<HTMLTableSectionElement>;
onMouseMove?MouseEventHandler<HTMLTableSectionElement>;
onMouseMoveCapture?MouseEventHandler<HTMLTableSectionElement>;
onMouseOut?MouseEventHandler<HTMLTableSectionElement>;
onMouseOutCapture?MouseEventHandler<HTMLTableSectionElement>;
onMouseOver?MouseEventHandler<HTMLTableSectionElement>;
onMouseOverCapture?MouseEventHandler<HTMLTableSectionElement>;
onMouseUp?MouseEventHandler<HTMLTableSectionElement>;
onMouseUpCapture?MouseEventHandler<HTMLTableSectionElement>;
onPointerCancel?PointerEventHandler<HTMLTableSectionElement>;
onPointerCancelCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerDown?PointerEventHandler<HTMLTableSectionElement>;
onPointerDownCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerEnter?PointerEventHandler<HTMLTableSectionElement>;
onPointerLeave?PointerEventHandler<HTMLTableSectionElement>;
onPointerMove?PointerEventHandler<HTMLTableSectionElement>;
onPointerMoveCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerOut?PointerEventHandler<HTMLTableSectionElement>;
onPointerOutCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerOver?PointerEventHandler<HTMLTableSectionElement>;
onPointerOverCapture?PointerEventHandler<HTMLTableSectionElement>;
onPointerUp?PointerEventHandler<HTMLTableSectionElement>;
onPointerUpCapture?PointerEventHandler<HTMLTableSectionElement>;
onScroll?UIEventHandler<HTMLTableSectionElement>;
onScrollCapture?UIEventHandler<HTMLTableSectionElement>;
onTouchCancel?TouchEventHandler<HTMLTableSectionElement>;
onTouchCancelCapture?TouchEventHandler<HTMLTableSectionElement>;
onTouchEnd?TouchEventHandler<HTMLTableSectionElement>;
onTouchEndCapture?TouchEventHandler<HTMLTableSectionElement>;
onTouchMove?TouchEventHandler<HTMLTableSectionElement>;
onTouchMoveCapture?TouchEventHandler<HTMLTableSectionElement>;
onTouchStart?TouchEventHandler<HTMLTableSectionElement>;
onTouchStartCapture?TouchEventHandler<HTMLTableSectionElement>;
onTransitionCancel?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionEnd?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionRun?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionStart?TransitionEventHandler<HTMLTableSectionElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLTableSectionElement>;
onWheel?WheelEventHandler<HTMLTableSectionElement>;
onWheelCapture?WheelEventHandler<HTMLTableSectionElement>;
render?DOMRenderFunction<"tbody" | "div", TableBodyRenderProps>;
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if
<button>is expected, you cannot render an<a>). - Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
translate?"yes" | "no";
Table.Row
children?ReactNode |
((item: T) => ReactElement<unknown, string | JSXElementConstructor<any>>);
The cells within the row. Supports static items or a function for dynamic rendering.
columns?Iterable<T>;
A list of columns used when dynamically rendering cells.
dependencies?readonly any[]Values that should invalidate the cell cache when using dynamic collections.
dir?string;
download?string | boolean;
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
hidden?boolean;
href?string;
A URL to link to. See MDN.
hrefLang?string;
Hints at the human language of the linked URL. SeeMDN.
id?Key;
The unique id of the row.
inert?boolean;
isDisabled?boolean;
Whether the row is disabled.
lang?string;
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.onAnimationEnd?AnimationEventHandler<HTMLTableRowElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLTableRowElement>;
onAnimationIteration?AnimationEventHandler<HTMLTableRowElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLTableRowElement>;
onAnimationStart?AnimationEventHandler<HTMLTableRowElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLTableRowElement>;
onAuxClick?MouseEventHandler<HTMLTableRowElement>;
onAuxClickCapture?MouseEventHandler<HTMLTableRowElement>;
onClick?(e: MouseEvent<FocusableElement, MouseEvent>) => void;
Not recommended – use
onPress instead. onClick is an alias for onPress
provided for compatibility with other libraries. onPress provides
additional event details for non-mouse interactions.onClickCapture?MouseEventHandler<HTMLTableRowElement>;
onContextMenu?MouseEventHandler<HTMLTableRowElement>;
onContextMenuCapture?MouseEventHandler<HTMLTableRowElement>;
onDoubleClick?MouseEventHandler<HTMLTableRowElement>;
onDoubleClickCapture?MouseEventHandler<HTMLTableRowElement>;
onGotPointerCapture?PointerEventHandler<HTMLTableRowElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLTableRowElement>;
onHoverChange?(isHovering: boolean) => void;
Handler that is called when the hover state changes.
onHoverEnd?(e: HoverEvent) => void;
Handler that is called when a hover interaction ends.
onHoverStart?(e: HoverEvent) => void;
Handler that is called when a hover interaction starts.
onLostPointerCapture?PointerEventHandler<HTMLTableRowElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLTableRowElement>;
onMouseDown?MouseEventHandler<HTMLTableRowElement>;
onMouseDownCapture?MouseEventHandler<HTMLTableRowElement>;
onMouseEnter?MouseEventHandler<HTMLTableRowElement>;
onMouseLeave?MouseEventHandler<HTMLTableRowElement>;
onMouseMove?MouseEventHandler<HTMLTableRowElement>;
onMouseMoveCapture?MouseEventHandler<HTMLTableRowElement>;
onMouseOut?MouseEventHandler<HTMLTableRowElement>;
onMouseOutCapture?MouseEventHandler<HTMLTableRowElement>;
onMouseOver?MouseEventHandler<HTMLTableRowElement>;
onMouseOverCapture?MouseEventHandler<HTMLTableRowElement>;
onMouseUp?MouseEventHandler<HTMLTableRowElement>;
onMouseUpCapture?MouseEventHandler<HTMLTableRowElement>;
onPointerCancel?PointerEventHandler<HTMLTableRowElement>;
onPointerCancelCapture?PointerEventHandler<HTMLTableRowElement>;
onPointerDown?PointerEventHandler<HTMLTableRowElement>;
onPointerDownCapture?PointerEventHandler<HTMLTableRowElement>;
onPointerEnter?PointerEventHandler<HTMLTableRowElement>;
onPointerLeave?PointerEventHandler<HTMLTableRowElement>;
onPointerMove?PointerEventHandler<HTMLTableRowElement>;
onPointerMoveCapture?PointerEventHandler<HTMLTableRowElement>;
onPointerOut?PointerEventHandler<HTMLTableRowElement>;
onPointerOutCapture?PointerEventHandler<HTMLTableRowElement>;
onPointerOver?PointerEventHandler<HTMLTableRowElement>;
onPointerOverCapture?PointerEventHandler<HTMLTableRowElement>;
onPointerUp?PointerEventHandler<HTMLTableRowElement>;
onPointerUpCapture?PointerEventHandler<HTMLTableRowElement>;
onPress?(e: PressEvent) => void;
Handler that is called when the press is released over the target.
onPressChange?(isPressed: boolean) => void;
Handler that is called when the press state changes.
onPressEnd?(e: PressEvent) => void;
Handler that is called when a press interaction ends, either
over the target or when the pointer leaves the target.
onPressStart?(e: PressEvent) => void;
Handler that is called when a press interaction starts.
onPressUp?(e: PressEvent) => void;
Handler that is called when a press is released over the target, regardless of
whether it started on the target or not.
onScroll?UIEventHandler<HTMLTableRowElement>;
onScrollCapture?UIEventHandler<HTMLTableRowElement>;
onTouchCancel?TouchEventHandler<HTMLTableRowElement>;
onTouchCancelCapture?TouchEventHandler<HTMLTableRowElement>;
onTouchEnd?TouchEventHandler<HTMLTableRowElement>;
onTouchEndCapture?TouchEventHandler<HTMLTableRowElement>;
onTouchMove?TouchEventHandler<HTMLTableRowElement>;
onTouchMoveCapture?TouchEventHandler<HTMLTableRowElement>;
onTouchStart?TouchEventHandler<HTMLTableRowElement>;
onTouchStartCapture?TouchEventHandler<HTMLTableRowElement>;
onTransitionCancel?TransitionEventHandler<HTMLTableRowElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLTableRowElement>;
onTransitionEnd?TransitionEventHandler<HTMLTableRowElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLTableRowElement>;
onTransitionRun?TransitionEventHandler<HTMLTableRowElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLTableRowElement>;
onTransitionStart?TransitionEventHandler<HTMLTableRowElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLTableRowElement>;
onWheel?WheelEventHandler<HTMLTableRowElement>;
onWheelCapture?WheelEventHandler<HTMLTableRowElement>;
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.
render?DOMRenderFunction<"tr" | "div", RowRenderProps>;
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if
<button>is expected, you cannot render an<a>). - Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
routerOptions?undefined;
Options for the configured client side router.
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.
translate?"yes" | "no";
value?object;
The object value that this row represents. When using dynamic collections, this is set automatically.
Table.Cell
alignX?"left" | "center" | "right";
Horizontal text alignment of the cell content.
Defaults to:
'left'children?ReactNode;
The content of the cell.
colSpan?number;
Indicates how many columns the data cell spans.
dir?string;
hidden?boolean;
id?Key;
The unique id of the cell.
inert?boolean;
lang?string;
onAnimationEnd?AnimationEventHandler<HTMLTableCellElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLTableCellElement>;
onAnimationIteration?AnimationEventHandler<HTMLTableCellElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLTableCellElement>;
onAnimationStart?AnimationEventHandler<HTMLTableCellElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLTableCellElement>;
onAuxClick?MouseEventHandler<HTMLTableCellElement>;
onAuxClickCapture?MouseEventHandler<HTMLTableCellElement>;
onClick?MouseEventHandler<HTMLTableCellElement>;
onClickCapture?MouseEventHandler<HTMLTableCellElement>;
onContextMenu?MouseEventHandler<HTMLTableCellElement>;
onContextMenuCapture?MouseEventHandler<HTMLTableCellElement>;
onDoubleClick?MouseEventHandler<HTMLTableCellElement>;
onDoubleClickCapture?MouseEventHandler<HTMLTableCellElement>;
onGotPointerCapture?PointerEventHandler<HTMLTableCellElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLTableCellElement>;
onLostPointerCapture?PointerEventHandler<HTMLTableCellElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLTableCellElement>;
onMouseDown?MouseEventHandler<HTMLTableCellElement>;
onMouseDownCapture?MouseEventHandler<HTMLTableCellElement>;
onMouseEnter?MouseEventHandler<HTMLTableCellElement>;
onMouseLeave?MouseEventHandler<HTMLTableCellElement>;
onMouseMove?MouseEventHandler<HTMLTableCellElement>;
onMouseMoveCapture?MouseEventHandler<HTMLTableCellElement>;
onMouseOut?MouseEventHandler<HTMLTableCellElement>;
onMouseOutCapture?MouseEventHandler<HTMLTableCellElement>;
onMouseOver?MouseEventHandler<HTMLTableCellElement>;
onMouseOverCapture?MouseEventHandler<HTMLTableCellElement>;
onMouseUp?MouseEventHandler<HTMLTableCellElement>;
onMouseUpCapture?MouseEventHandler<HTMLTableCellElement>;
onPointerCancel?PointerEventHandler<HTMLTableCellElement>;
onPointerCancelCapture?PointerEventHandler<HTMLTableCellElement>;
onPointerDown?PointerEventHandler<HTMLTableCellElement>;
onPointerDownCapture?PointerEventHandler<HTMLTableCellElement>;
onPointerEnter?PointerEventHandler<HTMLTableCellElement>;
onPointerLeave?PointerEventHandler<HTMLTableCellElement>;
onPointerMove?PointerEventHandler<HTMLTableCellElement>;
onPointerMoveCapture?PointerEventHandler<HTMLTableCellElement>;
onPointerOut?PointerEventHandler<HTMLTableCellElement>;
onPointerOutCapture?PointerEventHandler<HTMLTableCellElement>;
onPointerOver?PointerEventHandler<HTMLTableCellElement>;
onPointerOverCapture?PointerEventHandler<HTMLTableCellElement>;
onPointerUp?PointerEventHandler<HTMLTableCellElement>;
onPointerUpCapture?PointerEventHandler<HTMLTableCellElement>;
onScroll?UIEventHandler<HTMLTableCellElement>;
onScrollCapture?UIEventHandler<HTMLTableCellElement>;
onTouchCancel?TouchEventHandler<HTMLTableCellElement>;
onTouchCancelCapture?TouchEventHandler<HTMLTableCellElement>;
onTouchEnd?TouchEventHandler<HTMLTableCellElement>;
onTouchEndCapture?TouchEventHandler<HTMLTableCellElement>;
onTouchMove?TouchEventHandler<HTMLTableCellElement>;
onTouchMoveCapture?TouchEventHandler<HTMLTableCellElement>;
onTouchStart?TouchEventHandler<HTMLTableCellElement>;
onTouchStartCapture?TouchEventHandler<HTMLTableCellElement>;
onTransitionCancel?TransitionEventHandler<HTMLTableCellElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLTableCellElement>;
onTransitionEnd?TransitionEventHandler<HTMLTableCellElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLTableCellElement>;
onTransitionRun?TransitionEventHandler<HTMLTableCellElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLTableCellElement>;
onTransitionStart?TransitionEventHandler<HTMLTableCellElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLTableCellElement>;
onWheel?WheelEventHandler<HTMLTableCellElement>;
onWheelCapture?WheelEventHandler<HTMLTableCellElement>;
overflow?"truncate" | "wrap";
Text overflow behavior for this specific cell. Overrides the table-level overflow setting.
Defaults to:
"undefined (inherits from table)"render?DOMRenderFunction<"td" | "div", CellRenderProps>;
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if
<button>is expected, you cannot render an<a>). - Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
textValue?string;
A string representation of the cell's contents, used for features like typeahead.
translate?"yes" | "no";
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'childrenReactNode;
Display content shown when the cell is not being edited.
disabled?boolean;
Whether editing is disabled. Hides the edit trigger button.
Defaults to:
"false"fieldReactNode | (() => 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!
Related
Admin- & master mark
Used for marking internal-only features.
useAsyncListData
If you need to load async data into tables.
Last update: 21 hours ago