Table

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download table -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Table } from "@/components/ui/table";
import { TableCaption } from "@/components/ui/table";
import { TableHeader } from "@/components/ui/table";
import { TableRow } from "@/components/ui/table";
import { TableHead } from "@/components/ui/table";
import { TableBody } from "@/components/ui/table";
import { TableCell } from "@/components/ui/table";
import * as UI from "@/components/ui/table";

const Component = UI.Table;

const args = {
  "caption": "Recent payments",
  "amount": "$250.00",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Table
    ><TableCaption>{{ args.caption }}</TableCaption
    ><TableHeader
      ><TableRow
        ><TableHead>Invoice</TableHead><TableHead>Amount</TableHead></TableRow
      ></TableHeader
    ><TableBody
      ><TableRow
        ><TableCell>INV-001</TableCell
        ><TableCell>{{ args.amount }}</TableCell></TableRow
      ></TableBody
    ></Table
  >
</template>

Examples

Default

<script setup lang="ts">
import { Table } from "@/components/ui/table";
import { TableCaption } from "@/components/ui/table";
import { TableHeader } from "@/components/ui/table";
import { TableRow } from "@/components/ui/table";
import { TableHead } from "@/components/ui/table";
import { TableBody } from "@/components/ui/table";
import { TableCell } from "@/components/ui/table";
import * as UI from "@/components/ui/table";

const Component = UI.Table;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Table v-bind="args"
    ><TableCaption>A list of your recent invoices.</TableCaption
    ><TableHeader
      ><TableRow
        ><TableHead class="w-[100px]">Invoice</TableHead
        ><TableHead>Status</TableHead><TableHead>Method</TableHead
        ><TableHead class="text-right">Amount</TableHead></TableRow
      ></TableHeader
    ><TableBody
      ><TableRow
        ><TableCell class="font-medium">INV001</TableCell
        ><TableCell>Paid</TableCell><TableCell>Credit Card</TableCell
        ><TableCell class="text-right">$250.00</TableCell></TableRow
      ><TableRow
        ><TableCell class="font-medium">INV002</TableCell
        ><TableCell>Pending</TableCell><TableCell>PayPal</TableCell
        ><TableCell class="text-right">$150.00</TableCell></TableRow
      ></TableBody
    ></Table
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Table

TableBody

TableCaption

TableCell

TableEmpty

TableFooter

TableHead

TableHeader

TableRow

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.