fix: prevent data-table/pivot crash and chart blank rendering in provider:object dashboard widgets

- Fix data-table crash: add Array.isArray() guard for non-array data (e.g. provider config object)
- Fix DashboardRenderer: destructure data out of options before spreading for provider:object table/pivot widgets
- Fix ObjectChart: show visible loading/warning messages instead of silent blank rendering
- Fix DashboardGridLayout: add provider:object support for charts, tables, and pivot widgets
- Fix PivotTable: add Array.isArray() guard for non-array data
- Add regression tests for data-table and pivot crashes

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/components/src/renderers/complex/data-table.tsx

@@ -91,7 +91,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   const {
     caption,
     columns: rawColumns = [],
-    data = [],
+    data: rawData = [],
     pagination = true,
     pageSize: initialPageSize = 10,
     searchable = true,
@@ -109,6 +109,10 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     showAddRow = false,
   } = schema;
 
+  // Ensure data is always an array – provider config objects or null/undefined
+  // must not reach array operations like .filter() / .some()
+  const data = Array.isArray(rawData) ? rawData : [];
+
   // Normalize columns to support legacy keys (label/name) from existing JSONs
   const initialColumns = useMemo(() => {
     return rawColumns.map((col: any) => ({

packages/plugin-charts/src/ObjectChart.tsx

@@ -104,9 +104,11 @@ export const ObjectChart = (props: any) => {
   };
 
   if (loading && finalData.length === 0) {
-      // Return skeleton or loading state?
-      // ChartRenderer has suspense/skeleton handling but needs to be triggered.
-      // We pass empty data but it might render empty chart.
+      return <div className={"flex items-center justify-center text-muted-foreground text-sm p-4 " + (schema.className || '')}>Loading chart data…</div>;
+  }
+
+  if (!dataSource && schema.objectName && finalData.length === 0) {
+      return <div className={"flex items-center justify-center text-muted-foreground text-sm p-4 " + (schema.className || '')}>No data source available for "{schema.objectName}"</div>;
   }
 
   return <ChartRenderer {...props} schema={finalSchema} />;

packages/plugin-dashboard/src/DashboardGridLayout.tsx

@@ -30,6 +30,16 @@ const CHART_COLORS = [
   'hsl(var(--chart-5))',
 ];
 
+/** Returns true when the widget data config uses provider: 'object' (async data source). */
+function isObjectProvider(widgetData: unknown): widgetData is { provider: 'object'; object?: string; aggregate?: any } {
+  return (
+    widgetData != null &&
+    typeof widgetData === 'object' &&
+    !Array.isArray(widgetData) &&
+    (widgetData as any).provider === 'object'
+  );
+}
+
 export interface DashboardGridLayoutProps {
   schema: DashboardSchema;
   className?: string;
@@ -130,9 +140,25 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
     const options = (widget.options || {}) as Record<string, any>;
     if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut') {
       const widgetData = (widget as any).data || options.data;
-      const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
       const xAxisKey = options.xField || 'name';
       const yField = options.yField || 'value';
+
+      // provider: 'object' — delegate to ObjectChart for async data loading
+      if (isObjectProvider(widgetData)) {
+        const effectiveYField = widgetData.aggregate?.field || yField;
+        return {
+          type: 'object-chart',
+          chartType: widgetType,
+          objectName: widgetData.object || widget.object,
+          aggregate: widgetData.aggregate,
+          xAxisKey: xAxisKey,
+          series: [{ dataKey: effectiveYField }],
+          colors: CHART_COLORS,
+          className: "h-full"
+        };
+      }
+
+      const dataItems = Array.isArray(widgetData) ? widgetData : widgetData?.items || [];
 
       return {
         type: 'chart',
@@ -147,6 +173,22 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
 
     if (widgetType === 'table') {
       const widgetData = (widget as any).data || options.data;
+
+      // provider: 'object' — pass through object config for async data loading
+      if (isObjectProvider(widgetData)) {
+        const { data: _dropped, ...restOptions } = options;
+        return {
+          type: 'data-table',
+          ...restOptions,
+          objectName: widgetData.object || widget.object,
+          dataProvider: widgetData,
+          data: [],
+          searchable: false,
+          pagination: false,
+          className: "border-0"
+        };
+      }
+
       return {
         type: 'data-table',
         ...options,
@@ -157,6 +199,28 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
       };
     }
 
+    if (widgetType === 'pivot') {
+      const widgetData = (widget as any).data || options.data;
+
+      // provider: 'object' — pass through object config for async data loading
+      if (isObjectProvider(widgetData)) {
+        const { data: _dropped, ...restOptions } = options;
+        return {
+          type: 'pivot',
+          ...restOptions,
+          objectName: widgetData.object || widget.object,
+          dataProvider: widgetData,
+          data: [],
+        };
+      }
+
+      return {
+        type: 'pivot',
+        ...options,
+        data: Array.isArray(widgetData) ? widgetData : widgetData?.items || [],
+      };
+    }
+
     return {
       ...widget,
       ...options

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -164,11 +164,13 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
 
                 // provider: 'object' — pass through object config for async data loading
                 if (isObjectProvider(widgetData)) {
+                    const { data: _dropped, ...restOptions } = options;
                     return {
                         type: 'data-table',
-                        ...options,
+                        ...restOptions,
                         objectName: widgetData.object || widget.object,
                         dataProvider: widgetData,
+                        data: [],
                         searchable: false,
                         pagination: false,
                         className: "border-0"
@@ -190,11 +192,13 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
 
                 // provider: 'object' — pass through object config for async data loading
                 if (isObjectProvider(widgetData)) {
+                    const { data: _dropped, ...restOptions } = options;
                     return {
                         type: 'pivot',
-                        ...options,
+                        ...restOptions,
                         objectName: widgetData.object || widget.object,
                         dataProvider: widgetData,
+                        data: [],
                     };
                 }
 

packages/plugin-dashboard/src/PivotTable.tsx

@@ -95,13 +95,16 @@ export const PivotTable: React.FC<PivotTableProps> = ({ schema, className }) =>
     columnField,
     valueField,
     aggregation = 'sum',
-    data = [],
+    data: rawData = [],
     showRowTotals = false,
     showColumnTotals = false,
     format,
     columnColors,
   } = schema;
 
+  // Ensure data is always an array – provider config objects must not reach iteration
+  const data = Array.isArray(rawData) ? rawData : [];
+
   const { rowKeys, colKeys, matrix, rowTotals, colTotals, grandTotal } = useMemo(() => {
     // Collect unique row/column values preserving insertion order
     const rowSet = new Map<string, true>();

packages/plugin-dashboard/src/__tests__/DashboardRenderer.widgetData.test.tsx

@@ -659,4 +659,70 @@ describe('DashboardRenderer widget data extraction', () => {
     expect(chartSchema).toBeDefined();
     expect(chartSchema.data).toEqual([]);
   });
+
+  it('should not crash data-table when provider:object leaks data config via options spread', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'table',
+          title: 'Provider Object Table',
+          object: 'opportunity',
+          layout: { x: 0, y: 0, w: 4, h: 2 },
+          options: {
+            columns: [
+              { header: 'Name', accessorKey: 'name' },
+              { header: 'Amount', accessorKey: 'amount' },
+            ],
+            data: {
+              provider: 'object',
+              object: 'opportunity',
+            },
+          },
+        },
+      ],
+    } as any;
+
+    // Must render without throwing. Previously this crashed with
+    // "paginatedData.some is not a function" because the provider
+    // config object leaked through as data.
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    expect(container).toBeDefined();
+    // The component should not show a crash error
+    expect(container.textContent).not.toContain('is not a function');
+  });
+
+  it('should not crash pivot table when provider:object leaks data config via options spread', () => {
+    const schema = {
+      type: 'dashboard' as const,
+      name: 'test',
+      title: 'Test',
+      widgets: [
+        {
+          type: 'pivot',
+          title: 'Provider Object Pivot',
+          object: 'sales',
+          layout: { x: 0, y: 0, w: 4, h: 2 },
+          options: {
+            rowField: 'region',
+            columnField: 'quarter',
+            valueField: 'revenue',
+            data: {
+              provider: 'object',
+              object: 'sales',
+            },
+          },
+        },
+      ],
+    } as any;
+
+    // Must render without throwing. Previously this crashed with
+    // "data is not iterable" because the provider config object
+    // leaked through as data.
+    const { container } = render(<DashboardRenderer schema={schema} />);
+    expect(container).toBeDefined();
+    expect(container.textContent).not.toContain('is not iterable');
+  });
 });