Files
twenty/packages/twenty-sdk
Lucas Bordeau 96f3ff0e90 Add record table widget to dashboards (#18747)
## Demo



https://github.com/user-attachments/assets/584de452-544a-41f8-ae9f-4be9e9d0cd9f


## Problem
- Dashboards only supported chart widgets — tabular record data had no
inline widget type
- `RecordTable` was tightly coupled to the record index: HTML IDs, CSS
variables, and hover portals were global strings with no per-instance
scoping, so multiple tables on the same page would collide
- `updateRecordTableCSSVariable`, `RECORD_TABLE_HTML_ID`, and cell
portal IDs were hardcoded — placing two tables caused hover portals and
CSS column widths to bleed across instances
- Grid drag-select captured record UUIDs as cell IDs, producing `NaN`
layout coordinates and a full-page freeze on second widget creation

## Fix
- `RECORD_TABLE` is now a valid widget type across the full stack —
server DTOs, DB enum migration, universal config mapping, GraphQL
codegen, shared types (`RecordTableConfigurationDto`, `WidgetType`,
`addRecordTableWidgetType` migration)
- A record table widget can be placed on a dashboard and boots from a
View ID with no record index dependency —
`StandaloneRecordTableProvider` + `StandaloneRecordTableViewLoadEffect`
(wraps existing `RecordTableWithWrappers` unchanged)
- Selecting a data source auto-creates a dedicated View with up to 6
initial fields; switching source or deleting the widget cleans up the
View — `useCreateViewForRecordTableWidget` +
`useDeleteViewForRecordTableWidget`
- The settings panel exposes source, field visibility/reorder, filter
conditions, sort rules, and editable widget title —
`SidePanelPageLayoutRecordTableSettings` + sub-pages, matching chart
widget pattern
- Filters, sorts, and aggregate operations update the table in real time
but only persist to the View on explicit dashboard save —
`useSaveRecordTableWidgetsViewDataOnDashboardSave` (diff + flush on
save)
- Headers are always non-interactive (no dropdown, no cursor pointer);
columns are resizable only in edit mode; cells are non-editable in both
modes — `isRecordTableColumnHeadersReadOnlyComponentState`,
`isRecordTableColumnResizableComponentState`,
`isRecordTableCellsNonEditableComponentState` (Jotai component states)
- Hover portals and CSS column widths no longer bleed between multiple
table widgets — `getRecordTableHtmlId(tableId)`,
`getRecordTableCellId(tableId, …)`,
`updateRecordTableCSSVariable(tableId, …)` scope all DOM IDs and CSS
variables per instance
- Clicking inside a widget's content area no longer opens the settings
panel — `WidgetCardContent` stops click propagation when editable,
limiting settings-open to the card header and chrome
- Second widget creation no longer freezes the page —
`PageLayoutGridLayout` drag-select filters by `cell-` prefix to exclude
record UUIDs from grid cell detection

## Follow-up fixes

**Widget save flow**
- Saving a dashboard silently dropped record table widget changes
(column visibility, order, filters, sorts, aggregates) because widget
data save was bundled inside the layout save and only ran when layout
structure changed
- Widget data now persists independently via
`useSavePageLayoutWidgetsData`, called in all save paths (dashboard
save, record page save, layout customization save); saves are also
skipped when nothing has changed

**Drag-and-drop / checkbox columns in widget**
- Record table widgets showed the drag handle column and checkbox
selection column even though row reordering and multi-select are
meaningless in a read-only widget
- Two new component states
(`isRecordTableDragColumnHiddenComponentState`,
`isRecordTableCheckboxColumnHiddenComponentState`) hide each column
independently; widget tables now display only data columns

**Sticky column layout**
- Sticky positioning of the first three columns used `:nth-of-type` CSS
selectors — when drag or checkbox columns were hidden, the selector
targeted the wrong column and the first data column didn't stick
- Sticky CSS now targets semantic class names
(`RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME`, etc.) so sticky
behavior is correct regardless of which columns are hidden

**Save/Cancel buttons during edit mode**
- Save and Cancel command-menu buttons were unpinned during dashboard
edit mode because the pin logic excluded all items while
`isPageInEditMode` was true
- Items whose availability expression contains `isPageInEditMode` are
now exempted from the unpin rule; Save/Cancel stay pinned during editing

**Title input auto-focus**
- Selecting "Record Table" as widget type auto-focused the title input,
interrupting the configuration flow
- `focusTitleInput` is now `false` when navigating to record table
settings

**Morph relation field error**
- A field with missing `morphRelations` metadata crashed the page with a
"refresh" error from `mapObjectMetadataToGraphQLQuery`
- Now returns an empty array and silently omits the field from the query
instead of crashing

**`updateRecordMutation` prop removal**
- `RecordTableWithWrappers` required callers to pass an
`updateRecordMutation` callback, duplicating `useUpdateOneRecord` at
every usage site
- The mutation is now owned inside `RecordTableContextProvider` via
`RecordTableUpdateContext`; the prop is gone

**Standalone → Widget module rename**
- `record-table-standalone` module renamed to `record-table-widget` —
`StandaloneRecordTable` → `RecordTableWidget`,
`StandaloneRecordTableViewLoadEffect` →
`RecordTableWidgetViewLoadEffect`, etc.

**RecordTableRow cell extraction**
- Row rendering logic (`RecordTableCellDragAndDrop`,
`RecordTableCellCheckbox`, `RecordTableFieldsCells`, hotkey/arrow-key
effects) was duplicated between `RecordTableRow` and
`RecordTableRowVirtualizedFullData`
- Extracted `RecordTableRowCells` (shared cell content) and
`RecordTableStaticTr` (non-draggable `<tr>` wrapper); when drag column
is hidden, rows render inside a static `<tr>` instead of the draggable
wrapper

**View load effect metadata tracking**
- `RecordTableWidgetViewLoadEffect` now tracks
`objectMetadataItem.updatedAt` alongside `viewId` to re-load states when
metadata changes (e.g. field additions), preventing stale column data

**Data source dropdown deduplication**
- Extracted `filterReadableActiveObjectMetadataItems` util, shared by
both chart and record table data source dropdowns — removes duplicated
permission-filtering logic

**RECORD_TABLE view identifier mapping (server)**
- Added `RECORD_TABLE` case to
`fromPageLayoutWidgetConfigurationToUniversalConfiguration` and
`fromUniversalConfigurationToFlatPageLayoutWidgetConfiguration` so
widget views are properly mapped during workspace import/export

**GraphQL error handler typing (server)**
- `formatError` parameter changed from `any` to `unknown`;
`workspaceQueryRunnerGraphqlApiExceptionHandler` broadened from
`QueryFailedErrorWithCode` to `Error | QueryFailedError` — removes
unsafe type casts

**Save hook signature**
- `useSaveRecordTableWidgetsViewDataOnDashboardSave` no longer takes
`pageLayoutId` in constructor; receives it as a callback parameter,
eliminating the need for `useAtomComponentStateCallbackState`

**Customize Dashboard hidden during edit mode**
- The "Customize Dashboard" command was still visible while already
editing — its `conditionalAvailabilityExpression` now includes `not
isPageInEditMode`

**Fields dropdown split**
- `RecordTableFieldsDropdownContent` (300+ lines) split into
`RecordTableFieldsDropdownVisibleFieldsContent` and
`RecordTableFieldsDropdownHiddenFieldsContent`

**Checkbox placeholder cleanup**
- Removed unnecessary `StyledRecordTableTdContainer` wrapper from
`RecordTableCellCheckboxPlaceholder`
2026-03-24 18:28:56 +01:00
..
2026-03-09 15:32:13 +00:00
2026-03-09 15:32:13 +00:00
2026-03-24 09:31:05 +00:00
2026-03-24 15:00:10 +00:00

Twenty logo

Twenty SDK

NPM version License Join the community on Discord

A CLI and SDK to develop, build, and publish applications that extend Twenty CRM.

  • Typed GraphQL clients: CoreApiClient (auto-generated per app for workspace data) and MetadataApiClient (pre-built with the SDK for workspace configuration & file uploads)
  • Builtin CLI for auth, dev mode (watch & sync), uninstall, and function management

Getting Started

The recommended way to start building a Twenty app is with create-twenty-app, which scaffolds a project with everything preconfigured:

npx create-twenty-app@latest my-app
cd my-app
yarn twenty dev

See the create-twenty-app README or the full documentation for details.

Prerequisites

  • Node.js 24+ (recommended) and Yarn 4
  • Docker (for the local Twenty dev server) or a remote Twenty workspace

Manual Installation

If you're adding twenty-sdk to an existing project instead of using create-twenty-app:

npm install twenty-sdk
# or
yarn add twenty-sdk

Usage

Usage: twenty [options] [command]

CLI for Twenty application development

Options:
  -V, --version       output the version number
  -r, --remote <name> Use a specific remote (overrides the default set by remote switch)
  -h, --help          display help for command

Commands:
  dev [appPath]       Watch and sync local application changes
  build [appPath]     Build, sync, and generate API client into .twenty/output/
  deploy [appPath]    Build and deploy to a Twenty server
  publish [appPath]   Build and publish to npm
  typecheck [appPath] Run TypeScript type checking on the application
  uninstall [appPath] Uninstall application from Twenty
  remote              Manage remote Twenty servers
  server              Manage a local Twenty server instance
  add [entityType]    Add a new entity to your application
  exec [appPath]      Execute a logic function with a JSON payload
  logs [appPath]      Watch application function logs
  help [command]      display help for command

In a project created with create-twenty-app (recommended), use yarn twenty <command> instead of calling twenty directly. For example: yarn twenty help, yarn twenty dev, etc.

Global Options

  • --remote <name> (or -r <name>): Use a specific remote configuration. Defaults to local. See Configuration for details.

Commands

Server

Manage a local Twenty dev server (all-in-one Docker image).

  • twenty server start — Start the local server (pulls image if needed). Automatically configures the local remote.
    • Options:
      • -p, --port <port>: HTTP port (default: 2020).
  • twenty server stop — Stop the local server.
  • twenty server logs — Stream server logs.
    • Options:
      • -n, --lines <lines>: Number of initial lines to show (default: 50).
  • twenty server status — Show server status (running/stopped/healthy).
  • twenty server reset — Delete all data and start fresh.

The server comes pre-seeded with a workspace and user (tim@apple.dev / tim@apple.dev).

Examples:

# Start the local server
twenty server start

# Check if it's ready
twenty server status

# Follow logs during first startup
twenty server logs

# Stop the server (data is preserved)
twenty server stop

# Wipe everything and start over
twenty server reset

Remote

Manage remote server connections and authentication.

  • twenty remote add [nameOrUrl] — Add a new remote or re-authenticate an existing one.

    • Options:
      • --token <token>: API key for non-interactive auth.
      • --url <url>: Server URL (alternative to positional arg).
      • --as <name>: Name for this remote (otherwise derived from URL hostname).
      • --local: Connect to local development server (http://localhost:2020) via OAuth.
      • --port <port>: Port for local server (use with --local).
    • Behavior: If nameOrUrl matches an existing remote name, re-authenticates it. Otherwise, creates a new remote and authenticates via OAuth (with API key fallback).
  • twenty remote remove <name> — Remove a remote and its credentials.

  • twenty remote list — List all configured remotes with their auth status and URLs.

  • twenty remote switch [name] — Set the default remote.

    • If omitted, shows an interactive selection.
  • twenty remote status — Print the current remote name, server URL, and auth status.

Examples:

# Add a remote interactively (recommended)
twenty remote add

# Provide values in flags (non-interactive, for CI)
twenty remote add https://api.twenty.com --token $TWENTY_API_KEY

# Add a local development remote
twenty remote add --local

# Name a remote explicitly
twenty remote add https://api.twenty.com --as production

# Re-authenticate an existing remote by name
twenty remote add production

# Check status
twenty remote status

# List all configured remotes
twenty remote list

# Switch default remote
twenty remote switch production

# Remove a remote
twenty remote remove production

App

Application development commands.

  • twenty dev [appPath] — Start development mode: watch and sync local application changes.

    • Behavior: Builds your application (functions and front components), computes the manifest, syncs everything to your remote, then watches the directory for changes and re-syncs automatically. Displays an interactive UI showing build and sync status in real time. Press Ctrl+C to stop.
  • twenty build [appPath] — Build the application, sync to the server, generate the typed API client, then rebuild with the real client.

    • Options:
      • --tarball: Also pack the output into a .tgz tarball.
  • twenty publish [appPath] — Build and publish the application to npm.

    • Behavior: Builds the application and runs npm publish on the output directory.
    • Options:
      • --tag <tag>: npm dist-tag (e.g. beta, next).
  • twenty deploy [appPath] — Build and deploy the application to a Twenty server.

    • Behavior: Builds the tarball, uploads it to the server, and installs the application.
    • Options:
      • --server <url>: Target Twenty server URL.
      • --token <token>: Auth token for the server.
  • twenty typecheck [appPath] — Run TypeScript type checking on the application (runs tsc --noEmit). Exits with code 1 if type errors are found.

  • twenty uninstall [appPath] — Uninstall the application from the current remote.

Entity

  • twenty add [entityType] — Add a new entity to your application.
    • Arguments:
      • entityType: one of object, field, function, front-component, role, view, navigation-menu-item, or skill. If omitted, an interactive prompt is shown.
    • Options:
      • --path <path>: The path where the entity file should be created (relative to the current directory).
    • Behavior:
      • object: prompts for singular/plural names and labels, then creates a *.object.ts definition file.
      • field: prompts for name, label, type, and target object, then creates a *.field.ts definition file.
      • function: prompts for a name and scaffolds a *.function.ts logic function file.
      • front-component: prompts for a name and scaffolds a *.front-component.tsx file.
      • role: prompts for a name and scaffolds a *.role.ts role definition file.
      • view: prompts for a name and target object, then creates a *.view.ts definition file.
      • navigation-menu-item: prompts for a name and scaffolds a *.navigation-menu-item.ts file.
      • skill: prompts for a name and scaffolds a *.skill.ts skill definition file.

Function

  • twenty logs [appPath] — Stream application function logs.

    • Options:
      • -u, --functionUniversalIdentifier <id>: Only show logs for a specific function universal ID.
      • -n, --functionName <name>: Only show logs for a specific function name.
  • twenty exec [appPath] — Execute a logic function with a JSON payload.

    • Options:
      • --preInstall: Execute the pre-install logic function defined in the application manifest (required if --postInstall, -n, and -u not provided).
      • --postInstall: Execute the post-install logic function defined in the application manifest (required if --preInstall, -n, and -u not provided).
      • -n, --functionName <name>: Name of the function to execute (required if --postInstall and -u not provided).
      • -u, --functionUniversalIdentifier <id>: Universal ID of the function to execute (required if --postInstall and -n not provided).
      • -p, --payload <payload>: JSON payload to send to the function (default: {}).

Examples:

# Start dev mode (watch, build, and sync)
twenty dev

# Start dev mode with a custom remote
twenty dev --remote my-custom-remote

# Type check the application
twenty typecheck

# Add a new entity interactively
twenty add

# Add a new function
twenty add function

# Add a new front component
twenty add front-component

# Add a new view
twenty add view

# Add a new navigation menu item
twenty add navigation-menu-item

# Add a new skill
twenty add skill

# Build the app (output in .twenty/output/)
twenty build

# Build and create a tarball
twenty build --tarball

# Publish to npm
twenty publish

# Publish with a dist-tag
twenty publish --tag beta

# Deploy directly to a Twenty server (builds, uploads, and installs)
twenty deploy --server https://app.twenty.com

# Uninstall the app from the remote
twenty uninstall

# Watch all function logs
twenty logs

# Watch logs for a specific function by name
twenty logs -n my-function

# Execute a function by name (with empty payload)
twenty exec -n my-function

# Execute a function with a JSON payload
twenty exec -n my-function -p '{"name": "test"}'

# Execute a function by universal identifier
twenty exec -u e56d363b-0bdc-4d8a-a393-6f0d1c75bdcf -p '{"key": "value"}'

# Execute the pre-install function
twenty exec --preInstall

# Execute the post-install function
twenty exec --postInstall

Configuration

The CLI stores configuration per user in a JSON file:

  • Location: ~/.twenty/config.json
  • Structure: Remotes keyed by name. The active remote is selected with --remote <name> or by the defaultRemote setting.

Example configuration file:

{
  "defaultRemote": "production",
  "remotes": {
    "local": {
      "apiUrl": "http://localhost:2020",
      "apiKey": "<your-api-key>"
    },
    "production": {
      "apiUrl": "https://api.twenty.com",
      "accessToken": "<oauth-token>",
      "refreshToken": "<refresh-token>",
      "oauthClientId": "<client-id>"
    }
  }
}

Notes:

  • If a remote is missing, apiUrl defaults to http://localhost:2020.
  • twenty remote add writes credentials for the active remote (OAuth tokens or API key).
  • twenty remote add --as my-remote saves under a custom name.
  • twenty remote switch sets the defaultRemote field, used when -r is not specified.
  • twenty remote list shows all configured remotes and their authentication status.

How to use a local Twenty instance

If you're already running a local Twenty instance, you can connect to it instead of using Docker. Pass the port your local server is listening on (default: 3000):

# During scaffolding
npx create-twenty-app@latest my-app --port 3000

# Or after scaffolding
twenty remote add --local --port 3000

Troubleshooting

  • Auth errors: run twenty remote add again (or add a new remote) and ensure the API key has the required permissions.
  • Typings out of date: restart twenty dev to refresh the client and types.
  • Not seeing changes in dev: make sure dev mode is running (twenty dev).

Contributing

Development Setup

To contribute to the twenty-sdk package, clone the repository and install dependencies:

git clone https://github.com/twentyhq/twenty.git
cd twenty
yarn install

Development Mode

Run the SDK build in watch mode to automatically rebuild on file changes:

npx nx run twenty-sdk:dev

This will watch for changes and rebuild the dist folder automatically.

Production Build

Build the SDK for production:

npx nx run twenty-sdk:build

Running the CLI Locally

After building, you can run the CLI directly:

npx nx run twenty-sdk:start -- <command>
# Example: npx nx run twenty-sdk:start -- remote status

Or run the built CLI directly:

node packages/twenty-sdk/dist/cli.cjs <command>

Resources