Skip to content

Fix table and form demo rendering in documentation pages #234

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hotlong merged 10 commits into from
Jan 27, 2026
Merged

Fix table and form demo rendering in documentation pages #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4665251
Initial plan
Copilot Jan 27, 2026
10e9242
Fix table and form demo loading issues - Updated table schema propert…
Copilot Jan 27, 2026
1e8ceaf
Initial plan
Copilot Jan 27, 2026
87dacb3
Fix TypeScript errors and sidebar prerendering issues
Copilot Jan 27, 2026
3853e1f
Fix AG Grid version mismatch and update lockfile
Copilot Jan 27, 2026
73a236e
Merge pull request #235 from objectstack-ai/copilot/fix-unused-props-…
hotlong Jan 27, 2026
3796bd3
Initial plan
Copilot Jan 27, 2026
7454abd
Fix: Make useSidebar hook gracefully handle missing provider during SSR
Copilot Jan 27, 2026
ebfd6a5
Refactor: Extract DEFAULT_SIDEBAR_STATE constant for better maintaina…
Copilot Jan 27, 2026
8b1dea8
Merge pull request #236 from objectstack-ai/copilot/fix-prerendering-…
hotlong Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion apps/site/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { RootProvider } from 'fumadocs-ui/provider/next';
import './global.css';
import '@object-ui/components/style.css';
import { Inter } from 'next/font/google';
import { ObjectUIProvider } from '@/app/components/ObjectUIProvider';

const inter = Inter({
subsets: ['latin'],
Expand All @@ -11,7 +12,9 @@ export default function Layout({ children }: LayoutProps<'/'>) {
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<body className="flex flex-col min-h-screen">
<RootProvider>{children}</RootProvider>
<RootProvider>
<ObjectUIProvider>{children}</ObjectUIProvider>
</RootProvider>
Comment on lines +15 to +17
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ObjectUIProvider currently logs registered component types via console.log on a setTimeout in useEffect. Wrapping the entire site in this provider will spam the console in production and the timeout has no cleanup. Consider removing the log/timeout or gating it behind process.env.NODE_ENV !== 'production' and clearing the timeout in the effect cleanup.

Copilot uses AI. Check for mistakes.
</body>
</html>
);
Expand Down
309 changes: 280 additions & 29 deletions content/docs/components/basic/sidebar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,75 @@ The Sidebar component provides a collapsible navigation sidebar for applications

<ComponentDemo
schema={{
type: 'sidebar',
items: [
{ label: 'Dashboard', icon: 'home', href: '/' },
{ label: 'Projects', icon: 'folder', href: '/projects' },
{ label: 'Team', icon: 'users', href: '/team' },
{ label: 'Settings', icon: 'settings', href: '/settings' }
type: 'sidebar-provider',
body: [
{
type: 'sidebar',
body: [
{
type: 'sidebar-content',
Comment on lines +14 to +20
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The examples were updated to the sidebar-provider + body-based schema, but the "## Schema" TypeScript snippet later on this page still documents the older items/groups/collapsible shape. Please update the schema section to match the current component schemas (or clearly mark the old shape as deprecated) to avoid confusing readers.

Copilot uses AI. Check for mistakes.
body: [
{
type: 'sidebar-group',
label: 'Menu',
body: [
{
type: 'sidebar-menu',
body: [
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Dashboard' }]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Projects' }]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Team' }]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Settings' }]
}
]
}
]
}
]
}
]
}
]
},
{
type: 'sidebar-inset',
body: [
{
type: 'div',
className: 'p-4',
body: [{ type: 'text', content: 'Main content area' }]
}
]
}
]
}}
title="Basic Sidebar"
Expand All @@ -26,20 +89,84 @@ The Sidebar component provides a collapsible navigation sidebar for applications

<ComponentDemo
schema={{
type: 'sidebar',
groups: [
type: 'sidebar-provider',
body: [
{
title: 'Main',
items: [
{ label: 'Dashboard', icon: 'home', href: '/' },
{ label: 'Analytics', icon: 'bar-chart', href: '/analytics' }
type: 'sidebar',
body: [
{
type: 'sidebar-content',
body: [
{
type: 'sidebar-group',
label: 'Main',
body: [
{
type: 'sidebar-menu',
body: [
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Dashboard' }]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Analytics' }]
}
]
}
]
}
]
},
{
type: 'sidebar-group',
label: 'Management',
body: [
{
type: 'sidebar-menu',
body: [
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Projects' }]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Team' }]
}
]
}
]
}
]
}
]
}
]
},
{
title: 'Management',
items: [
{ label: 'Projects', icon: 'folder', href: '/projects' },
{ label: 'Team', icon: 'users', href: '/team' }
type: 'sidebar-inset',
body: [
{
type: 'div',
className: 'p-4',
body: [{ type: 'text', content: 'Main content area' }]
}
]
}
]
Expand All @@ -51,13 +178,69 @@ The Sidebar component provides a collapsible navigation sidebar for applications

<ComponentDemo
schema={{
type: 'sidebar',
collapsible: true,
defaultCollapsed: false,
items: [
{ label: 'Home', icon: 'home', href: '/' },
{ label: 'Files', icon: 'folder', href: '/files' },
{ label: 'Settings', icon: 'settings', href: '/settings' }
type: 'sidebar-provider',
body: [
{
type: 'sidebar',
collapsible: 'icon',
body: [
{
type: 'sidebar-content',
body: [
{
type: 'sidebar-group',
body: [
{
type: 'sidebar-menu',
body: [
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Home' }]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Files' }]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Settings' }]
}
]
}
]
}
]
}
]
}
]
},
{
type: 'sidebar-inset',
body: [
{
type: 'div',
className: 'p-4',
body: [
{ type: 'sidebar-trigger' },
{ type: 'text', content: 'Main content area' }
]
}
]
}
]
}}
title="Collapsible Sidebar"
Expand Down Expand Up @@ -97,12 +280,80 @@ interface SidebarSchema {

<ComponentDemo
schema={{
type: 'sidebar',
items: [
{ label: 'Inbox', icon: 'inbox', href: '/inbox', badge: 12 },
{ label: 'Drafts', icon: 'file-text', href: '/drafts', badge: 3 },
{ label: 'Sent', icon: 'send', href: '/sent' },
{ label: 'Trash', icon: 'trash', href: '/trash' }
type: 'sidebar-provider',
body: [
{
type: 'sidebar',
body: [
{
type: 'sidebar-content',
body: [
{
type: 'sidebar-group',
body: [
{
type: 'sidebar-menu',
body: [
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [
{ type: 'text', content: 'Inbox' },
{ type: 'badge', content: '12', className: 'ml-auto' }
]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [
{ type: 'text', content: 'Drafts' },
{ type: 'badge', content: '3', className: 'ml-auto' }
]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Sent' }]
}
]
},
{
type: 'sidebar-menu-item',
body: [
{
type: 'sidebar-menu-button',
body: [{ type: 'text', content: 'Trash' }]
}
]
}
]
}
]
}
]
}
]
},
{
type: 'sidebar-inset',
body: [
{
type: 'div',
className: 'p-4',
body: [{ type: 'text', content: 'Main content area' }]
}
]
}
]
}}
title="Sidebar with Badges"
Expand Down
10 changes: 5 additions & 5 deletions content/docs/components/complex/table.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
type: "table",
columns: [
{
key: "name",
title: "Name"
header: "Name",
accessorKey: "name"
},
{
key: "email",
title: "Email"
header: "Email",
accessorKey: "email"
}
],
data: [
Expand All @@ -39,7 +39,7 @@ import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
```typescript
interface TableSchema {
type: 'table';
columns: Array<{ key: string; title: string }>;
columns: Array<{ header: string; accessorKey: string }>;
data: Record<string, any>[];
}
```
2 changes: 1 addition & 1 deletion packages/components/src/renderers/data-display/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
} from '../../ui/table';
import { cn } from '../../lib/utils';

export const SimpleTableRenderer = ({ schema, className, ..._props }: any) => {
export const SimpleTableRenderer = ({ schema, className }: any) => {
const data = useDataScope(schema.bind);
const columns = schema.props?.columns || [];

Comment on lines +22 to 25
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This renderer registers the table component but expects a different schema shape (schema.props.columns with key/label) than the documented/typed TableSchema (columns with header/accessorKey). Since there is also another table registration elsewhere, this can lead to whichever file loads last determining behavior. Consider renaming this registration (e.g., simple-table) or updating it to match TableSchema and ensuring only one table registration exists.

Copilot uses AI. Check for mistakes.
Expand Down
Loading
Loading