Table & ListTable12 props
Table
Table displays structured data in rows and columns with consistent dimensionality. It supports rich cell content, sorting, selection, pagination, and column management through a...
공식 문서 열기Preview
| Component | Owner | Status |
|---|---|---|
| Calendar | Design | Ready |
| Dialog | Platform | Review |
| Table | Data | Ready |
Import
import {Table} from '@astryxdesign/core/Table';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
When to use
Table displays structured data in rows and columns with consistent dimensionality. It supports rich cell content, sorting, selection, pagination, and column management through a...
tabledatatabledatagridspreadsheetsortingvirtualizedcolumnsrows
Important props
idKey(keyof T & string) | ((item: T) => string | number)optional
densitycompact | balanced | spaciousoptional
dividersrows | columns | grid | noneoptional
verticalAlignmiddle | top | bottomoptional
Theming targets
astryx-base-tableastryx-table-rowastryx-table-cellastryx-table-header-cell
Best practices
- DoUse density and divider variants to match the information density and scanning needs of your data.
- DoCompose rich cell content with Astryx components like Badge, StatusDot, and Avatar via renderCell.
- DoSet 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 n...
- DoUse the data-driven API from React Server Components: proportional(), pixel(), and column definitions without function props are server-safe. Columns using renderCell (or any fu...