Data Display Components

Present data and information effectively.

DataTable

Feature-rich data table with sorting, filtering, selection, and row actions.

import { DataTable } from 'room-ui';
import type { DataTableColumn, DataTableAction } from 'room-ui';

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

const columns: DataTableColumn<User>[] = [
  { id: 'name', header: 'Name', accessor: 'name', sortable: true },
  { id: 'email', header: 'Email', accessor: 'email' },
  { id: 'role', header: 'Role', accessor: 'role' },
];

const actions: DataTableAction<User>[] = [
  { id: 'edit', label: 'Edit', onClick: (rows) => handleEdit(rows[0]) },
  { id: 'delete', label: 'Delete', onClick: handleDelete, variant: 'danger' },
];

<DataTable
  data={users}
  columns={columns}
  actions={actions}
  selectable
/>

View in Storybook →

Badge

Status indicators with color variants.

import { Badge, StatusBadge } from 'room-ui';

// Variants
<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>

// With dot indicator
<Badge dot variant="success">Active</Badge>

// Pulsing animation
<Badge pulse variant="error">Live</Badge>

// Predefined status badges
<StatusBadge status="in-progress" />
<StatusBadge status="complete" />
<StatusBadge status="overdue" />

View in Storybook →

Avatar

User avatars with fallback initials.

import { Avatar } from 'room-ui';

<Avatar name="John Doe" />
<Avatar name="Jane Smith" src="/avatar.jpg" />
<Avatar name="Bob" size="lg" />
<Avatar name="Alice" status="online" />

View in Storybook →

Timeline

Vertical event timeline.

import { Timeline } from 'room-ui';

<Timeline
  items={[
    {
      id: '1',
      icon: <CheckCircle />,
      content: <div>Task completed</div>,
    },
    {
      id: '2',
      icon: <AlertCircle />,
      content: <div>Warning issued</div>,
    },
  ]}
/>

View in Storybook →

StatCard

Statistics card with trend indicators.

import { StatCard, StatsCardGrid } from 'room-ui';
import { DollarSign, Users } from 'lucide-react';

<StatsCardGrid columns={4}>
  <StatCard
    icon={<DollarSign />}
    label="Revenue"
    value="$125,000"
    change={{ value: 12.5, isPositive: true }}
  />
  <StatCard
    icon={<Users />}
    label="Users"
    value="1,234"
    subtitle="Active this month"
  />
</StatsCardGrid>

View in Storybook →

Progress

Progress bar with multiple variants.

import { Progress } from 'room-ui';

<Progress value={75} />
<Progress value={50} variant="success" />
<Progress value={25} size="sm" />

View in Storybook →

Calendar

Full calendar with event markers.

import { Calendar } from 'room-ui';

<Calendar
  selectedDate={selectedDate}
  onDateSelect={setSelectedDate}
  events={events}
/>

View in Storybook →