ContextQMD
Back to Copilotkit

Table

showcase/shell-docs/src/content/reference/bot/components/Table.mdx

1.60.11.7 KB
Original Source

Overview

Table renders tabular data. Columns are declared on the table; data flows in as Row children containing Cell children.

Import

tsx
import { Table, Row, Cell } from "@copilotkit/bot-ui";

Props

Table

<PropertyReference name="columns" type='{ header: string; align?: "left" | "center" | "right" }[]'> Column definitions (`TableColumn[]`): a header label and an optional alignment per column. Use `align: "right"` for numeric columns. </PropertyReference> <PropertyReference name="children" type="BotChildren"> The `Row` elements. </PropertyReference>

Row

<PropertyReference name="children" type="BotChildren"> The row's `Cell` elements, in column order. </PropertyReference>

Cell

<PropertyReference name="children" type="BotChildren"> One cell's content. </PropertyReference>

Usage

tsx
<Message>
  <Header>Incidents this week</Header>
  <Table
    columns={[
      { header: "Issue" },
      { header: "Severity" },
      { header: "Count", align: "right" },
    ]}
  >
    <Row>
      <Cell>CPK-1201</Cell>
      <Cell>SEV2</Cell>
      <Cell>14</Cell>
    </Row>
    <Row>
      <Cell>CPK-1188</Cell>
      <Cell>SEV3</Cell>
      <Cell>3</Cell>
    </Row>
  </Table>
</Message>

On Slack

Renders as a native table block — at most 20 columns, 100 data rows (the header row built from columns is separate), and 2000 characters per cell (SLACK_LIMITS.tableColumns / tableRows / cellText); overflow is clamped.

  • Fields — lightweight two-column label/value layout
  • renderBlockKit — Block Kit mapping and budgets