For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
30
Sponsor

Table

PreviousNext

Data table with optional single or multi-select modes for chat interfaces.

John Doejohn@example.comActive
Jane Smithjane@example.comPending
Bob Johnsonbob@example.comActive

Installation

$ pnpm dlx shadcn@latest add @mcpcn/table

Usage

import {
  Table,
  TableContent,
  TableFooter,
  TableGrid,
  TableHeader,
} from "@/components/ui/table";
<Table>
  <TableContent>
    <TableHeader />
    <TableGrid />
    <TableFooter />
  </TableContent>
</Table>

Composition

Use the following composition to build an Table:

Table
├── TableActions
├── TableContent
├── TableFooter
├── TableGrid
└── TableHeader

Examples

Single Select

John Doejohn@example.comActive
Jane Smithjane@example.comPending
Bob Johnsonbob@example.comActive
"use client";

import {
  Table,
  TableContent,
  TableFooter,
  TableGrid,
  TableHeader,
} from "@/components/ui/table";

export function TableSingleSelectDemo() {
  return (
    <Table appearance={{ selectable: "single" }}>
      <TableContent>
        <TableHeader />
        <TableGrid />
        <TableFooter />
      </TableContent>
    </Table>
  );
}

Multi Select

John Doejohn@example.comActive
Jane Smithjane@example.comPending
Bob Johnsonbob@example.comActive
"use client";

import {
  Table,
  TableContent,
  TableFooter,
  TableGrid,
  TableHeader,
} from "@/components/ui/table";

export function TableMultiSelectDemo() {
  return (
    <Table appearance={{ selectable: "multi" }}>
      <TableContent>
        <TableHeader />
        <TableGrid />
        <TableFooter />
      </TableContent>
    </Table>
  );
}

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

Add Table to a component library and map it to the installed component.

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  Table,
  TableContent,
  TableFooter,
  TableGrid,
  TableHeader,
} from "@/components/ui/table";
 
const OpenUITable = defineComponent({
  name: "Table",
  description:
    "Data table with optional single or multi-select modes for chat interfaces.",
  props: z.object({}),
  component: () => (
    <Table>
      <TableContent>
        <TableHeader />
        <TableGrid />
        <TableFooter />
      </TableContent>
    </Table>
  ),
});
 
export const tableLibrary = createLibrary({
  root: "Table",
  components: [OpenUITable],
});

For richer generated compositions, define the child primitives separately and connect them with .ref fields. See Defining Components in the OpenUI documentation.

json-render Integration

Install the json-render React packages.

pnpm add @json-render/core @json-render/react zod

Add Table to a component catalog and map it to the installed component.

import { defineCatalog } from "@json-render/core";
import { defineRegistry } from "@json-render/react";
import { schema } from "@json-render/react/schema";
import { z } from "zod";
 
import {
  Table,
  TableContent,
  TableFooter,
  TableGrid,
  TableHeader,
} from "@/components/ui/table";
 
export const catalog = defineCatalog(schema, {
  components: {
    Table: {
      props: z.object({}),
      description:
        "Data table with optional single or multi-select modes for chat interfaces.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    Table: () => (
      <Table>
        <TableContent>
          <TableHeader />
          <TableGrid />
          <TableFooter />
        </TableContent>
      </Table>
    ),
  },
});

Use catalog.prompt() to constrain model output, then render the generated spec with the json-render React Renderer. See the json-render Quick Start for the provider and streaming setup.

API Reference

See the Base UI documentation for more information.