Astryx Design System

Table@astryxdesign/core v0.0.15 · Table

Usage

Table displays structured data in rows and columns with consistent dimensionality. It supports rich cell content, sorting, selection, pagination, and column management through a composable plugin system. Use Table for data sets with uniform structure; for simpler or inconsistent data, consider a list or card layout instead.

ts
import {Table} from '@astryxdesign/core/Table'

Best practices

Guidance	Practices
Do	Use density and divider variants to match the information density and scanning needs of your data.
Do	Compose rich cell content with XDS components like Badge, StatusDot, and Avatar via renderCell.
Do	Set explicit width on every column using proportional() or pixel(). proportional(1) gives equal flex distribution with a 120px minimum that prevents columns from collapsing on narrow viewports. Omitting width skips the minimum.
Don't	Use a table for data without consistent columns. Use a list or card layout for heterogeneous content.
Don't	Enable every plugin at once. Add only the features your use case requires to keep the interface focused.
Don't	Omit width on text-heavy columns; without an explicit proportional() width they have no minimum and can squish to near-zero on mobile.

Examples

Common configurations, variations, and states.

Table — Column Settings

Table with a column visibility picker in the toolbar. Toggle columns on and off.

Table — Popover Filters

Table with popover filter controls triggered by icons in column headers.

Table — Grid Dividers

Compact table with grid dividers showing both row and column borders, suited for dense numeric data.

Table — In Card

Table composed inside a card with a heading, demonstrating container bleed alignment.

Table — Inline Filters

Table with inline filter controls rendered directly below each column header.

Table — Paginated Data

Paginated data table navigating through a larger dataset page by page.

Table — Resizable Columns

Table with draggable column resize handles. Drag the right edge of any header to resize.

Table — Rich Cell Content

Table with rich cell content using Link for emails and Badge for role labels.

Table — Row Selection

Table with row selection checkboxes and a select-all header checkbox.

Table — Sortable Columns

Table with sortable columns, click headers to sort ascending or descending.

Table — Striped Rows

Table with alternating row colors and hover highlighting for easy scanning.

Usage

import {Table} from '@astryxdesign/core/Table'

Best practices

Guidance	Practices
Do	Use density and divider variants to match the information density and scanning needs of your data.
Do	Compose rich cell content with XDS components like Badge, StatusDot, and Avatar via renderCell.
Do	Set explicit width on every column using proportional() or pixel(). proportional(1) gives equal flex distribution with a 120px minimum that prevents columns from collapsing on narrow viewports. Omitting width skips the minimum.
Don't	Use a table for data without consistent columns. Use a list or card layout for heterogeneous content.
Don't	Enable every plugin at once. Add only the features your use case requires to keep the interface focused.
Don't	Omit width on text-heavy columns; without an explicit proportional() width they have no minimum and can squish to near-zero on mobile.