Tarjetas

Tarjetas sin escribir una tarjeta

Una config con tabla también renderiza vista de tarjetas, construida con esas mismas columnas — pares etiqueta/valor apilados que respetan las columnas que el usuario eligió y el render de cada una. Es a lo que cambia el toggle de vista, y lo que un viewport menor a 1024px muestra automáticamente.

defineListConfig<Order>({
	id: 'orders',
	table: { columns },
	// card: undefined  → generada desde `columns` (el default)
	// card: item => …  → tu propio renderer, abajo
	// card: false      → solo tabla, sin toggle ni tarjetas en móvil
})

La tarjeta automática es un punto de partida, no un techo: pasa un card en cuanto una lista merezca una diseñada.

Tarjetas personalizadas con acciones y tema

El renderizador card recibe el item de la fila más un objeto ctx con acciones y el tema de color activo:

defineListConfig<Product>({
	/* … */
	actions: {
		onEdit: item => openEditModal(item),
		onDelete: item => confirmDelete(item),
	},
	card: (item, ctx) => (
		<div className='p-4'>
			<h3 className='font-semibold'>{item.name}</h3>
			<div className='mt-3 flex gap-2'>
				<button
					onClick={() => ctx.actions.onEdit?.(item)}
					className={cn(
						'rounded-md px-3 py-1 text-sm',
						ctx.colorTheme.primaryBg,
						ctx.colorTheme.primaryText
					)}
				>
					Editar
				</button>
			</div>
		</div>
	),
})

Tarjetas totalmente personalizadas (bareCard)

Por defecto cada card está envuelta en el <Card> de listkit (borde, padding, sombra). Pon bareCard: true para renderizar tu salida de card directamente — inserta tu propio componente de tarjeta sin doble chrome:

defineListConfig<Post>({
	bareCard: true,
	gridCols: 'md:grid-cols-2 lg:grid-cols-3',
	card: post => <MyPostCard {...post} />,
})

Cuando se configuran card y table, listkit muestra un toggle de vista y por defecto usa tabla en escritorio y tarjetas en pantallas angostas. Pon defaultView: 'cards' para abrir en tarjetas también en escritorio (la tabla sigue disponible en el toggle, y un cambio manual del usuario gana):

defineListConfig<Post>({
	defaultView: 'cards',
	card: post => <MyPostCard {...post} />,
	table: { columns },
})