@vibe-labs/design-components-tables

Table component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-tables";

import { TableVariants, TableSizes, TableAlignments, TableSortDirections } from "@vibe-labs/design-components-tables/types";
import type { TableColumn, TableSortState, TableStyleProps } from "@vibe-labs/design-components-tables/types";

Contents

Tokens (tables.css)

CSS custom properties defined in @layer vibe.tokens:

Container

Token	Default
--table-bg	--surface-base
--table-border-color	--border-subtle
--table-border-width	--border-width-1
--table-radius	--radius-lg

Header

Token	Default	Description
--table-header-bg	--surface-subtle	Header background
--table-header-color	--text-muted	Header text color
--table-header-font-size	--text-xs	Header font size
--table-header-font-weight	--font-bold	Header font weight
--table-header-text-transform	uppercase	Header text transform
--table-header-height-{sm|md|lg}	2rem / 2.5rem / 3rem	Size-dependent height
--table-header-px	--space-3	Horizontal padding

Row

Token	Default	Description
--table-row-height-{sm|md|lg}	2.25rem / 2.75rem / 3.25rem	Size-dependent height
--table-row-px	--space-3	Horizontal padding
--table-row-border-color	--border-subtle	Row separator color
--table-row-bg	transparent	Default row background
--table-row-bg-stripe	--surface-subtle	Alternating row background
--table-row-hover-bg	--surface-hover-overlay	Hover background
--table-row-selected-bg	accent @ 8% mix	Selected row background
--table-row-selected-border	--color-accent	Selected row left accent strip

Cell

Token	Default
--table-cell-px	--space-2
--table-cell-font-size-{sm|md|lg}	text-xs / text-sm / text-base
--table-cell-color	--text-primary

Sort Indicator

Token	Default
--table-sort-indicator-color	--text-muted
--table-sort-indicator-active-color	--color-accent
--table-sort-indicator-size	0.75rem

Empty State

Token	Default
--table-empty-py	--space-12
--table-empty-color	--text-muted
--table-empty-font-size	--text-sm

Footer

Token	Default
--table-footer-bg	transparent
--table-footer-border-color	--border-subtle
--table-footer-px	--space-3
--table-footer-py	--space-2

Generated Styles (tables.g.css)

Component classes generated into @layer vibe.components.

Table Container

Flex column with border, radius, and overflow hidden. Supports four variants:

• default — border + background
• outlined — border only, transparent bg
• elevated — no border, shadow elevation
• ghost — no border, no background (rows only)

Size Modifier

data-size="sm|md|lg" controls header height, row height, and cell font size in one attribute.

Flags

• striped — alternating row backgrounds via :nth-child(even)
• hoverable — row hover background transition
• interactive — pointer cursor on rows
• fixed-header — sticky header with z-index
• full — width: 100%

Header Cell

Flex item with uppercase muted text. Sortable columns show a chevron indicator:

• [data-sortable] — cursor: pointer, chevron appears on hover
• [data-sorted="asc"] — chevron rotated up, accent color
• [data-sorted="desc"] — chevron down, accent color

Row

Flex row with bottom border separator. Supports:

• [data-selected] — accent-tinted background + left border accent strip
• [data-disabled] — reduced opacity, no pointer events
• Last row automatically drops bottom border

Cell

Flex item with column padding and alignment. Supports:

• [data-align="left|center|right"] — horizontal alignment
• [data-truncate] — ellipsis overflow (with child element support)
• [data-mono] — monospace font + tabular-nums
• [data-nowrap] — prevent wrapping without truncation

Empty State

Centred muted text with generous vertical padding for no-data states.

Footer

Flex row with top border. Attachment point for pagination or summary content.

• [data-align="left|center|right|between"] — content alignment

TypeScript Types (types/)

// Runtime constants
TableSizes; // ['sm', 'md', 'lg']
TableVariants; // ['default', 'outlined', 'elevated', 'ghost']
TableAlignments; // ['left', 'center', 'right']
TableSortDirections; // ['asc', 'desc']

// Column definition — generic over row type
interface TableColumn<T> {
  key: keyof T & string;
  label: string;
  width?: string;
  minWidth?: string;
  align?: TableAlignment;
  sortable?: boolean;
  truncate?: boolean;
  mono?: boolean;
  hidden?: boolean;
  cellClass?: string;
  headerClass?: string;
}

// Sort state
interface TableSortState {
  key: string;
  direction: TableSortDirection;
}

// Row identifier
type TableRowKey<T> = (keyof T & string) | ((item: T) => string | number);

// Per-element style props
interface TableStyleProps {
  variant?;
  size?;
  striped?;
  hoverable?;
  interactive?;
  fixedHeader?;
  full?;
}
interface TableHeaderStyleProps {}
interface TableHeaderCellStyleProps {
  align?;
  sortable?;
  sorted?;
}
interface TableRowStyleProps {
  selected?;
  disabled?;
}
interface TableCellStyleProps {
  align?;
  truncate?;
  mono?;
  nowrap?;
}
interface TableEmptyStyleProps {}
interface TableFooterStyleProps {
  align?;
}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
tables.css	Token definitions
tables.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, borders, spacing, typography, transitions, elevation).

Pagination delegates to @vibe-labs/design-components-pagination — this package does not own --pagination-* tokens.

Build

npm run build