Implement an InfiniteTableComponent

[remib18]

Implementer un composant permettant d'afficher un tableau qui charge ces éléments de manière infini.

Paramètres de construction du tableau

messages

Message affiché en bas du tableau dans les différents états du chargement.

interface Messages {
  onLoading: string;
  onAllLoaded: string;
  onError: string
}

### `columns`

```ts
type Columns = Column[];

interface Column {
  label: string;  // Label afficher dans le header tu tableau
  mapToKey: string;  // Permet d'identifier quelle clé de l'objet de donnés sera affiché dans la colonne
  showOnSmall?: boolean  // La colonne doit-elle être afficher sur des petits écrans
}

rowActions

Paramètre optionnel

type RowActions = RowAction[];

interface RowAction<T> {
  label: string;  // Le label de l'action dans le menu des actions
  onTriggered: (item: T) => void;  // La fonction exécutée lors ce que l'action est enclenchée
}

service

Un service à fournir devant exposé une fonction publique getPaginatedData suivant le type suivant:

type GetPaginatedDataShape<T> = async (
  offset: number,
  itemsPerPage?: number
): PaginatedDataResult<T>

interface PaginatedDataResult<T> {
  data: T;
  pagination: {
    currentPage: number;
    totalPages: number;
    totalItems: number;
    limit: number;
    hasNextPage: boolean;
    hasPrevPage: boolean;
  };
};

Détails

Exemple d'élément sur Figma : https://www.figma.com/design/Ri6ISI9XStRJ0jZVcQpoaH/WE4A-%E2%80%94-Design?node-id=382-1150&m=dev

Considérations:

• État de survol des lignes
• Attributs d'accessibilité pour le popup des action et son trigger
• Détection d'un élément html à la fin du tableau : s'il est visible et qu'il reste des éléments à charger, charger plus d'éléments
• Proposer un bouton "Réessayer" en cas d'erreur.

Emplacement: /shared/components/ui