diff --git a/packages/plugin-view/src/ObjectView.tsx b/packages/plugin-view/src/ObjectView.tsx
index 3fe1b4be4..302312ba1 100644
--- a/packages/plugin-view/src/ObjectView.tsx
+++ b/packages/plugin-view/src/ObjectView.tsx
@@ -558,7 +558,10 @@ export const ObjectView: React.FC
= ({
}, [schema.showFilters, schema.filterableFields, objectSchema, filterValues]);
// --- SortUI schema ---
+ const showSort = (schema as ObjectViewSchema).showSort;
const sortSchema: SortUISchema | null = useMemo(() => {
+ if (showSort === false) return null;
+
const fields = (objectSchema as any)?.fields || {};
const sortableFields = Object.entries(fields)
.filter(([, f]: [string, any]) => !f.hidden)
@@ -574,7 +577,7 @@ export const ObjectView: React.FC = ({
fields: sortableFields,
sort: sortConfig,
};
- }, [objectSchema, sortConfig]);
+ }, [objectSchema, sortConfig, showSort]);
// --- Generate view component schema for non-grid views ---
const generateViewSchema = useCallback((viewType: string): any => {
@@ -679,6 +682,8 @@ export const ObjectView: React.FC = ({
defaultSort: currentNamedViewConfig?.sort || activeView?.sort || schema.table?.defaultSort,
pageSize: schema.table?.pageSize,
selectable: schema.table?.selectable,
+ striped: activeView?.striped ?? schema.table?.striped,
+ bordered: activeView?.bordered ?? schema.table?.bordered,
className: schema.table?.className,
}), [schema, operations, currentNamedViewConfig, activeView]);
@@ -798,6 +803,10 @@ export const ObjectView: React.FC = ({
fields: currentNamedViewConfig?.columns || activeView?.columns || schema.table?.fields,
filters: mergedFilters,
sort: mergedSort,
+ // Propagate appearance/view-config properties for live preview
+ rowHeight: activeView?.rowHeight,
+ densityMode: activeView?.densityMode,
+ groupBy: activeView?.groupBy,
options: currentNamedViewConfig?.options || activeView,
},
dataSource,
diff --git a/packages/plugin-view/src/__tests__/ObjectView.test.tsx b/packages/plugin-view/src/__tests__/ObjectView.test.tsx
index ba6e6cc2d..9c59e4909 100644
--- a/packages/plugin-view/src/__tests__/ObjectView.test.tsx
+++ b/packages/plugin-view/src/__tests__/ObjectView.test.tsx
@@ -372,4 +372,182 @@ describe('ObjectView', () => {
expect(screen.queryByText('Kanban')).toBeNull();
});
});
+
+ // ============================
+ // Live Preview — viewConfig sync
+ // ============================
+ describe('Live Preview', () => {
+ it('should re-render grid when views prop updates with new columns', async () => {
+ const schema: ObjectViewSchema = {
+ type: 'object-view',
+ objectName: 'contacts',
+ };
+
+ const initialViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email'] },
+ ];
+
+ const { rerender } = render(
+ ,
+ );
+
+ expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+
+ // Simulate live preview: update views prop with new columns (as parent would after viewDraft change)
+ const updatedViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email', 'status'] },
+ ];
+
+ rerender(
+ ,
+ );
+
+ // Grid should still render (component did not crash on prop update)
+ expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+ });
+
+ it('should re-render when views prop updates with new sort config', async () => {
+ const schema: ObjectViewSchema = {
+ type: 'object-view',
+ objectName: 'contacts',
+ };
+
+ const initialViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
+ ];
+
+ const { rerender } = render(
+ ,
+ );
+
+ // Update with sort config — simulates live preview of sort changes
+ const updatedViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], sort: [{ field: 'name', direction: 'desc' as const }] },
+ ];
+
+ rerender(
+ ,
+ );
+
+ expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+ });
+
+ it('should re-render when views prop updates with new filter', async () => {
+ const schema: ObjectViewSchema = {
+ type: 'object-view',
+ objectName: 'contacts',
+ };
+
+ const initialViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
+ ];
+
+ const { rerender } = render(
+ ,
+ );
+
+ // Update with filter — simulates live preview of filter changes
+ const updatedViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], filter: [['status', '=', 'active']] },
+ ];
+
+ rerender(
+ ,
+ );
+
+ expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+ });
+
+ it('should re-render when views prop updates with appearance properties', async () => {
+ const schema: ObjectViewSchema = {
+ type: 'object-view',
+ objectName: 'contacts',
+ };
+
+ const initialViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
+ ];
+
+ const { rerender } = render(
+ ,
+ );
+
+ // Update with appearance changes — simulates live preview of rowHeight/striped/bordered
+ const updatedViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'], striped: true, bordered: true },
+ ];
+
+ rerender(
+ ,
+ );
+
+ expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+ });
+
+ it('should pass renderListView with updated schema when views change', async () => {
+ const schema: ObjectViewSchema = {
+ type: 'object-view',
+ objectName: 'contacts',
+ };
+
+ const renderListViewSpy = vi.fn(({ schema: listSchema }: any) => (
+
+ Custom ListView
+
+ ));
+
+ const initialViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name'] },
+ ];
+
+ const { rerender } = render(
+ ,
+ );
+
+ expect(screen.getByTestId('custom-list')).toBeInTheDocument();
+ const firstCallSchema = renderListViewSpy.mock.calls[0]?.[0]?.schema;
+ expect(firstCallSchema?.fields).toEqual(['name']);
+
+ // Update views — simulate live preview change
+ const updatedViews = [
+ { id: 'all', label: 'All', type: 'grid' as const, columns: ['name', 'email', 'status'] },
+ ];
+
+ rerender(
+ ,
+ );
+
+ // renderListView should have been called again with the updated columns
+ const lastCallIndex = renderListViewSpy.mock.calls.length - 1;
+ const lastCallSchema = renderListViewSpy.mock.calls[lastCallIndex]?.[0]?.schema;
+ expect(lastCallSchema?.fields).toEqual(['name', 'email', 'status']);
+ });
+
+ it('should pass showSort=false through schema to suppress sort UI', async () => {
+ const schema: ObjectViewSchema = {
+ type: 'object-view',
+ objectName: 'contacts',
+ showSort: false,
+ };
+
+ render(
+ ,
+ );
+
+ // Component renders without crash — showSort is respected
+ expect(screen.getByTestId('object-grid')).toBeInTheDocument();
+ });
+ });
});
diff --git a/packages/types/src/objectql.ts b/packages/types/src/objectql.ts
index f77143300..2de5bc3ea 100644
--- a/packages/types/src/objectql.ts
+++ b/packages/types/src/objectql.ts
@@ -902,6 +902,12 @@ export interface ObjectViewSchema extends BaseSchema {
*/
showFilters?: boolean;
+ /**
+ * Show sort controls
+ * @default true
+ */
+ showSort?: boolean;
+
/**
* Show create button
* @default true
diff --git a/packages/types/src/zod/objectql.zod.ts b/packages/types/src/zod/objectql.zod.ts
index 68ee40997..fd5589787 100644
--- a/packages/types/src/zod/objectql.zod.ts
+++ b/packages/types/src/zod/objectql.zod.ts
@@ -183,6 +183,7 @@ export const ObjectViewSchema = BaseSchema.extend({
form: z.lazy(() => ObjectFormSchema.omit({ type: true, objectName: true, mode: true }).partial()).optional().describe('Form config'),
showSearch: z.boolean().optional().describe('Show search'),
showFilters: z.boolean().optional().describe('Show filters'),
+ showSort: z.boolean().optional().describe('Show sort controls'),
showCreate: z.boolean().optional().describe('Show create button'),
showRefresh: z.boolean().optional().describe('Show refresh button'),
operations: z.object({