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.

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)
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)`

Ressources externes

Import

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