Configuration
Wire the provider once at the app root, render a list, and decide whether the config lives inline or in its own file.
Usage
1. Wire the provider (once, at the app root)
The provider supplies the router adapter (URL sync) and optional app-wide defaults (theme, density, labels).
'use client'
import { ListKitProvider } from 'listkit'
import { useNextRouterAdapter } from 'listkit/next'
export function Providers({ children }) {
const router = useNextRouterAdapter()
return (
<ListKitProvider router={router} theme='blue' defaultDensity='compact'>
{children}
</ListKitProvider>
)
}defaultDensity sets the initial row density for every table under the provider (e.g. make compact the app-wide default). A config table.defaultDensity still wins, and the user's persisted toggle choice wins over both.
No framework? Use useBrowserRouterAdapter() (History API), exported from the main entry. React Router? useReactRouterAdapter() from listkit/react-router. Omit router entirely and state stays in component-local React state (no URL sync).
2. Render a list
<ListView> takes a config plus either data (in-memory) or an adapter (async).
import { ListView } from 'listkit'
;<ListView config={productsConfig} data={products} />Organizing the config: file vs inline
Both are valid — defineListConfig is just a typed identity helper.
Inline (great for small/one-off lists):
function ProductsPage() {
const config = defineListConfig<Product>({
id: 'products',
title: 'Products',
search: { fields: ['name', 'sku'] },
table: { columns: [{ key: 'name', header: 'Name' }] },
})
return <ListView config={config} data={products} />
}Separate config file (recommended once it grows — keeps the page tiny and the config testable/reusable):
features/products/
├── config.tsx # defineListConfig (columns, filters, actions, theme)
├── ProductCard.tsx # card renderer
└── types.ts # row type// features/products/config.tsx
export const productsConfig = defineListConfig<Product>({
/* … */
})
// page.tsx
import { productsConfig } from '@/features/products/config'
;<ListView config={productsConfig} data={products} />