DynamicList

Lista de datos completamente configurable que renderiza ítems desde un endpoint de API o un arreglo data local. Los ítems se componen mediante un sistema de slots: startSlots a la izquierda y endSlots a la derecha de cada fila. Cada slot puede renderizar texto, miniaturas, pills, montos, badges de estado, botones de acción o menús desplegables. Soporta paginación load-more y numerada, búsqueda y filtros. Un ref imperativo expone reloadList.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | data | any[] \| null | No | null | Datos locales. Cuando se proveen, no se hace llamada a la API. | | listPath | string | No | — | Ruta del endpoint para obtener los ítems. | | apiBaseUrl | string | No | urls.apiBase | URL base del cliente HTTP. | | useAuthToken | boolean | No | false | Usa el cliente autenticado cuando es true. | | startSlots | Slot[] | No | [] | Slots al inicio (izquierda) de cada fila. | | endSlots | Slot[] | No | [] | Slots al final (derecha) de cada fila. | | renderItem | (item, index) => ReactNode | No | — | Render completamente personalizado de cada ítem. | | isItemClickable | boolean | No | false | Hace cada fila clickeable. | | breakpoint | number | No | 800 | Ancho en píxeles para cambiar a modo móvil. | | noContentText | string | No | 'No content available' | Mensaje del estado vacío. | | noContentIcon | string | No | 'records' | Ícono del estado vacío. | | searchTerm | string | No | '' | Término de búsqueda enviado a la API. | | filters | any[] | No | [] | Filtros enviados a la API. | | pagination | { page: number } | No | { page: 1 } | Estado de paginación controlado externamente. | | paginationConfig | PaginationConfig | No | — | Modo y opciones de paginación. | | reloadTrigger | number | No | — | Incrementar este valor recarga la lista. | | onItemClick | (item, index) => void | No | — | Se ejecuta al hacer clic en una fila. | | onActionClick | (actionName, item, index?) => void | No | — | Se ejecuta al activar una acción de slot. | | onPaginationChange | (pagination) => void | No | — | Se ejecuta al cambiar de página. | | onLoaded | (result) => void | No | — | Se ejecuta tras cargar los datos. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor de la lista. | | itemStyle | React.CSSProperties | No | — | Estilos de cada fila de ítem. |

Forma de PaginationConfig

| Campo | Tipo | Requerido | Descripción | |-------|------|-----------|-------------| | mode | 'loadMore' \| 'numbered' \| 'none' | Sí | Estilo de paginación. | | itemsPerPage | number | Sí | Ítems por página. | | loadMoreText | string | No | Texto del botón "cargar más". |

API del ref (DynamicListRef)

| Método | Descripción | |--------|-------------| | reloadList() | Reinicia el estado y vuelve a buscar datos de la API. |

Uso

Lista remota con slots de acción

import DynamicList from '@/components/DynamicList/DynamicList';

const endSlots = [
  { type: 'text', name: 'status' },
  {
    type: 'action',
    name: 'edit',
    config: { variant: 'icon', actionName: 'edit', buttonIcon: 'edit' },
  },
];

export default function Example() {
  return (
    <DynamicList
      listPath="/v1/products"
      useAuthToken
      endSlots={endSlots}
      onActionClick={(action, item) => console.log(action, item)}
    />
  );
}

Datos locales con paginación numerada

import { useState } from 'react';
import DynamicList from '@/components/DynamicList/DynamicList';

const items = Array.from({ length: 50 }, (_, i) => ({ id: i + 1, name: `Ítem ${i + 1}` }));

export default function Example() {
  const [pagination, setPagination] = useState({ page: 1 });

  return (
    <DynamicList
      data={items}
      paginationConfig={{ mode: 'numbered', itemsPerPage: 10 }}
      pagination={pagination}
      onPaginationChange={(p) => setPagination(p)}
    />
  );
}