Data Table Sortable

Renders a data table with client-side column sorting and optional pagination.

Surfaces

webgoogle-apps-script-webmcp-apps

Degraded on

Surface	Note
google-meet-stage	Sorting interaction requires JS not available in stage.
email	Renders as static table.

Live preview

Name	Value	Status
Example	42	Active
Another	17	Pending

Fields

Field	Type
headers	array of strings. Column headers.	required
rows	array of arrays. Table rows.	required
select_state	(wired dialect only) ValueStore id holding the array of selected row ids. Combine with a column whose key is _select to get a per-row checkbox; each row needs a real id field to be selectable.	required
select_count_state	(wired dialect only) companion ValueStore id holding the selected array's length — wire a NumericThreshold to it to show/hide a bulk action bar.	required
delete_action_id	(wired dialect only) action id to run for row deletion. A column whose key is _delete renders a per-row delete button that sets select_state to just that row's id and runs this action directly; the same action id can be targeted by an external Delete-N-selected button via the standard collect wiring, ids from select_state's value.	required

Example payload

{
  "type": "data_table_sortable",
  "headers": [
    "Name",
    "Value",
    "Status"
  ],
  "rows": [
    [
      "Example",
      "42",
      "Active"
    ],
    [
      "Another",
      "17",
      "Pending"
    ]
  ],
  "select_state": [],
  "select_count_state": [],
  "delete_action_id": "Delete action id"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:data_table_sortable",
  "displayName": "Data Table Sortable",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/data_table_sortable",
  "capabilities": [
    "web",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Renders a data table with client-side column sorting and optional pagination.",
  "representativeQueries": [
    "show a sortable data table with column headers",
    "renders a data table with client-side column sorting and optional pagination.",
    "render a data table sortable"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy

Full deploy guide →