Configuración

Uso

1. Conectar el provider (una vez, en la raíz de la app)

El provider suministra el adaptador de router (sincronización con URL) y valores por defecto opcionales para toda la app (tema, densidad, 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 fija la densidad de fila inicial para todas las tablas bajo el provider (p. ej. hacer compacta la opción por defecto de la app). Un table.defaultDensity del config aún gana, y la elección persistida del usuario gana sobre ambos.

¿Sin framework? Usa useBrowserRouterAdapter() (History API), exportado desde la entrada principal. ¿React Router? useReactRouterAdapter() desde listkit/react-router. Omite router por completo y el estado permanece en estado local de React (sin sincronización con URL).

2. Renderizar una lista

<ListView> recibe una config más data (en memoria) o adapter (asíncrono).

import { ListView } from 'listkit'
;<ListView config={productsConfig} data={products} />

Organizar la configuración: archivo vs inline

Ambas son válidas — defineListConfig es solo un helper de identidad tipado.

Inline (ideal para listas pequeñas/únicas):

function ProductsPage() {
	const config = defineListConfig<Product>({
		id: 'products',
		title: 'Productos',
		search: { fields: ['name', 'sku'] },
		table: { columns: [{ key: 'name', header: 'Nombre' }] },
	})
	return <ListView config={config} data={products} />
}

Archivo de configuración separado (recomendado cuando crece — mantiene la página pequeña y la config testeable/reutilizable):

features/products/
├── config.tsx        # defineListConfig (columnas, filtros, acciones, tema)
├── ProductCard.tsx   # renderizador de tarjeta
└── types.ts          # tipo de fila

// features/products/config.tsx
export const productsConfig = defineListConfig<Product>({
	/* … */
})

// page.tsx
import { productsConfig } from '@/features/products/config'
;<ListView config={productsConfig} data={products} />