ObjectUIObjectUI
ComponentsComplex

Table

Display data in tabular format

Examples

Basic Table

NameEmail
John Doejohn@example.com
Jane Smithjane@example.com
{
  "type": "table",
  "columns": [
    {
      "header": "Name",
      "accessorKey": "name"
    },
    {
      "header": "Email",
      "accessorKey": "email"
    }
  ],
  "data": [
    {
      "name": "John Doe",
      "email": "john@example.com"
    },
    {
      "name": "Jane Smith",
      "email": "jane@example.com"
    }
  ]
}

Schema

interface TableSchema {
  type: 'table';
  columns: Array<{ header: string; accessorKey: string }>;
  data: Record<string, any>[];
}

Header Bar

Application header with sidebar trigger and breadcrumb navigation

Data Table

Enterprise-grade data table with sorting, filtering, pagination, and row actions

On this page

ExamplesSchema