Table
Styled native table parts: header, body, footer, rows and cells, with density, striped rows, a sticky header and right-aligned numbers.
import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from "@glob-ui/table"Preview
| Invoice | Client | Amount |
|---|---|---|
| INV-1001 | Atlas Studio | $1,240.00 |
| INV-1002 | Northwind | $860.00 |
| INV-1003 | Bluebird Labs | $2,310.00 |
| Total | $4,410.00 | |
Examples
Density
density is compact, default or comfortable: the cell padding of the whole table.
compact
| Name | Role |
|---|---|
| Ana | Admin |
| Benito | Editor |
| Dara | Viewer |
default
| Name | Role |
|---|---|
| Ana | Admin |
| Benito | Editor |
| Dara | Viewer |
comfortable
| Name | Role |
|---|---|
| Ana | Admin |
| Benito | Editor |
| Dara | Viewer |
Sticky header
stickyHeader keeps the header in view. The table scrolls inside its wrapper, so give the wrapper a height with containerClassName.
| Order | Status |
|---|---|
| ORD-2000 | Shipped |
| ORD-2001 | Pending |
| ORD-2002 | Pending |
| ORD-2003 | Shipped |
| ORD-2004 | Pending |
| ORD-2005 | Pending |
| ORD-2006 | Shipped |
| ORD-2007 | Pending |
| ORD-2008 | Pending |
| ORD-2009 | Shipped |
| ORD-2010 | Pending |
| ORD-2011 | Pending |
| ORD-2012 | Shipped |
| ORD-2013 | Pending |
| ORD-2014 | Pending |
| ORD-2015 | Shipped |
| ORD-2016 | Pending |
| ORD-2017 | Pending |
| ORD-2018 | Shipped |
| ORD-2019 | Pending |
| ORD-2020 | Pending |
| ORD-2021 | Shipped |
| ORD-2022 | Pending |
| ORD-2023 | Pending |
| ORD-2024 | Shipped |
| ORD-2025 | Pending |
| ORD-2026 | Pending |
| ORD-2027 | Shipped |
| ORD-2028 | Pending |
| ORD-2029 | Pending |
The table owns its scroll
A table wider than its container scrolls inside its own wrapper, never the page. This is the rule for every layout: the page does not handle horizontal scroll. Give a long table a containerClassName with a height when you also want a sticky header.
API
Props are generated from the TypeScript types in the package source.
Table
Prop
Type
TableHead
Prop
Type
TableCell
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| Scroll region (scrollLabel) | The wrapper becomes role="region", named by scrollLabel, and focusable, so keyboard users can scroll a wide table with the arrow keys. Use it when the table can be wider than the screen. |
| Caption | TableCaption names the table for screen readers and is shown under it. |
| Row selection | data-state="selected" shades the row. Pair it with a checkbox in a cell for a selectable table. |
ARIA. Uses the native table elements, so screen readers announce the row and column headers. align only changes the text alignment, not the reading order.