Skip to content
Block Kit for React
Esc
↑↓navigate↵open⌘Jpreview
On this page

Data table

A sortable, paginated grid of rows and columns, for datasets larger than the plain table block handles.

data_table renders a grid with a header row, per-column sorting, and pagination once a table has more than a handful of rows. It isn’t part of the public @slack/types package, so treat this page’s field list as the reference.

Your AppAPP
Open deals
Acme Expansion Deal
Acme Inc.
Negotiation
Weather Forecast Integration
Nimbus Corp.
Waiting on review
Retail Partner Portal
ShopCo Ltd.
Closed Won

Fields

PropType
typestring

Always `data_table`.

Typestring
caption?string

Shown above the table and used to label the expand control.

Typestring
rowsCell[][]

The grid, header row first. `rows[0]` is the header and `rows.length - 1` sets the column count; every subsequent row is a data row.

TypeCell[][]

Cell

Each cell is one of four shapes, picked by type:

PropType
raw_text?{ type: "raw_text", text: string }

Plain text, sorted alphabetically.

Type{ type: "raw_text", text: string }
raw_number?{ type: "raw_number", value: number, text: string }

A number with its own display text. Sorts numerically by `value`, displays `text`.

Type{ type: "raw_number", value: number, text: string }
url?{ type: "url", url: string, text?: string }

A link, opened in a new tab. `text` defaults to the raw URL.

Type{ type: "url", url: string, text?: string }
rich_text?RichTextBlock

A Slack rich text node: bold, italic, and other inline styles.

TypeRichTextBlock

Examples

Basic table

The preview above is fixtures/catalog/table/basic-data-table.json, a mix of raw_text and rich_text cells.

Numeric sorting

Your AppAPP
Acme Inc.
$42,000
Nimbus Corp.
$8,500
ShopCo Ltd.
$120,000

raw_number cells sort by their numeric value, not by the formatted text, so $8,500 sorts below $42,000 even though "$120,000" would sort first alphabetically.

Pagination

Add more than 5 data rows and page controls appear automatically:

{ "blocks": [ { "type": "data_table", "caption": "All accounts", "rows": [ [ { "type": "raw_text", "text": "Name" }, { "type": "raw_text", "text": "Owner" }, { "type": "raw_text", "text": "Status" } ], [ { "type": "raw_text", "text": "Acme Inc." }, { "type": "raw_text", "text": "Ada Lovelace" }, { "type": "raw_text", "text": "Active" } ], [ { "type": "raw_text", "text": "Nimbus Corp." }, { "type": "raw_text", "text": "Grace Hopper" }, { "type": "raw_text", "text": "Active" } ], [ { "type": "raw_text", "text": "ShopCo Ltd." }, { "type": "raw_text", "text": "Alan Turing" }, { "type": "raw_text", "text": "Active" } ], [ { "type": "raw_text", "text": "GreenTech" }, { "type": "raw_text", "text": "Ada Lovelace" }, { "type": "raw_text", "text": "Churned" } ], [ { "type": "raw_text", "text": "LogiFlow Inc." }, { "type": "raw_text", "text": "Grace Hopper" }, { "type": "raw_text", "text": "Active" } ], [ { "type": "raw_text", "text": "Northwind Traders" }, { "type": "raw_text", "text": "Alan Turing" }, { "type": "raw_text", "text": "Active" } ] ] } ] }

Was this page helpful?