Table

Semantic article tables with contained horizontal scrolling.

MDX@gaudi/design-system/mdx/TableView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Table from '@gaudi/design-system/mdx/Table';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/table-api-keys.json.

Usage

| Component | Status || --- | --- || Callout | Documented || Chart | Ready for article embeds |

Examples

API keys and permissions

Simple data table

Editable cells

Leaderboard

Records with avatars, status and actions

Projects with team avatars

Vertical details

API

5 props

Accessibility

Include column or row headers and an accessible caption. Wide data scrolls inside the table region.

AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examples CardCard frames reusable content with title, subtitle, and optional children.8 examples PillPill renders compact category and status labels.4 examples DropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examples NumberFieldNumeric entry with increment buttons, bounds, locale formatting and scrubbing.2 examples useCopyToClipboardCopy text with a temporary copied state and a fallback.