Skip to content

Table.mdx

Latest commit

 

History

History
73 lines (55 loc) · 1.79 KB

Table.mdx

File metadata and controls

73 lines (55 loc) · 1.79 KB
Raw
title Table
description Data table in a bot message, built from Row and Cell children with optional column alignment.

Overview

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

Import

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

Props

Table

Column definitions (`TableColumn[]`): a header label and an optional alignment per column. Use `align: "right"` for numeric columns. The `Row` elements.

Row

The row's `Cell` elements, in column order.

Cell

One cell's content.

Usage

<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.

Related

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