[StephenTangCook]

Part of ENG-6351
Support the Slack data_table block in slack-web-api-client, slack-blocks-to-jsx (and downstream)

Note

Dependencies bumped: slack-blocks-to-jsx ^1.2.0 (first release that renders data_table, themashcodee/slack-blocks-to-jsx#124) and @tightknitai/slack-block-kit-validator ^0.1.19 (accepts action_cell cells and up to 200 data rows, TightknitAI/slack-block-kit-validator#114). slack-web-api-client stays at 1.1.14: block-kitchen declares its own data_table types, so slack-edge/slack-web-api-client#110 isn't needed here.

Summary

Adds Slack's data_table block, the paginated, sortable sibling of table, to the builder: types, a palette preset, and an editor. It mirrors how #115 added container.

• Types: DataTableBlock, DataTableCell, DataTableRawNumberCell and DataTableActionCell, named to match Add support for the data_table block slack-edge/slack-web-api-client#110 and declared locally because slack-web-api-client 1.1.14 doesn't have them. They're added to the SupportedBlock / SupportedBlockType unions and exported. The raw text cell is now a named TableRawTextCell, shared with table, as upstream does.
• Palette: a "Data table" variant in the Table section, built from Slack's documented example (caption, header, raw_text and rich_text cells). It has no action_cell column, matching Slack's example. The palette-validates test covers the new preset.
• Editor (DataTableEditor):
  • Caption (required).
  • Rows per page: clamped to 1-100. Clearing it drops page_size, so Slack uses its default of 5.
  • Row header column: a select labeled by each column's header text. Picking the first column (Slack's default) drops row_header_column_index. Removing a column keeps the index on the same column, or resets it to the default when that column is the one removed.
  • Cell grid: add or remove rows and columns. Add row stops at 201 rows (header + 200) and add column at 20; removing rows stops at 2.
  • Header row: it has no remove button, so a data row holding rich text can never be promoted into the header. Header text cells have no number toggle.
  • Number cells: a # toggle turns a data cell between raw_text and raw_number. A number cell edits its value plus optional display text. Turning "1,200" into a number gives value: 1200 and keeps "1,200" as the display text. Text that isn't a number becomes the display text over a 0, so nothing typed is lost.
  • Preserved cells: rich_text cells are kept until typed over, like the table editor. action_cell cells show their button label read-only and are kept as-is (edit them via View JSON).
• Shared grid: the table editor's grid moves into CellGrid / CellTextInput (editors/cell-grid.tsx), and the data visualization editor's NumberInput into editors/number-input.tsx, so neither is duplicated. The table editor's behavior is unchanged. Its inputs gain Row N, column M accessible names, which they had none of before.
• Surfaces: no builder change needed. The validator already allows data_table on messages and App Home and rejects it in modals; test/surface-compatibility.test.ts now covers it.

Why

Slack added data_table for rich tables with pagination, sorting, numeric cells and button cells. ENG-6351 brings it to every layer of the stack. Here, that means users can drop one into a message or Home tab and edit it without hand-writing JSON.

Test plan

• pnpm typecheck
• pnpm lint
• pnpm test: 705 tests, unit and Storybook, all passing
• pnpm run build:clean, pnpm run demo:build, pnpm run build-storybook, and pnpm audit --audit-level=high (root and demo)
• slack-blocks-to-jsx bumped to ^1.2.0. Before the release, spot-checked in the demo against a local build of slack-blocks-to-jsx#124 (swapped in for screenshots only, then reverted). The preset renders, a raw_number column sorts numerically, page_size paginates, and action cells render as buttons.

New tests:

• test/data-table-editor.test.tsx:
  • Action cells across 200 data rows validate on message and home (validator 0.1.19).
  • Caption, plus rows per page (set, clamp, clear).
  • Row header column: labels, setting it, dropping the default, and realigning when columns are removed.
  • Row and column limits (200 data rows, 20 columns), and the locked header row.
  • Text-to-number and number-to-text conversion, and number value and display-text edits.
  • Rich text and button cells left untouched by other edits, and the read-only button cell.
  • A payload with number cells, page size and a row header column validates on message and home.
• test/table-editor.test.tsx: guards the grid refactor. Column add and remove keep column_settings aligned, alignment still sets, the first row is still removable, and the 100-row cap holds.
• Stories: DataTable, DataTableNumbersAndButtons, a SlackBlockPreview/DataTable preview whose play test pages and sorts the rendered table, and two editor play tests: toggling a cell to a number, and adding and filling a row. Both assert the result validates.

Screenshots

Captured; waiting to be uploaded.

• Builder preview of the palette preset (rendered with slack-blocks-to-jsx#124)
• Editor for the preset
• Number cells: preview with pagination, sorted by the numeric column, and their editor
• Button cells: read-only in the editor

Notes for reviewer

• Storybook's updateArgs merges arrays element by element, so a removed row, or a key dropped from a cell, would come back. The data table stories keep the block in local state instead.
• Not done here: creating action_cell cells from the editor (only kept and shown). That can follow once validator 0.1.19 ships. The 20,000-character table limit is left to the validator.
• Found while styling the # toggle, not changed here: the unlayered .bk-root * { border-color } reset in styles.src.css beats the layered border-* color utilities, so classes like border-transparent and border-primary have no effect anywhere in the package. The toggle uses background color only.

---

🤖 Generated with Claude Code

---

^{Need help on this PR? Tag @codesmith-bot with what you need.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	block-kitchen	0141743	Commit Preview URL Branch Preview URL	Oct 13 2026, 03:57 PM

[github-actions]

Cloudflare preview

✅ Deployed 0141743 · Branch preview · Commit preview · Build logs