Data List

1.3.3

Presenta listados de ítems estructurados en filas verticales escaneables, como pedidos o notificaciones, sin selección ni acciones en lote.

Ver en Figma

Cuándo usar

Mostrar registros estructurados en una lista vertical: presentar ítems como pedidos, notificaciones o actividad reciente, cada uno con sus propios atributos, sin necesidad de compararlos en columnas. Ej.: "Pedidos recientes", "Actividad de la cuenta".
Priorizar la lectura rápida por fila: organizar pocos atributos clave por ítem (título, fecha, estado) en un formato escaneable de arriba a abajo, en contextos administrativos donde el orden entre ítems es relevante. Ej.: número de pedido, cliente y estado de pago en una misma fila.

Cuándo no usar

Comparar atributos entre muchos ítems en columnas: cuando cada fila necesita mostrar varios atributos comparables entre sí, filtrarse u ordenarse por columna. En su lugar, usar Data Table.
Habilitar selección o interacción por fila: cuando cada fila necesita responder a un click, mostrar un checkbox, un radio o un toggle. Data List no ofrece esas props. En su lugar, usar Interactive List.
Mostrar menos de 3 ítems o más de 15 sin paginación: un listado muy corto no justifica el patrón completo, y uno muy largo sin scroll o paginación adecuada dificulta encontrar un ítem puntual.

Anatomía

#1042

22 mar

Dr. Johnnie Bins

$45.900

4 productos

Pago pendiente

Row con texto, tag de estado y link de detalle

Row: unidad repetible de la lista (DataList.Row); se renderiza con rol listitem dentro de DataList (rol list) y admite su propio topDivider.
Text: título y metadatos del ítem (fecha, cliente, monto); cada row combina los que necesite, sin una posición fija entre ellos.
Tag (opcional): estado del ítem, como el pago o el envío.
Link (opcional): acceso a más detalle o a una acción de expandir contenido dentro de la misma fila.

Zapatillas urbanas

24 en stock

Row con Thumbnail para identificar el ítem visualmente

Thumbnail (opcional): imagen del ítem; útil cuando ayuda a identificarlo más rápido que el texto solo.

Variantes

Con divisores

#1042

22 mar

Dr. Johnnie Bins

$45.900

#1041

21 mar

Earnest Berge

$18.500

Con divisores: separa cada row con un borde inferior en toda la lista (bottomDivider en DataList, true por default) y uno superior por row (topDivider en DataList.Row, también true por default). Conviene para listados donde hace falta remarcar dónde termina cada ítem. Ej.: pedidos, notificaciones.

Sin divisores

#1042

22 mar

Dr. Johnnie Bins

$45.900

#1041

21 mar

Earnest Berge

$18.500

Sin divisores: quita los separadores pasando bottomDivider={false} a DataList y topDivider={false} a cada DataList.Row. Conviene para listados más compactos, o cuando el espaciado entre rows ya alcanza para diferenciarlas. Ej.: un resumen corto dentro de una card.

Padding de filas

Padding small

Padding base (default)

Padding none

Padding de filas: controla el espaciado interno de cada DataList.Row con padding (small, base —default— o none); paddingBottom permite un espaciado inferior distinto, y si no se define usa el valor de padding. Usar small o none para listados más compactos. Ej.: un listado dentro de un panel lateral angosto puede usar small.

Aplicación

Data List vive habitualmente dentro del body de Page, con un título o un contador de ítems por encima. Al ser una lista vertical de una sola columna, es la alternativa a Data Table en contenedores angostos —una barra lateral, un modal o una pantalla mobile— donde mostrar columnas comparables obligaría a recortar información o a hacer scroll horizontal.

Pedidos recientes

3 pedidos

#1042

22 mar

Dr. Johnnie Bins

$45.900

Pago pendiente

#1041

21 mar

Earnest Berge

$18.500

Sin enviar

Qué hacer y qué no hacer

#1042

22 mar

Dr. Johnnie Bins

$45.900

Pago pendiente

Mostrar solo los atributos que ayudan a identificar o decidir sobre el ítem, sin saturar la fila.

#1042

22 mar

Dr. Johnnie Bins

$45.900

Depósito Norte · Envío express · Facturado

Pago pendiente

Sin enviar

Prioridad alta

No acumules múltiples tags, links y textos secundarios en la misma fila: dificulta encontrar el dato relevante.

#1041

21 mar

4 productos

Usar como máximo un Link de detalle por fila para abrir o expandir información adicional.

#1041

21 mar

4 productos

Ver historial

No repitas varios links o acciones de detalle en la misma fila: no queda claro cuál corresponde a qué dato.

Accesibilidad

Estructura semántica de lista: DataList se renderiza con rol list y cada DataList.Row con rol listitem, por lo que un lector de pantalla anuncia la cantidad de ítems y la posición de cada uno sin necesitar atributos ARIA adicionales.
La accesibilidad del contenido depende de sus hijos: como cada row admite cualquier combinación de componentes (Text, Tag, Link, Icon…), los criterios de accesibilidad propios de esos componentes (contraste, foco visible, texto alternativo) siguen aplicando dentro de la fila; Data List no agrega ni quita nada por sí mismo.
Sin comportamiento propio de foco ni de teclado: Data List no gestiona selección ni interacción. Si una fila necesita responder al teclado o al foco —por ejemplo, un botón, un checkbox o un toggle por ítem—, usar Interactive List, que sí implementa ese comportamiento.

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/data-list

Predeterminado

Sin divisores

Listado de pedidos con número, fecha, cliente, total y tags de estado de pago y envío.

import React from "react";
import { DataList } from "@nimbus-ds/patterns";
import { Text, Tag, Link, Box } from "@nimbus-ds/components";
import {
  ChevronDownIcon,
  CreditCardIcon,
  BoxUnpackedIcon,
} from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <DataList>
    {Array.from({ length: 3 }, (_, i) => (
      <DataList.Row key={i} gap="1">
        <Box display="flex" justifyContent="space-between">
          <Text fontWeight="medium" color="primary-interactive">
            #123456
          </Text>
          <Text>22 Mar</Text>
        </Box>
        <Box display="flex" justifyContent="space-between">
          <Text>Customer name</Text>
          <Text>R$ 3.500</Text>
        </Box>
        <Link textDecoration="none">
          10 products
          <ChevronDownIcon style={{ display: "inline-block", verticalAlign: "middle", marginLeft: "4px" }} />
        </Link>
        <Box display="flex" flexWrap="wrap" gap="2" pt="2">
          <Tag appearance="warning">
            <CreditCardIcon size={12} />
            <Text color="warning-textLow">Awaiting payment</Text>
          </Tag>
          <Tag appearance="primary">
            <BoxUnpackedIcon size={12} />
            <Text color="primary-textLow">Unfulfilled</Text>
          </Tag>
        </Box>
      </DataList.Row>
    ))}
  </DataList>
);

export default Example;

Props

Las propiedades adicionales se pasan al elemento que renderiza <DataList> (un div con rol list). Consultá la documentación para ver la lista de atributos aceptados por el elemento <DataList>.

Componentes relacionados

Data Table — alternativa cuando los ítems comparten atributos comparables para mostrar en columnas.
Interactive List — alternativa cuando cada fila necesita responder a un click, checkbox, radio o toggle.
Product Data List — alternativa cuando cada ítem necesita una imagen destacada y organización en secciones.
Thumbnail — componente usado dentro de una row cuando el ítem necesita una imagen.

DataList

Name	Type	Default	Description
children*	React.ReactNode		Content of the List component.
bottomDivider	boolean	'true'	Defines whether the List has a bottom border.

DataList.Row

Name	Type	Default	Description
padding	'base' 'none' 'small'	'base'	Optional padding for the row.
paddingBottom	'base' 'none' 'small'	'base'	Optional padding bottom for the row.
children*	React.ReactNode		Content of the row.
topDivider	boolean	'true'	Determines if the row has a top border.

Ayudanos a mejorar la documentación

¿Encontraste un problema o tenés una sugerencia? Contanos.

Compartí tu opinión