PLU-591: [show-multiple-rows-4]: add frontend table variable

[m0nggh]

TL;DR

Added table variable support to rich text editor with column selection and preview functionality for email body fields.

What changed?

• Created TableVariable TipTap extension and TableVariablePill component for rendering interactive table previews in rich text fields
• Added supportTableDisplay flag to enable table variable insertion in specific fields (currently email body in Postman)
• Implemented hex encoding/decoding utilities for storing column selection state in variable IDs
• Enhanced table variable metadata extraction to include column information, sample rows, and total row count
• Updated variable insertion logic to differentiate between table display mode and for-each mode
• Modified display text format from "Preview X row(s)" to "X row(s)" with proper pluralization
• Added context provider for rich text editor to manage table display capabilities

Screenshots

Screen.Recording.2026-04-10.at.9.20.27.PM.mov

How to test?

1. Create a workflow with a step that outputs table data (FormSG, M365 Excel, or Tiles)
2. Add a "Send transactional email" action from Postman
3. In the email body field, insert a table variable - it should render as an interactive preview with column selection
4. Test column selection via the "Edit" button in the table preview
5. Verify the same table variable in a for-each field still inserts as a simple text variable
6. Check that the table preview shows proper styling and sample data

Frontend changes to check after pointed out by Vedant:

1. Variable item should show X rows and a view button

Why make this change?

This enhancement improves the user experience when working with table data in email templates by providing visual previews and allowing users to select specific columns for display, making it easier to create well-formatted emails with tabular data.

[m0nggh]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• PLU-591: [show-multiple-rows-4]: add frontend table variable #1539 👈 (View in Graphite)
• PLU-591: [show-multiple-rows-3]: add preprocess to postman email #1538
• PLU-591: [show-multiple-rows-2]: modified step regex and add table variable marker #1537
• PLU-591: [show-multiple-rows-1]: add helper functions #1536
• develop-v2

---

How to use the Graphite Merge Queue

Add the label lfg to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[linear]

PLU-591 Render find multiple rows in a table in Postman action

[graphite-app]

Pluralization bug in fallback display value. When totalRowCount is 1, the fallback displays "1 rows" instead of "1 row", inconsistent with the backend pluralization logic.

const displayValue =
  tableVar?.displayedValue ??
  `${tableVar?.totalRowCount ?? 0} row${tableVar?.totalRowCount !== 1 ? 's' : ''}`

Suggested change

	const displayValue =
	tableVar?.displayedValue ?? `${tableVar?.totalRowCount ?? 0} rows`
	const displayValue =
	tableVar?.displayedValue ?? `${tableVar?.totalRowCount ?? 0} row${tableVar?.totalRowCount !== 1 ? 's' : ''}`

Spotted by Graphite



Is this helpful? React 👍 or 👎 to let us know.