merisia-table

<merisia-table>

Tableau de données accessible avec caption, tri par colonne (clic sur l'en-tête), et gestion de l'état vide.

Import

import '@merisia-inc/merisia-components/table';

Extension

Vous pouvez sous-classer ce composant pour ajouter ou redéfinir des propriétés, méthodes ou styles : 

import { customElement } from 'lit/decorators.js';
import { MerisiaTable } from '@merisia-inc/merisia-components';

@customElement('my-table')
export class MyTable extends MerisiaTable {
  // Ajoutez ou redéfinissez des propriétés, méthodes ou styles ici.
}

Démos

Avec tri de colonnes

Cliquez sur les en-têtes pour trier par ordre croissant (↑) ou décroissant (↓). 

<merisia-table id="table" caption="Mes trajets"></merisia-table>
<script>
  const table = document.getElementById('table');
  table.columns = [
    { key: 'name', label: 'Nom', sortable: true, sortType: 'string' },
    { key: 'mode', label: 'Mode', sortable: true, sortType: 'string' },
    { key: 'distance', label: 'Distance (km)', align: 'end', sortable: true, sortType: 'number' },
  ];
  table.rows = [
    { name: 'Domicile → Bureau', mode: 'Vélo', distance: 4.2 },
    { name: 'Bureau → Épicerie', mode: 'Marche', distance: 0.8 },
  ];
</script>

État vide

<merisia-table caption="Aucun trajet"
  empty-text="Vous n'avez enregistré aucun trajet."></merisia-table>

Propriétés

Propriété Attribut Type Défaut Description
MerisiaTable (propres)
caption caption string '' Titre du tableau (balise <caption> accessible)
columns – TableColumn[] [] Définition des colonnes : { key, label, align?, sortable?, sortType?, render? } (propriété JS uniquement)
rows – Record<string, unknown>[] [] Données des lignes, indexées par key de colonne (propriété JS uniquement)
emptyText empty-text string 'Aucune donnée à afficher.' Texte affiché quand la liste de lignes est vide (i18n)
sortAscendingText sort-ascending-text string 'Trié par {column}, ordre croissant.' Message annoncé (région live) après un tri croissant ; {column} est remplacé par le libellé de la colonne (i18n)
sortDescendingText sort-descending-text string 'Trié par {column}, ordre décroissant.' Message annoncé (région live) après un tri décroissant ; {column} est remplacé par le libellé de la colonne (i18n)
MerisiaElement (hérités)
id id string auto-généré Identifiant unique du composant
lang lang string 'fr' Langue pour les messages internes (i18n)
width width number – Largeur maximale en caractères : max-width: calc(N ch + 1.5rem)

Accessibilité

Ressources externes