Data List

Data

Definition list with horizontal, vertical and grid layouts, striped and bordered variants.

Horizontal

Grid + bordered + striped

Instalação via CLI

$ npx kikitocn add data-list

Interno:

@/lib/utils

Exemplo de uso

Data ListExample.tsx

import { DataList } from "@/components/ui/cn/data-list/DataList";

export function DataListExample() {
  return (
    <DataList />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`items*`	`DataListItem[]`	—	Lista de pares: { label, value: ReactNode, span? }
`layout`	`'horizontal' \| 'vertical' \| 'grid'`	`'horizontal'`	Orientação dos pares label/valor
`columns`	`number`	`2`	Colunas no layout grid
`striped`	`boolean`	`false`	Alterna fundo nas linhas ímpares
`bordered`	`boolean`	`false`	Adiciona borda em cada item
`compact`	`boolean`	`false`	Reduz espaçamento interno

Carregando…