feat: add composable DataTable component

.github/workflows/publish-datum-ui.yml

@@ -4,18 +4,134 @@ on:
   push:
     branches:
       - main
+  pull_request:
+    types: [labeled, synchronize]
+    branches: [main]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  publish-datum-ui:
+  # Stable publish on push to main (reusable workflow)
+  publish:
+    if: github.event_name == 'push'
     uses: datum-cloud/actions/.github/workflows/publish-npm-package.yaml@main
     permissions:
       contents: write
       id-token: write
-
     with:
       package-name: "@datum-cloud/datum-ui"
       package-path: packages/datum-ui
+
+  # Alpha publish on PR with 'alpha' label
+  alpha:
+    name: Publish alpha
+    if: github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'alpha')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout PR branch
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: pnpm
+          registry-url: https://registry.npmjs.org
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Determine next version
+        id: version
+        working-directory: packages/datum-ui
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          CURRENT=$(node -p "require('./package.json').version")
+
+          # Detect bump type from PR labels
+          LABELS='${{ toJSON(github.event.pull_request.labels.*.name) }}'
+          if echo "$LABELS" | grep -q "release:major"; then
+            BUMP="major"
+          elif echo "$LABELS" | grep -q "release:minor"; then
+            BUMP="minor"
+          else
+            BUMP="patch"
+          fi
+
+          # Calculate next version
+          NEXT=$(node -e "
+            const [major, minor, patch] = '${CURRENT}'.split('.').map(Number);
+            const bump = '${BUMP}';
+            if (bump === 'major') console.log(\`\${major+1}.0.0\`);
+            else if (bump === 'minor') console.log(\`\${major}.\${minor+1}.0\`);
+            else console.log(\`\${major}.\${minor}.\${patch+1}\`);
+          ")
+          SHORT_SHA=$(echo "${{ github.event.pull_request.head.sha }}" | cut -c1-7)
+          ALPHA_VERSION="${NEXT}-alpha.${SHORT_SHA}"
+
+          echo "version=${ALPHA_VERSION}" >> "$GITHUB_OUTPUT"
+          echo "Publishing ${ALPHA_VERSION} (${BUMP} bump from ${CURRENT})"
+
+      - name: Set alpha version
+        working-directory: packages/datum-ui
+        run: npm version ${{ steps.version.outputs.version }} --no-git-tag-version
+
+      - name: Build
+        run: pnpm --filter @datum-cloud/datum-ui build
+
+      - name: Publish to npm
+        working-directory: packages/datum-ui
+        run: pnpm publish --no-git-checks --access public --tag alpha --provenance
+
+      - name: Comment on PR
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const version = '${{ steps.version.outputs.version }}';
+            const body = [
+              `### 📦 Alpha published`,
+              '',
+              `\`@datum-cloud/datum-ui@${version}\``,
+              '',
+              '```bash',
+              `pnpm add @datum-cloud/datum-ui@${version}`,
+              '# or use the alpha tag for the latest alpha:',
+              'pnpm add @datum-cloud/datum-ui@alpha',
+              '```',
+            ].join('\n');
+
+            // Find and update existing comment, or create new one
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+            });
+
+            const marker = '### 📦 Alpha published';
+            const existing = comments.find(c => c.body.startsWith(marker));
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body,
+              });
+            }

.gitignore

@@ -12,4 +12,6 @@ coverage/
 
 .claude/
 CLAUDE.MD
-/docs/
+/docs/
+/specs/
+*.backup

README.md

@@ -210,15 +210,24 @@ pnpm --filter @datum-cloud/datum-ui typecheck
 pnpm --filter @datum-cloud/datum-ui lint
 pnpm --filter @datum-cloud/datum-ui test
 
-# 3. Add a changeset
-pnpm changeset
-
-# 4. Commit and push
+# 3. Commit and push
 git add .
 git commit -m "feat: description of changes"
 git push -u origin feat/my-feature
 ```
 
+### Release Labels
+
+When your PR is merged to `main`, the publish workflow automatically bumps the package version based on PR labels:
+
+| Label | Version Bump | Example |
+|---|---|---|
+| `release:major` | Major | `0.3.0` → `1.0.0` |
+| `release:minor` | Minor | `0.2.1` → `0.3.0` |
+| _(no label)_ | Patch (default) | `0.2.1` → `0.2.2` |
+
+Add the appropriate label to your PR before merging to control the version bump.
+
 ## License
 
 MIT

apps/docs/content/docs/components/base/breadcrumb.mdx

@@ -7,13 +7,6 @@ description: A navigational trail showing the user's current location within a h
 
 Breadcrumb renders a horizontal list of links representing the user's current path within the application hierarchy. It follows the WAI-ARIA breadcrumb pattern with `nav[aria-label="breadcrumb"]` and `aria-current="page"` on the current page. Built on Radix UI's Slot for polymorphic link rendering.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-slot
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/button.mdx

@@ -9,13 +9,6 @@ import { Button } from '@/components/ui'
 
 The Button component supports multiple visual types (primary, secondary, tertiary, quaternary, danger, warning, success) combined with themes (solid, outline, light, borderless, link) for flexible styling. It includes loading states, icon support, and full-width layout.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-slot
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/checkbox.mdx

@@ -9,13 +9,6 @@ import { Checkbox, Label } from '@/components/ui'
 
 The `Checkbox` component renders an accessible checkbox input. It supports checked, unchecked, and indeterminate states, and is styled with Datum design tokens.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-checkbox
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/collapsible.mdx

@@ -7,13 +7,6 @@ description: A component that toggles the visibility of its content with expand/
 
 Collapsible is a thin wrapper around Radix UI's Collapsible primitive. It lets users expand and collapse a section of content, useful for FAQs, advanced settings panels, or any progressive-disclosure pattern.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-collapsible
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/command.mdx

@@ -7,13 +7,6 @@ description: A searchable command palette for quick navigation and action execut
 
 Command provides a searchable, keyboard-navigable list of actions, inspired by the command palettes in VS Code and Linear. It is built on [cmdk](https://cmdk.paco.me/) and can be used inline or inside a dialog overlay (`CommandDialog`). Items are automatically filtered as the user types.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-cmdk
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/dialog.mdx

@@ -9,13 +9,6 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, Dialo
 
 The Dialog component renders a centered modal panel with a semi-transparent backdrop. It composes Radix UI's Dialog primitive with Datum styling -- blur overlay, rounded content panel, and built-in close button. Use it for confirmations, short forms, or any interaction that requires focused attention.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-dialog
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/hover-card.mdx

@@ -7,13 +7,6 @@ description: A floating preview card that appears on hover over a trigger elemen
 
 HoverCard shows a floating preview card when the user hovers over a trigger element. It is useful for displaying supplementary information (user profiles, resource summaries, link previews) without requiring a click. Built on Radix UI's HoverCard primitive.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-hover-card
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/label.mdx

@@ -9,13 +9,6 @@ import { Label, Input } from '@/components/ui'
 
 The `Label` component renders an accessible `<label>` element that pairs with form inputs. It automatically handles disabled states and provides consistent typography across your application.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-label
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/place-autocomplete.mdx

@@ -7,13 +7,6 @@ description: Location search with autocomplete powered by Google Places API.
 
 Re-exported from shadcn/ui. Location search with autocomplete.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-cmdk
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/popover.mdx

@@ -9,13 +9,6 @@ import { Button } from '@/components/ui'
 
 Popover displays rich content in a floating panel anchored to a trigger element. Unlike a tooltip (text-only, hover-activated), a popover can contain forms, buttons, or any interactive content and is opened by clicking the trigger. It is built on Radix UI's Popover primitive.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-popover
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/radio-group.mdx

@@ -9,13 +9,6 @@ import { RadioGroup, RadioGroupItem, Label } from '@/components/ui'
 
 The `RadioGroup` component renders a group of radio buttons where only one option can be selected at a time. It uses Radix UI RadioGroup for accessible keyboard navigation and focus management.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-radio-group
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/select.mdx

@@ -9,13 +9,6 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrig
 
 The `Select` component is a styled dropdown built on Radix UI Select. It supports grouped options, placeholder text, and two trigger sizes. The Datum wrapper adds custom border, background, and focus tokens on top of the shadcn base.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-select
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/separator.mdx

@@ -9,13 +9,6 @@ import { Separator } from '@/components/ui'
 
 The Separator component renders a thin line to visually divide content. It supports horizontal and vertical orientations and is built on top of `@radix-ui/react-separator` with accessible defaults.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-separator
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/sheet.mdx

@@ -10,13 +10,6 @@ import { Button } from '@/components/ui'
 
 Sheet is a panel that slides in from a screen edge (right, left, top, or bottom). It is built on Radix UI's Dialog primitive and is useful for settings panels, detail views, and mobile navigation menus without navigating away from the current page.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-dialog
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/switch.mdx

@@ -9,13 +9,6 @@ import { Switch, Label } from '@/components/ui'
 
 The `Switch` component provides a visual toggle for boolean settings. It is built on Radix UI Switch and styled with Datum design tokens.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-switch
-```
 
 ## Usage
 

apps/docs/content/docs/components/base/tabs.mdx

@@ -9,13 +9,6 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui'
 
 Tabs let users switch between related groups of content without leaving the page. The datum-ui Tabs component wraps Radix UI Tabs with Datum design tokens and is composed of `Tabs` (root), `TabsList`, `TabsTrigger`, and `TabsContent`.
 
-## Dependencies
-
-This component requires the following packages:
-
-```package-install
-@radix-ui/react-tabs
-```
 
 ## Usage