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`

Author: lucasbordeau

.claude/settings.json

@@ -1,6 +1,7 @@
 **/**/.env
 .DS_Store
 /.idea
+.claude/settings.json
 **/**/node_modules/
 .cache
 

.gitignore

@@ -1,6 +1,7 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useHeadlessCommandContextApi } from '@/command-menu-item/engine-command/hooks/useHeadlessCommandContextApi';
 import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
+import { useSavePageLayoutWidgetsData } from '@/page-layout/hooks/useSavePageLayoutWidgetsData';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { isDefined } from 'twenty-shared/utils';
@@ -17,6 +18,8 @@ export const SaveDashboardSingleRecordCommand = () => {
 
   const { savePageLayout } = useSavePageLayout(pageLayoutId);
 
+  const { savePageLayoutWidgetsData } = useSavePageLayoutWidgetsData();
+
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);
 
@@ -26,6 +29,7 @@ export const SaveDashboardSingleRecordCommand = () => {
     const result = await savePageLayout();
 
     if (result.status === 'successful') {
+      await savePageLayoutWidgetsData(pageLayoutId);
       closeSidePanelMenu();
       setIsPageLayoutInEditMode(false);
     }

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -1,8 +1,8 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useHeadlessCommandContextApi } from '@/command-menu-item/engine-command/hooks/useHeadlessCommandContextApi';
 import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
-import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
 import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
+import { useSavePageLayoutWidgetsData } from '@/page-layout/hooks/useSavePageLayoutWidgetsData';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { isDefined } from 'twenty-shared/utils';
@@ -22,7 +22,7 @@ export const SaveRecordPageLayoutSingleRecordCommand = () => {
 
   const { savePageLayout } = useSavePageLayout(pageLayoutId);
 
-  const { saveFieldsWidgetGroups } = useSaveFieldsWidgetGroups();
+  const { savePageLayoutWidgetsData } = useSavePageLayoutWidgetsData();
 
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);
@@ -33,7 +33,7 @@ export const SaveRecordPageLayoutSingleRecordCommand = () => {
     const result = await savePageLayout();
 
     if (result.status === 'successful') {
-      await saveFieldsWidgetGroups(pageLayoutId);
+      await savePageLayoutWidgetsData(pageLayoutId);
 
       closeSidePanelMenu();
       setIsPageLayoutInEditMode(false);

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/SaveDashboardSingleRecordCommand.tsx

@@ -3,6 +3,7 @@ import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-re
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
+import { useSavePageLayoutWidgetsData } from '@/page-layout/hooks/useSavePageLayoutWidgetsData';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 
@@ -15,6 +16,8 @@ export const SaveDashboardSingleRecordCommand = () => {
 
   const { savePageLayout } = useSavePageLayout(pageLayoutId);
 
+  const { savePageLayoutWidgetsData } = useSavePageLayoutWidgetsData();
+
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);
 
@@ -24,6 +27,7 @@ export const SaveDashboardSingleRecordCommand = () => {
     const result = await savePageLayout();
 
     if (result.status === 'successful') {
+      await savePageLayoutWidgetsData(pageLayoutId);
       closeSidePanelMenu();
       setIsPageLayoutInEditMode(false);
     }

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/SaveRecordPageLayoutSingleRecordCommand.tsx

@@ -82,9 +82,13 @@ export const useConvertBackendItemToCommandMenuItemConfig = () => {
         return null;
       }
 
+      const isEditModeItem =
+        item.conditionalAvailabilityExpression?.includes('isPageInEditMode') ??
+        false;
+
       const isPinned =
         item.availabilityType !== CommandMenuItemAvailabilityType.FALLBACK &&
-        !contextStoreIsPageInEditMode &&
+        (!contextStoreIsPageInEditMode || isEditModeItem) &&
         item.isPinned;
 
       const Icon = getIcon(item.icon, COMMAND_MENU_DEFAULT_ICON);

packages/twenty-front/src/modules/command-menu-item/record/single-record/dashboard/components/SaveDashboardSingleRecordCommand.tsx

@@ -4,7 +4,7 @@ import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/sta
 import { navigationMenuItemsSelector } from '@/navigation-menu-item/common/states/navigationMenuItemsSelector';
 import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/common/utils/filterWorkspaceNavigationMenuItems';
 import { useSaveNavigationMenuItemsDraft } from '@/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft';
-import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
+import { useSavePageLayoutWidgetsData } from '@/page-layout/hooks/useSavePageLayoutWidgetsData';
 import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/useUpdatePageLayoutWithTabsAndWidgets';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -35,7 +35,7 @@ export const useSaveLayoutCustomization = () => {
   const { updatePageLayoutWithTabsAndWidgets } =
     useUpdatePageLayoutWithTabsAndWidgets();
   const { exitLayoutCustomizationMode } = useExitLayoutCustomizationMode();
-  const { saveFieldsWidgetGroups } = useSaveFieldsWidgetGroups();
+  const { savePageLayoutWidgetsData } = useSavePageLayoutWidgetsData();
 
   const featureFlags = useFeatureFlagsMap();
   const isRecordPageLayoutEditingEnabled =
@@ -143,7 +143,7 @@ export const useSaveLayoutCustomization = () => {
           }
         }
 
-        await saveFieldsWidgetGroups(pageLayoutId);
+        await savePageLayoutWidgetsData(pageLayoutId);
       }
 
       if (hasAnyFailure) {
@@ -165,7 +165,7 @@ export const useSaveLayoutCustomization = () => {
   }, [
     saveDraft,
     updatePageLayoutWithTabsAndWidgets,
-    saveFieldsWidgetGroups,
+    savePageLayoutWidgetsData,
     exitLayoutCustomizationMode,
     enqueueErrorSnackBar,
     isRecordPageLayoutEditingEnabled,

packages/twenty-front/src/modules/command-menu-item/server-items/hooks/useConvertBackendItemToCommandMenuItemConfig.tsx

@@ -0,0 +1,21 @@
+import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
+import { type ObjectPermissions } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+
+export const filterReadableActiveObjectMetadataItems = (
+  objectMetadataItems: EnrichedObjectMetadataItem[],
+  objectPermissionsByObjectMetadataId: Record<
+    string,
+    ObjectPermissions & { objectMetadataId: string }
+  >,
+): EnrichedObjectMetadataItem[] =>
+  objectMetadataItems.filter((objectMetadataItem) => {
+    const objectPermissions =
+      objectPermissionsByObjectMetadataId[objectMetadataItem.id];
+
+    return (
+      isDefined(objectPermissions) &&
+      objectPermissions.canReadObjectRecords &&
+      objectMetadataItem.isActive
+    );
+  });

packages/twenty-front/src/modules/layout-customization/hooks/useSaveLayoutCustomization.ts

@@ -65,9 +65,7 @@ export const mapObjectMetadataToGraphQLQuery = ({
       }
 
       if (!isDefined(fieldMetadata.morphRelations)) {
-        throw new Error(
-          `Field ${fieldMetadata.name} is missing, please refresh the page. If the problem persists, please contact support.`,
-        );
+        return [];
       }
 
       return fieldMetadata.morphRelations.map((morphRelation) => ({
@@ -100,9 +98,7 @@ export const mapObjectMetadataToGraphQLQuery = ({
     }
 
     if (!isDefined(fieldMetadata.morphRelations)) {
-      throw new Error(
-        `Field ${fieldMetadata.name} is missing, please refresh the page. If the problem persists, please contact support.`,
-      );
+      return [];
     }
 
     return fieldMetadata.morphRelations.map((morphRelation) => ({