Data List

• Exibir registros estruturados em uma lista vertical: apresentar itens como pedidos, notificações ou atividade recente, cada um com seus próprios atributos, sem necessidade de comparar entre colunas. Ex.: "Pedidos recentes", "Atividade da conta".
• Priorizar a leitura rápida por linha: organizar poucos atributos-chave por item (título, data, status) em um formato de leitura vertical, em contextos administrativos em que a ordem entre os itens é relevante. Ex.: número do pedido, cliente e status de pagamento em uma mesma linha.

• Comparar atributos entre muitos itens em colunas: quando cada linha precisa mostrar vários atributos comparáveis entre si, ser filtrada ou ordenada por coluna. Nesse caso, usar Data Table.
• Habilitar seleção ou interação por linha: quando cada linha precisa responder a um clique, mostrar um checkbox, um radio ou um toggle. O Data List não oferece essas props. Nesse caso, usar Interactive List.
• Exibir menos de 3 itens ou mais de 15 sem paginação: uma listagem muito curta não justifica o padrão completo, e uma muito longa sem scroll ou paginação adequada dificulta encontrar um item específico.

1. Row: unidade repetível da lista (DataList.Row); é renderizada com role listitem dentro de DataList (role list) e admite seu próprio topDivider.
2. Text: título e metadados do item (data, cliente, valor); cada row combina os que forem necessários, sem uma posição fixa entre eles.
3. Tag (opcional): status do item, como o pagamento ou o envio.
4. Link (opcional): acesso a mais detalhes ou a uma ação de expandir conteúdo dentro da mesma linha.

1. Thumbnail (opcional): imagem do item; útil quando ajuda a identificá-lo mais rápido do que somente o texto.

Com divisores: separa cada row com uma borda inferior em toda a lista (bottomDivider em DataList, true por padrão) e uma borda superior por row (topDivider em DataList.Row, também true por padrão). Recomendado para listagens em que é preciso marcar onde cada item termina. Ex.: pedidos, notificações.

Sem divisores: remove os separadores passando bottomDivider={false} para DataList e topDivider={false} para cada DataList.Row. Recomendado para listagens mais compactas, ou quando o espaçamento entre rows já é suficiente para diferenciá-las. Ex.: um resumo curto dentro de uma card.

Padding das linhas: controla o espaçamento interno de cada DataList.Row com padding (small, base — padrão — ou none); paddingBottom permite um espaçamento inferior diferente e, se não for definido, usa o valor de padding. Usar small ou none para listagens mais compactas. Ex.: uma listagem dentro de um painel lateral estreito pode usar small.

O Data List costuma viver dentro do body de Page, com um título ou uma contagem de itens acima. Por ser uma lista vertical de uma única coluna, é a alternativa ao Data Table em contêineres estreitos — uma barra lateral, um modal ou uma tela mobile — em que exibir colunas comparáveis obrigaria a cortar informação ou a usar scroll horizontal.

• Estrutura semântica de lista: o DataList é renderizado com role list e cada DataList.Row com role listitem, de modo que um leitor de tela anuncia a quantidade de itens e a posição de cada um sem precisar de atributos ARIA adicionais.
• A acessibilidade do conteúdo depende dos itens filhos: como cada row admite qualquer combinação de componentes (Text, Tag, Link, Icon…), os critérios de acessibilidade próprios desses componentes (contraste, foco visível, texto alternativo) continuam se aplicando dentro da linha; o Data List não adiciona nem remove nada por si só.
• Sem comportamento próprio de foco ou teclado: o Data List não gerencia seleção nem interação. Se uma linha precisar responder ao teclado ou ao foco — por exemplo, um botão, um checkbox ou um toggle por item —, usar Interactive List, que implementa esse comportamento.

Instale o componente via terminal.

Listagem de pedidos com número, data, cliente, total e tags de status de pagamento e envio.

As propriedades adicionais são repassadas ao elemento que renderiza o <DataList> (uma div com role list). Consulte a documentação para ver a lista de atributos aceitos pelo elemento <DataList>.

• Data Table — alternativa quando os itens compartilham atributos comparáveis para exibir em colunas.
• Interactive List — alternativa quando cada linha precisa responder a um clique, checkbox, radio ou toggle.
• Product Data List — alternativa quando cada item precisa de uma imagem destacada e organização em seções.
• Thumbnail — componente usado dentro de uma row quando o item precisa de uma imagem.

DataList