From 0f53c525ee466c1fd7c37805b097a2fd17eb878d Mon Sep 17 00:00:00 2001
From: Jeton Korenica <jetonkorenica@gmail.com>
Date: Mon, 13 Jul 2026 18:42:21 +0200
Subject: [PATCH] feat(table): port full COSS table set (variants + data
 tables)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match the COSS UI table docs (coss.com/ui/docs/components/table):

Core Table component:
- Add variant prop ('default' | 'card') with data-slot/data-variant
  attribute targeting, porting COSS's exact card-variant styling
  (border-separate rounded surfaces, translucent hover/selected states)

New Frame component (Frame/FramePanel/FrameFooter) — muted app-surface
framing used by the data-table examples.

Demos (all 5 COSS examples):
- Table01: basic default table (badges, footer, caption)
- Table02: card variant, standalone
- Table03: card table wrapped in a Frame
- Table04: data table with row selection (Vue-reactive port of the
  TanStack example, using our Checkbox with indeterminate select-all)
- Table05: full data table with column sorting + pagination + range
  select (flight board; Vue-reactive, no TanStack dependency)

type-check, lint and build pass; verified in-browser (card surfaces,
row selection, sorting, pagination all functional).
---
 src/components/tables/Table01.vue        |  65 +++--
 src/components/tables/Table02.vue        |  73 +++---
 src/components/tables/Table03.vue        |  56 +++++
 src/components/tables/Table04.vue        | 117 +++++++++
 src/components/tables/Table05.vue        | 292 +++++++++++++++++++++++
 src/components/ui/Frame/Frame.vue        |  21 ++
 src/components/ui/Frame/FrameFooter.vue  |  12 +
 src/components/ui/Frame/FramePanel.vue   |  20 ++
 src/components/ui/Frame/index.ts         |   3 +
 src/components/ui/Table/Table.vue        |  23 +-
 src/components/ui/Table/TableBody.vue    |  10 +-
 src/components/ui/Table/TableCaption.vue |   5 +-
 src/components/ui/Table/TableCell.vue    |   8 +-
 src/components/ui/Table/TableFooter.vue  |   8 +-
 src/components/ui/Table/TableHead.vue    |   3 +-
 src/components/ui/Table/TableHeader.vue  |   2 +-
 src/components/ui/Table/TableRow.vue     |   3 +-
 src/views/Tables.vue                     |   2 +-
 18 files changed, 652 insertions(+), 71 deletions(-)
 create mode 100644 src/components/tables/Table03.vue
 create mode 100644 src/components/tables/Table04.vue
 create mode 100644 src/components/tables/Table05.vue
 create mode 100644 src/components/ui/Frame/Frame.vue
 create mode 100644 src/components/ui/Frame/FrameFooter.vue
 create mode 100644 src/components/ui/Frame/FramePanel.vue
 create mode 100644 src/components/ui/Frame/index.ts

diff --git a/src/components/tables/Table01.vue b/src/components/tables/Table01.vue
index 0c6f327..1fe4f90 100644
--- a/src/components/tables/Table01.vue
+++ b/src/components/tables/Table01.vue
@@ -1,40 +1,55 @@
 <script setup lang="ts">
+import Badge from '@/components/ui/Badge.vue'
 import {
   Table,
   TableBody,
+  TableCaption,
   TableCell,
+  TableFooter,
   TableHead,
   TableHeader,
   TableRow
 } from '@/components/ui/Table'
 
-const invoices = [
-  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
-  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
-  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
-  { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' }
+const projects = [
+  { project: 'Website Redesign', dot: 'bg-emerald-500', status: 'Paid', team: 'Frontend Team', budget: '$12,500' },
+  { project: 'Mobile App', dot: 'bg-muted-foreground/64', status: 'Unpaid', team: 'Mobile Team', budget: '$8,750' },
+  { project: 'API Integration', dot: 'bg-amber-500', status: 'Pending', team: 'Backend Team', budget: '$5,200' },
+  { project: 'Database Migration', dot: 'bg-emerald-500', status: 'Paid', team: 'DevOps Team', budget: '$3,800' },
+  { project: 'User Dashboard', dot: 'bg-emerald-500', status: 'Paid', team: 'UX Team', budget: '$7,200' },
+  { project: 'Security Audit', dot: 'bg-red-500', status: 'Failed', team: 'Security Team', budget: '$2,100' }
 ]
 </script>
 
 <template>
-  <div class="w-full max-w-md">
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Method</TableHead>
-          <TableHead class="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow v-for="invoice in invoices" :key="invoice.invoice">
-          <TableCell class="font-medium">{{ invoice.invoice }}</TableCell>
-          <TableCell>{{ invoice.status }}</TableCell>
-          <TableCell>{{ invoice.method }}</TableCell>
-          <TableCell class="text-right">{{ invoice.amount }}</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  </div>
+  <Table class="w-full max-w-2xl">
+    <TableCaption>A list of current projects.</TableCaption>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Project</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead>Team</TableHead>
+        <TableHead class="text-right">Budget</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow v-for="row in projects" :key="row.project">
+        <TableCell class="font-medium">{{ row.project }}</TableCell>
+        <TableCell>
+          <Badge variant="outline">
+            <span aria-hidden="true" :class="['size-1.5 rounded-full', row.dot]" />
+            {{ row.status }}
+          </Badge>
+        </TableCell>
+        <TableCell>{{ row.team }}</TableCell>
+        <TableCell class="text-right">{{ row.budget }}</TableCell>
+      </TableRow>
+    </TableBody>
+    <TableFooter>
+      <TableRow>
+        <TableCell :colspan="3">Total Budget</TableCell>
+        <TableCell class="text-right">$39,550</TableCell>
+      </TableRow>
+    </TableFooter>
+  </Table>
 </template>
diff --git a/src/components/tables/Table02.vue b/src/components/tables/Table02.vue
index 6586300..e7cf46d 100644
--- a/src/components/tables/Table02.vue
+++ b/src/components/tables/Table02.vue
@@ -1,50 +1,53 @@
 <script setup lang="ts">
+import Badge from '@/components/ui/Badge.vue'
 import {
   Table,
   TableBody,
-  TableCaption,
   TableCell,
   TableFooter,
   TableHead,
   TableHeader,
   TableRow
 } from '@/components/ui/Table'
-import Badge from '@/components/ui/Badge.vue'
 
-const invoices = [
-  { invoice: 'INV001', status: 'success', label: 'Paid', amount: '$250.00' },
-  { invoice: 'INV002', status: 'warning', label: 'Pending', amount: '$150.00' },
-  { invoice: 'INV003', status: 'error', label: 'Unpaid', amount: '$350.00' },
-  { invoice: 'INV004', status: 'success', label: 'Paid', amount: '$450.00' }
-] as const
+const projects = [
+  { project: 'Website Redesign', dot: 'bg-emerald-500', status: 'Paid', team: 'Frontend Team', budget: '$12,500' },
+  { project: 'Mobile App', dot: 'bg-muted-foreground/64', status: 'Unpaid', team: 'Mobile Team', budget: '$8,750' },
+  { project: 'API Integration', dot: 'bg-amber-500', status: 'Pending', team: 'Backend Team', budget: '$5,200' },
+  { project: 'Database Migration', dot: 'bg-emerald-500', status: 'Paid', team: 'DevOps Team', budget: '$3,800' },
+  { project: 'User Dashboard', dot: 'bg-emerald-500', status: 'Paid', team: 'UX Team', budget: '$7,200' },
+  { project: 'Security Audit', dot: 'bg-red-500', status: 'Failed', team: 'Security Team', budget: '$2,100' }
+]
 </script>
 
 <template>
-  <div class="w-full max-w-lg">
-    <Table>
-      <TableCaption>A list of your recent invoices.</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Invoice</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead class="text-right">Amount</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow v-for="invoice in invoices" :key="invoice.invoice">
-          <TableCell class="font-medium">{{ invoice.invoice }}</TableCell>
-          <TableCell>
-            <Badge :variant="invoice.status">{{ invoice.label }}</Badge>
-          </TableCell>
-          <TableCell class="text-right">{{ invoice.amount }}</TableCell>
-        </TableRow>
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colspan="2">Total</TableCell>
-          <TableCell class="text-right">$1,200.00</TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  </div>
+  <Table variant="card" class="w-full max-w-2xl">
+    <TableHeader>
+      <TableRow>
+        <TableHead>Project</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead>Team</TableHead>
+        <TableHead class="text-right">Budget</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow v-for="row in projects" :key="row.project">
+        <TableCell class="font-medium">{{ row.project }}</TableCell>
+        <TableCell>
+          <Badge variant="outline">
+            <span aria-hidden="true" :class="['size-1.5 rounded-full', row.dot]" />
+            {{ row.status }}
+          </Badge>
+        </TableCell>
+        <TableCell>{{ row.team }}</TableCell>
+        <TableCell class="text-right">{{ row.budget }}</TableCell>
+      </TableRow>
+    </TableBody>
+    <TableFooter>
+      <TableRow>
+        <TableCell :colspan="3">Total Budget</TableCell>
+        <TableCell class="text-right">$39,550</TableCell>
+      </TableRow>
+    </TableFooter>
+  </Table>
 </template>
diff --git a/src/components/tables/Table03.vue b/src/components/tables/Table03.vue
new file mode 100644
index 0000000..2978711
--- /dev/null
+++ b/src/components/tables/Table03.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import Badge from '@/components/ui/Badge.vue'
+import { Frame } from '@/components/ui/Frame'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/Table'
+
+const projects = [
+  { project: 'Website Redesign', dot: 'bg-emerald-500', status: 'Paid', team: 'Frontend Team', budget: '$12,500' },
+  { project: 'Mobile App', dot: 'bg-muted-foreground/64', status: 'Unpaid', team: 'Mobile Team', budget: '$8,750' },
+  { project: 'API Integration', dot: 'bg-amber-500', status: 'Pending', team: 'Backend Team', budget: '$5,200' },
+  { project: 'Database Migration', dot: 'bg-emerald-500', status: 'Paid', team: 'DevOps Team', budget: '$3,800' },
+  { project: 'User Dashboard', dot: 'bg-emerald-500', status: 'Paid', team: 'UX Team', budget: '$7,200' },
+  { project: 'Security Audit', dot: 'bg-red-500', status: 'Failed', team: 'Security Team', budget: '$2,100' }
+]
+</script>
+
+<template>
+  <Frame class="w-full max-w-2xl">
+    <Table variant="card">
+      <TableHeader>
+        <TableRow>
+          <TableHead>Project</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Team</TableHead>
+          <TableHead class="text-right">Budget</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="row in projects" :key="row.project">
+          <TableCell class="font-medium">{{ row.project }}</TableCell>
+          <TableCell>
+            <Badge variant="outline">
+              <span aria-hidden="true" :class="['size-1.5 rounded-full', row.dot]" />
+              {{ row.status }}
+            </Badge>
+          </TableCell>
+          <TableCell>{{ row.team }}</TableCell>
+          <TableCell class="text-right">{{ row.budget }}</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell :colspan="3">Total Budget</TableCell>
+          <TableCell class="text-right">$39,550</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  </Frame>
+</template>
diff --git a/src/components/tables/Table04.vue b/src/components/tables/Table04.vue
new file mode 100644
index 0000000..8276eac
--- /dev/null
+++ b/src/components/tables/Table04.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import Badge from '@/components/ui/Badge.vue'
+import Checkbox from '@/components/ui/Checkbox.vue'
+import { Frame } from '@/components/ui/Frame'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/Table'
+import { computed, ref } from 'vue'
+
+type Status = 'Paid' | 'Unpaid' | 'Pending' | 'Failed'
+type Project = { id: string; project: string; status: Status; team: string; budget: number }
+
+const data: Project[] = [
+  { id: '1', project: 'Website Redesign', status: 'Paid', team: 'Frontend Team', budget: 12500 },
+  { id: '2', project: 'Mobile App', status: 'Unpaid', team: 'Mobile Team', budget: 8750 },
+  { id: '3', project: 'API Integration', status: 'Pending', team: 'Backend Team', budget: 5200 },
+  { id: '4', project: 'Database Migration', status: 'Paid', team: 'DevOps Team', budget: 3800 },
+  { id: '5', project: 'User Dashboard', status: 'Paid', team: 'UX Team', budget: 7200 },
+  { id: '6', project: 'Security Audit', status: 'Failed', team: 'Security Team', budget: 2100 }
+]
+
+const statusColor: Record<Status, string> = {
+  Paid: 'bg-emerald-500',
+  Unpaid: 'bg-muted-foreground/64',
+  Pending: 'bg-amber-500',
+  Failed: 'bg-red-500'
+}
+
+const currency = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  maximumFractionDigits: 0,
+  minimumFractionDigits: 0
+})
+
+const selected = ref<Set<string>>(new Set())
+
+const allSelected = computed(() => data.length > 0 && selected.value.size === data.length)
+const someSelected = computed(() => selected.value.size > 0 && !allSelected.value)
+
+const headerState = computed<boolean | 'indeterminate'>(() =>
+  allSelected.value ? true : someSelected.value ? 'indeterminate' : false
+)
+
+function toggleAll(value: boolean | 'indeterminate') {
+  selected.value = value === true ? new Set(data.map((d) => d.id)) : new Set()
+}
+
+function toggleRow(id: string, value: boolean | 'indeterminate') {
+  const next = new Set(selected.value)
+  if (value === true) next.add(id)
+  else next.delete(id)
+  selected.value = next
+}
+
+const formattedTotal = computed(() =>
+  currency.format(data.reduce((sum, p) => sum + p.budget, 0))
+)
+</script>
+
+<template>
+  <Frame class="w-full max-w-2xl">
+    <Table variant="card">
+      <TableHeader>
+        <TableRow>
+          <TableHead>
+            <Checkbox
+              aria-label="Select all"
+              :model-value="headerState"
+              @update:model-value="toggleAll"
+            />
+          </TableHead>
+          <TableHead>Project</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Team</TableHead>
+          <TableHead class="text-right">Budget</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow
+          v-for="row in data"
+          :key="row.id"
+          :data-state="selected.has(row.id) ? 'selected' : undefined"
+        >
+          <TableCell>
+            <Checkbox
+              aria-label="Select row"
+              :model-value="selected.has(row.id)"
+              @update:model-value="(v: boolean | 'indeterminate') => toggleRow(row.id, v)"
+            />
+          </TableCell>
+          <TableCell class="font-medium">{{ row.project }}</TableCell>
+          <TableCell>
+            <Badge variant="outline">
+              <span aria-hidden="true" :class="['size-1.5 rounded-full', statusColor[row.status]]" />
+              {{ row.status }}
+            </Badge>
+          </TableCell>
+          <TableCell>{{ row.team }}</TableCell>
+          <TableCell class="text-right">{{ currency.format(row.budget) }}</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell :colspan="4">Total Budget</TableCell>
+          <TableCell class="text-right">{{ formattedTotal }}</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  </Frame>
+</template>
diff --git a/src/components/tables/Table05.vue b/src/components/tables/Table05.vue
new file mode 100644
index 0000000..e23804f
--- /dev/null
+++ b/src/components/tables/Table05.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import Badge from '@/components/ui/Badge.vue'
+import Button from '@/components/ui/Button.vue'
+import Checkbox from '@/components/ui/Checkbox.vue'
+import { Frame, FrameFooter } from '@/components/ui/Frame'
+import SelectNative from '@/components/ui/SelectNative.vue'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/Table'
+import { cn } from '@/lib/utils'
+import {
+  ChevronDown as ChevronDownIcon,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  ChevronUp as ChevronUpIcon,
+  PlaneTakeoff as PlaneTakeoffIcon
+} from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+
+type Status = 'On Time' | 'Delayed' | 'Cancelled' | 'Boarding'
+type Flight = {
+  id: string
+  flightCode: string
+  destination: string
+  departureTime: string
+  arrivalTime: string
+  duration: string
+  terminal: string
+  gate: string
+  status: Status
+}
+
+const flights: Flight[] = [
+  { id: '1', flightCode: 'AA1234', destination: 'Los Angeles', departureTime: '08:30', arrivalTime: '11:45', duration: '5h 15m', terminal: '1', gate: 'A12', status: 'On Time' },
+  { id: '2', flightCode: 'DL5678', destination: 'San Francisco', departureTime: '14:20', arrivalTime: '17:10', duration: '4h 50m', terminal: '2', gate: 'B24', status: 'Delayed' },
+  { id: '3', flightCode: 'UA9012', destination: 'Miami', departureTime: '10:15', arrivalTime: '13:30', duration: '3h 15m', terminal: '1', gate: 'C8', status: 'On Time' },
+  { id: '4', flightCode: 'SW3456', destination: 'Seattle', departureTime: '16:45', arrivalTime: '18:20', duration: '2h 35m', terminal: '3', gate: 'D15', status: 'On Time' },
+  { id: '5', flightCode: 'JB7890', destination: 'Salt Lake City', departureTime: '09:00', arrivalTime: '12:30', duration: '5h 30m', terminal: '2', gate: 'E3', status: 'Cancelled' },
+  { id: '6', flightCode: 'AS2345', destination: 'Phoenix', departureTime: '11:30', arrivalTime: '14:15', duration: '2h 45m', terminal: '1', gate: 'F7', status: 'On Time' },
+  { id: '7', flightCode: 'HA6789', destination: 'Las Vegas', departureTime: '13:00', arrivalTime: '20:30', duration: '5h 30m', terminal: '2', gate: 'G12', status: 'Delayed' },
+  { id: '8', flightCode: 'FX0123', destination: 'Dallas', departureTime: '07:15', arrivalTime: '09:00', duration: '1h 45m', terminal: '1', gate: 'H5', status: 'Boarding' },
+  { id: '9', flightCode: 'WN4567', destination: 'Denver', departureTime: '06:00', arrivalTime: '08:30', duration: '2h 30m', terminal: '2', gate: 'I9', status: 'Boarding' },
+  { id: '10', flightCode: 'B61234', destination: 'Portland', departureTime: '12:45', arrivalTime: '15:20', duration: '2h 35m', terminal: '3', gate: 'J14', status: 'On Time' },
+  { id: '11', flightCode: 'NK8901', destination: 'Atlanta', departureTime: '15:30', arrivalTime: '18:45', duration: '3h 15m', terminal: '1', gate: 'K6', status: 'On Time' },
+  { id: '12', flightCode: 'F92345', destination: 'Chicago', departureTime: '09:45', arrivalTime: '12:00', duration: '2h 15m', terminal: '2', gate: 'L11', status: 'Delayed' },
+  { id: '13', flightCode: 'SY6789', destination: 'Boston', departureTime: '11:00', arrivalTime: '14:15', duration: '3h 15m', terminal: '1', gate: 'M3', status: 'On Time' },
+  { id: '14', flightCode: 'G40123', destination: 'New York', departureTime: '13:30', arrivalTime: '16:45', duration: '3h 15m', terminal: '3', gate: 'N8', status: 'On Time' },
+  { id: '15', flightCode: 'YX5678', destination: 'Washington', departureTime: '08:00', arrivalTime: '11:20', duration: '3h 20m', terminal: '2', gate: 'O12', status: 'Delayed' },
+  { id: '16', flightCode: '4U9012', destination: 'Orlando', departureTime: '10:30', arrivalTime: '13:50', duration: '3h 20m', terminal: '1', gate: 'P5', status: 'Delayed' },
+  { id: '17', flightCode: 'QF3456', destination: 'Houston', departureTime: '14:00', arrivalTime: '16:30', duration: '2h 30m', terminal: '3', gate: 'Q9', status: 'On Time' },
+  { id: '18', flightCode: 'LH7890', destination: 'Minneapolis', departureTime: '07:30', arrivalTime: '10:00', duration: '2h 30m', terminal: '2', gate: 'R7', status: 'Cancelled' },
+  { id: '19', flightCode: 'KL2345', destination: 'Detroit', departureTime: '16:15', arrivalTime: '19:30', duration: '3h 15m', terminal: '1', gate: 'S4', status: 'Cancelled' },
+  { id: '20', flightCode: 'AF6789', destination: 'Philadelphia', departureTime: '12:00', arrivalTime: '15:10', duration: '3h 10m', terminal: '3', gate: 'T16', status: 'On Time' },
+  { id: '21', flightCode: 'BA0123', destination: 'Charlotte', departureTime: '09:15', arrivalTime: '12:25', duration: '3h 10m', terminal: '2', gate: 'U10', status: 'On Time' },
+  { id: '22', flightCode: 'IB4567', destination: 'Nashville', departureTime: '15:45', arrivalTime: '18:00', duration: '2h 15m', terminal: '1', gate: 'V8', status: 'Delayed' },
+  { id: '23', flightCode: 'EK8901', destination: 'Austin', departureTime: '11:45', arrivalTime: '14:00', duration: '2h 15m', terminal: '3', gate: 'W13', status: 'Cancelled' },
+  { id: '24', flightCode: 'QR2345', destination: 'Tampa', departureTime: '13:15', arrivalTime: '16:40', duration: '3h 25m', terminal: '2', gate: 'X6', status: 'On Time' },
+  { id: '25', flightCode: 'TK6789', destination: 'Raleigh', departureTime: '08:45', arrivalTime: '11:30', duration: '2h 45m', terminal: '1', gate: 'Y11', status: 'On Time' },
+  { id: '26', flightCode: 'VS3456', destination: 'Indianapolis', departureTime: '10:00', arrivalTime: '12:45', duration: '2h 45m', terminal: '2', gate: 'Z4', status: 'On Time' },
+  { id: '27', flightCode: 'LX7890', destination: 'Kansas City', departureTime: '17:30', arrivalTime: '20:00', duration: '2h 30m', terminal: '3', gate: 'A8', status: 'Delayed' },
+  { id: '28', flightCode: 'OS1234', destination: 'Columbus', departureTime: '12:30', arrivalTime: '15:20', duration: '2h 50m', terminal: '1', gate: 'B19', status: 'On Time' },
+  { id: '29', flightCode: 'SN5678', destination: 'Milwaukee', departureTime: '18:00', arrivalTime: '20:15', duration: '2h 15m', terminal: '2', gate: 'C22', status: 'On Time' },
+  { id: '30', flightCode: 'TP9012', destination: 'Memphis', departureTime: '19:15', arrivalTime: '21:30', duration: '2h 15m', terminal: '3', gate: 'D6', status: 'On Time' }
+]
+
+const statusColor: Record<Status, string> = {
+  'On Time': 'bg-emerald-500',
+  Delayed: 'bg-amber-500',
+  Cancelled: 'bg-red-500',
+  Boarding: 'bg-blue-500'
+}
+
+type SortKey = 'flightCode' | 'departureTime' | 'destination' | 'status' | 'terminal' | 'gate'
+
+const columns: { key: SortKey; label: string; width: string }[] = [
+  { key: 'flightCode', label: 'Flight', width: '80px' },
+  { key: 'departureTime', label: 'Time', width: '220px' },
+  { key: 'destination', label: 'Destination', width: '180px' },
+  { key: 'status', label: 'Status', width: '120px' },
+  { key: 'terminal', label: 'Terminal', width: '90px' },
+  { key: 'gate', label: 'Gate', width: '80px' }
+]
+
+const sortKey = ref<SortKey>('departureTime')
+const sortDesc = ref(false)
+
+function toggleSort(key: SortKey) {
+  if (sortKey.value === key) sortDesc.value = !sortDesc.value
+  else {
+    sortKey.value = key
+    sortDesc.value = false
+  }
+}
+
+const sorted = computed(() => {
+  const rows = [...flights]
+  rows.sort((a, b) => {
+    const av = a[sortKey.value]
+    const bv = b[sortKey.value]
+    const cmp = av < bv ? -1 : av > bv ? 1 : 0
+    return sortDesc.value ? -cmp : cmp
+  })
+  return rows
+})
+
+const pageSize = 10
+const pageIndex = ref(0)
+const pageCount = computed(() => Math.ceil(flights.length / pageSize))
+const paged = computed(() =>
+  sorted.value.slice(pageIndex.value * pageSize, (pageIndex.value + 1) * pageSize)
+)
+
+const ranges = computed(() =>
+  Array.from({ length: pageCount.value }, (_, i) => {
+    const start = i * pageSize + 1
+    const end = Math.min((i + 1) * pageSize, flights.length)
+    return { value: i, label: `${start}-${end}` }
+  })
+)
+
+const selected = ref<Set<string>>(new Set())
+const pageIds = computed(() => paged.value.map((f) => f.id))
+const allSelected = computed(
+  () => pageIds.value.length > 0 && pageIds.value.every((id) => selected.value.has(id))
+)
+const someSelected = computed(
+  () => pageIds.value.some((id) => selected.value.has(id)) && !allSelected.value
+)
+const headerState = computed<boolean | 'indeterminate'>(() =>
+  allSelected.value ? true : someSelected.value ? 'indeterminate' : false
+)
+
+function toggleAll(value: boolean | 'indeterminate') {
+  const next = new Set(selected.value)
+  if (value === true) pageIds.value.forEach((id) => next.add(id))
+  else pageIds.value.forEach((id) => next.delete(id))
+  selected.value = next
+}
+
+function toggleRow(id: string, value: boolean | 'indeterminate') {
+  const next = new Set(selected.value)
+  if (value === true) next.add(id)
+  else next.delete(id)
+  selected.value = next
+}
+</script>
+
+<template>
+  <Frame class="w-full max-w-4xl">
+    <Table variant="card" class="table-fixed">
+      <TableHeader>
+        <TableRow class="hover:bg-transparent">
+          <TableHead style="width: 28px">
+            <Checkbox
+              aria-label="Select all rows"
+              :model-value="headerState"
+              @update:model-value="toggleAll"
+            />
+          </TableHead>
+          <TableHead v-for="col in columns" :key="col.key" :style="{ width: col.width }">
+            <div
+              class="flex h-full cursor-pointer select-none items-center justify-between gap-2"
+              role="button"
+              tabindex="0"
+              @click="toggleSort(col.key)"
+              @keydown.enter.prevent="toggleSort(col.key)"
+              @keydown.space.prevent="toggleSort(col.key)"
+            >
+              {{ col.label }}
+              <ChevronUpIcon
+                v-if="sortKey === col.key && !sortDesc"
+                aria-hidden="true"
+                class="size-4 shrink-0 opacity-80"
+              />
+              <ChevronDownIcon
+                v-else-if="sortKey === col.key && sortDesc"
+                aria-hidden="true"
+                class="size-4 shrink-0 opacity-80"
+              />
+            </div>
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow
+          v-for="flight in paged"
+          :key="flight.id"
+          :data-state="selected.has(flight.id) ? 'selected' : undefined"
+        >
+          <TableCell>
+            <Checkbox
+              aria-label="Select row"
+              :model-value="selected.has(flight.id)"
+              @update:model-value="(v: boolean | 'indeterminate') => toggleRow(flight.id, v)"
+            />
+          </TableCell>
+          <TableCell>
+            <div class="font-medium font-mono text-muted-foreground">{{ flight.flightCode }}</div>
+          </TableCell>
+          <TableCell>
+            <div
+              :class="
+                cn(
+                  'flex items-center gap-1.5 font-normal tabular-nums',
+                  flight.status === 'Cancelled' && 'text-muted-foreground line-through opacity-50'
+                )
+              "
+            >
+              <div :class="flight.status === 'Delayed' ? 'text-warning-foreground' : undefined">
+                {{ flight.departureTime }}
+              </div>
+              <div
+                aria-hidden="true"
+                class="flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed"
+              />
+              <div :class="cn('text-muted-foreground', flight.status === 'Cancelled' && 'line-through')">
+                {{ flight.duration }}
+              </div>
+              <div
+                aria-hidden="true"
+                class="flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed"
+              />
+              <div>{{ flight.arrivalTime }}</div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <div class="font-medium">{{ flight.destination }}</div>
+          </TableCell>
+          <TableCell>
+            <Badge variant="outline">
+              <span aria-hidden="true" :class="['size-1.5 rounded-full', statusColor[flight.status]]" />
+              {{ flight.status }}
+            </Badge>
+          </TableCell>
+          <TableCell>
+            <Badge variant="outline" class="font-normal tabular-nums">
+              <PlaneTakeoffIcon class="size-3.5" />
+              <span>{{ flight.terminal }}</span>
+            </Badge>
+          </TableCell>
+          <TableCell>{{ flight.gate }}</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+    <FrameFooter class="p-2">
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2 whitespace-nowrap">
+          <p class="text-muted-foreground text-sm">Viewing</p>
+          <SelectNative
+            :model-value="pageIndex"
+            aria-label="Select result range"
+            class="w-fit"
+            @update:model-value="(v: string | number) => (pageIndex = Number(v))"
+          >
+            <option v-for="range in ranges" :key="range.value" :value="range.value">
+              {{ range.label }}
+            </option>
+          </SelectNative>
+          <p class="text-muted-foreground text-sm">
+            of <strong class="font-medium text-foreground">{{ flights.length }}</strong> results
+          </p>
+        </div>
+
+        <nav aria-label="Pagination" class="flex justify-end gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Previous page"
+            :disabled="pageIndex === 0"
+            @click="pageIndex = Math.max(0, pageIndex - 1)"
+          >
+            <ChevronLeftIcon />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Next page"
+            :disabled="pageIndex >= pageCount - 1"
+            @click="pageIndex = Math.min(pageCount - 1, pageIndex + 1)"
+          >
+            <ChevronRightIcon />
+          </Button>
+        </nav>
+      </div>
+    </FrameFooter>
+  </Frame>
+</template>
diff --git a/src/components/ui/Frame/Frame.vue b/src/components/ui/Frame/Frame.vue
new file mode 100644
index 0000000..128d334
--- /dev/null
+++ b/src/components/ui/Frame/Frame.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="frame"
+    :class="
+      cn(
+        'relative flex flex-col rounded-2xl bg-muted/72 p-1',
+        '*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/Frame/FrameFooter.vue b/src/components/ui/Frame/FrameFooter.vue
new file mode 100644
index 0000000..59d9268
--- /dev/null
+++ b/src/components/ui/Frame/FrameFooter.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <footer data-slot="frame-panel-footer" :class="cn('px-5 py-4', props.class)">
+    <slot />
+  </footer>
+</template>
diff --git a/src/components/ui/Frame/FramePanel.vue b/src/components/ui/Frame/FramePanel.vue
new file mode 100644
index 0000000..de635e4
--- /dev/null
+++ b/src/components/ui/Frame/FramePanel.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="frame-panel"
+    :class="
+      cn(
+        'relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/Frame/index.ts b/src/components/ui/Frame/index.ts
new file mode 100644
index 0000000..336d038
--- /dev/null
+++ b/src/components/ui/Frame/index.ts
@@ -0,0 +1,3 @@
+export { default as Frame } from './Frame.vue'
+export { default as FramePanel } from './FramePanel.vue'
+export { default as FrameFooter } from './FrameFooter.vue'
diff --git a/src/components/ui/Table/Table.vue b/src/components/ui/Table/Table.vue
index f579d5f..55f59e9 100644
--- a/src/components/ui/Table/Table.vue
+++ b/src/components/ui/Table/Table.vue
@@ -2,12 +2,29 @@
 import { cn } from '@/lib/utils'
 import type { HTMLAttributes } from 'vue'
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+type TableVariant = 'default' | 'card'
+
+const props = withDefaults(
+  defineProps<{ class?: HTMLAttributes['class']; variant?: TableVariant }>(),
+  { variant: 'default' }
+)
 </script>
 
 <template>
-  <div class="relative w-full overflow-x-auto">
-    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+  <div
+    class="relative w-full overflow-x-auto"
+    data-slot="table-container"
+    :data-variant="props.variant"
+  >
+    <table
+      data-slot="table"
+      :class="
+        cn(
+          'w-full caption-bottom in-data-[variant=card]:border-separate in-data-[variant=card]:border-spacing-0 text-sm',
+          props.class
+        )
+      "
+    >
       <slot />
     </table>
   </div>
diff --git a/src/components/ui/Table/TableBody.vue b/src/components/ui/Table/TableBody.vue
index 8c41111..f9542ea 100644
--- a/src/components/ui/Table/TableBody.vue
+++ b/src/components/ui/Table/TableBody.vue
@@ -6,7 +6,15 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+  <tbody
+    data-slot="table-body"
+    :class="
+      cn(
+        'relative in-data-[variant=card]:rounded-xl in-data-[variant=card]:shadow-xs/5 before:pointer-events-none before:absolute before:inset-px not-in-data-[variant=card]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[variant=card]:*:[tr]:border-0 in-data-[variant=card]:*:[tr]:*:[td]:border-b in-data-[variant=card]:*:[tr]:*:[td]:bg-card in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[variant=card]:*:[tr]:*:[td]:first:border-s in-data-[variant=card]:*:[tr]:first:*:[td]:border-t in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[variant=card]:*:[tr]:*:[td]:last:border-e in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[variant=card]:*:[tr]:hover:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-data-[variant=card]:*:[tr]:data-[state=selected]:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] dark:in-data-[variant=card]:*:[tr]:data-[state=selected]:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_4%)] dark:in-data-[variant=card]:*:[tr]:hover:*:[td]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_2%)]',
+        props.class
+      )
+    "
+  >
     <slot />
   </tbody>
 </template>
diff --git a/src/components/ui/Table/TableCaption.vue b/src/components/ui/Table/TableCaption.vue
index 84354a8..4d7c0d6 100644
--- a/src/components/ui/Table/TableCaption.vue
+++ b/src/components/ui/Table/TableCaption.vue
@@ -6,7 +6,10 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+  <caption
+    data-slot="table-caption"
+    :class="cn('in-data-[variant=card]:my-4 mt-4 text-muted-foreground text-sm', props.class)"
+  >
     <slot />
   </caption>
 </template>
diff --git a/src/components/ui/Table/TableCell.vue b/src/components/ui/Table/TableCell.vue
index 44a3177..b96edfc 100644
--- a/src/components/ui/Table/TableCell.vue
+++ b/src/components/ui/Table/TableCell.vue
@@ -7,7 +7,13 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 
 <template>
   <td
-    :class="cn('p-3 align-middle [&:has([role=checkbox])]:pe-0', props.class)"
+    data-slot="table-cell"
+    :class="
+      cn(
+        'whitespace-nowrap bg-clip-padding p-2.5 in-data-[slot=table-footer]:py-3.5 align-middle leading-none in-data-[variant=card]:first:ps-[calc(--spacing(2.5)-1px)] in-data-[variant=card]:last:pe-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:w-px last:has-[[role=checkbox]]:ps-0 first:has-[[role=checkbox]]:pe-0',
+        props.class
+      )
+    "
   >
     <slot />
   </td>
diff --git a/src/components/ui/Table/TableFooter.vue b/src/components/ui/Table/TableFooter.vue
index bacc122..4679fa5 100644
--- a/src/components/ui/Table/TableFooter.vue
+++ b/src/components/ui/Table/TableFooter.vue
@@ -7,7 +7,13 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 
 <template>
   <tfoot
-    :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)"
+    data-slot="table-footer"
+    :class="
+      cn(
+        'border-t in-data-[variant=card]:border-none bg-transparent not-in-data-[variant=card]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] font-medium dark:not-in-data-[variant=card]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] [&>tr]:last:border-b-0',
+        props.class
+      )
+    "
   >
     <slot />
   </tfoot>
diff --git a/src/components/ui/Table/TableHead.vue b/src/components/ui/Table/TableHead.vue
index e234ce5..ef5a99f 100644
--- a/src/components/ui/Table/TableHead.vue
+++ b/src/components/ui/Table/TableHead.vue
@@ -7,9 +7,10 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 
 <template>
   <th
+    data-slot="table-head"
     :class="
       cn(
-        'h-10 px-3 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0',
+        'h-10 whitespace-nowrap px-2.5 text-left align-middle font-medium text-muted-foreground leading-none has-[[role=checkbox]]:w-px last:has-[[role=checkbox]]:ps-0 first:has-[[role=checkbox]]:pe-0',
         props.class
       )
     "
diff --git a/src/components/ui/Table/TableHeader.vue b/src/components/ui/Table/TableHeader.vue
index 57b39d9..071f927 100644
--- a/src/components/ui/Table/TableHeader.vue
+++ b/src/components/ui/Table/TableHeader.vue
@@ -6,7 +6,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 </script>
 
 <template>
-  <thead :class="cn('[&_tr]:border-b', props.class)">
+  <thead data-slot="table-header" :class="cn('[&_tr]:border-b', props.class)">
     <slot />
   </thead>
 </template>
diff --git a/src/components/ui/Table/TableRow.vue b/src/components/ui/Table/TableRow.vue
index d7e196e..1fd3da9 100644
--- a/src/components/ui/Table/TableRow.vue
+++ b/src/components/ui/Table/TableRow.vue
@@ -7,9 +7,10 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
 
 <template>
   <tr
+    data-slot="table-row"
     :class="
       cn(
-        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        'relative border-b not-in-data-[variant=card]:hover:bg-[color-mix(in_srgb,var(--background),var(--color-black)_2%)] not-in-data-[variant=card]:data-[state=selected]:bg-[color-mix(in_srgb,var(--background),var(--color-black)_4%)] dark:not-in-data-[variant=card]:data-[state=selected]:bg-[color-mix(in_srgb,var(--background),var(--color-white)_4%)] dark:not-in-data-[variant=card]:hover:bg-[color-mix(in_srgb,var(--background),var(--color-white)_2%)]',
         props.class
       )
     "
diff --git a/src/views/Tables.vue b/src/views/Tables.vue
index 781cb5a..b405ac4 100644
--- a/src/views/Tables.vue
+++ b/src/views/Tables.vue
@@ -32,7 +32,7 @@ import DemoComponent from '@/demo/DemoComponent.vue'
 import PageHeader from '@/demo/PageHeader.vue'
 import { computed, ref } from 'vue'
 
-const tableFiles = ref(['Table01', 'Table02'])
+const tableFiles = ref(['Table01', 'Table02', 'Table03', 'Table04', 'Table05'])
 const tableDirectory = 'tables'
 
 const totalComponents = computed(() => tableFiles.value.length)