9.7k

Table

PreviousNext

A responsive table component.

ComponentStatusOwner
ButtonReadyDesign system
CardReviewPlatform
DialogDraftDocs
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import {
  VTable,
  VTableBody,
  VTableCell,
  VTableHead,
  VTableHeader,
  VTableRow,
} from '@ui-kit/src/components/Base/VTable'
</script>

<template>
  <VTable class="w-full max-w-2xl">
    <VTableHeader>
      <VTableRow>
        <VTableHead>Component</VTableHead>
        <VTableHead>Status</VTableHead>
        <VTableHead>Owner</VTableHead>
      </VTableRow>
    </VTableHeader>
    <VTableBody>
      <VTableRow>
        <VTableCell>Button</VTableCell>
        <VTableCell>Ready</VTableCell>
        <VTableCell>Design system</VTableCell>
      </VTableRow>
      <VTableRow>
        <VTableCell>Card</VTableCell>
        <VTableCell>Review</VTableCell>
        <VTableCell>Platform</VTableCell>
      </VTableRow>
      <VTableRow>
        <VTableCell>Dialog</VTableCell>
        <VTableCell>Draft</VTableCell>
        <VTableCell>Docs</VTableCell>
      </VTableRow>
    </VTableBody>
  </VTable>
</template>

Installation

pnpm dlx shadcn-vue@latest add table

Usage

<script setup lang="ts">
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
</script>

<template>
  <Table>
    <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>
    </TableBody>
  </Table>
</template>
SwitchTabs