Fix table component SSR error by making useDataScope context-safe

- Modified useDataScope to handle missing SchemaRendererProvider gracefully
- Updated table renderer to support both inline data and data binding
- Added support for both accessorKey and key column properties
- Ensured compatibility with Next.js static generation

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

Author: Copilot

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

@@ -20,8 +20,10 @@ import {
 import { cn } from '../../lib/utils';
 
 export const SimpleTableRenderer = ({ schema, className }: any) => {
-  const data = useDataScope(schema.bind);
-  const columns = schema.props?.columns || [];
+  // Try to get data from binding first, then fall back to inline data
+  const boundData = useDataScope(schema.bind);
+  const data = boundData || schema.data || schema.props?.data || [];
+  const columns = schema.columns || schema.props?.columns || [];
 
   // If we have data but it's not an array, show error. 
   // If data is undefined, we might just be loading or empty.
@@ -36,8 +38,10 @@ export const SimpleTableRenderer = ({ schema, className }: any) => {
       <Table>
         <TableHeader>
           <TableRow>
-            {columns.map((col: any) => (
-              <TableHead key={col.key}>{col.label}</TableHead>
+            {columns.map((col: any, index: number) => (
+              <TableHead key={col.key || col.accessorKey || index}>
+                {col.label || col.header}
+              </TableHead>
             ))}
           </TableRow>
         </TableHeader>
@@ -51,11 +55,14 @@ export const SimpleTableRenderer = ({ schema, className }: any) => {
           ) : (
             displayData.map((row: any, i: number) => (
               <TableRow key={row.id || i}>
-                {columns.map((col: any) => (
-                  <TableCell key={col.key}>
-                    {row[col.key]}
-                  </TableCell>
-                ))}
+                {columns.map((col: any, index: number) => {
+                  const accessor = col.key || col.accessorKey;
+                  return (
+                    <TableCell key={col.key || col.accessorKey || index}>
+                      {row[accessor]}
+                    </TableCell>
+                  );
+                })}
               </TableRow>
             ))
           )}

packages/react/src/context/SchemaRendererContext.tsx

@@ -35,7 +35,8 @@ export const useSchemaContext = () => {
 };
 
 export const useDataScope = (path?: string) => {
-  const { dataSource } = useSchemaContext();
+  const context = useContext(SchemaRendererContext);
+  const dataSource = context?.dataSource;
   if (!path) return dataSource;
   // Simple path resolution for now. In real app might be more complex
   return path.split('.').reduce((acc, part) => acc && acc[part], dataSource);