Table

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@line/abc-def-react/table";

<script setup lang="ts">
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@line/abc-def-vue/table";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@line/abc-def-react/table";

export function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Token</TableHead>
          <TableHead>Layer</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>--primary</TableCell>
          <TableCell>Semantic</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

<script setup lang="ts">
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@line/abc-def-vue/table";
</script>

<template>
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Token</TableHead>
        <TableHead>Layer</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>--primary</TableCell>
        <TableCell>Semantic</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</template>

Component tokens

This component does not define a dedicated component token file. It inherits shared semantic tokens and utility classes.

Composition exports

Usage notes

• Use real table semantics for tabular data.
• Keep dense data scannable with clear column labels.
• Related component tokens use the `table` token group in `@line/abc-def-styles/css`.