bpm.masterDetail
Vue maître/détail responsive : liste à gauche, panneau de détail à droite, avec recherche optionnelle. Sur mobile, le détail s'ouvre en plein cadre avec un bouton retour. Idéal pour parcourir une collection (clients, tickets, commandes) tout en gardant le détail de l'élément sélectionné sous les yeux.
Python
columns = [{"key": "name", "label": "Client"}, {"key": "city", "label": "Ville"}]
bpm.master_detail(items=clients, columns=columns, render_detail=render_client, on_select=on_select, searchable=True, empty_detail_message="Sélectionnez un client dans la liste.")| Prop | Type | Défaut | Requis | Description |
|---|---|---|---|---|
items | T[] | — | Oui | Données de la liste maître (objets indexés par idKey). |
columns | { key, label, render? }[] | — | Oui | Colonnes affichées dans la liste de gauche (la première est en gras) ; render personnalise le rendu d'une cellule. |
renderDetail | (item: T) => ReactElement | — | Oui | Rendu du panneau de détail pour l'élément sélectionné. |
onSelect | (item: T) => void | — | Oui | Callback à la sélection d'un élément de la liste. |
selectedId | string | — | Non | Id de l'élément sélectionné (mode contrôlé). |
idKey | string | "id" | Non | Clé d'identité des items. |
searchable | boolean | false | Non | Affiche une barre de recherche filtrant la liste sur le texte des colonnes. |
emptyDetailMessage | string | "Sélectionnez un élément dans la liste." | Non | Message affiché dans le panneau quand rien n'est sélectionné. |
splitRatio | number | 40 | Non | Largeur de la liste en pourcentage du conteneur (le détail occupe le reste). |
className | string | "" | Non | Classes CSS additionnelles sur le conteneur .bpm-master-detail. |
Exemples
columns = [{"key": "name", "label": "Client"}, {"key": "city", "label": "Ville"}]
bpm.master_detail(items=clients, columns=columns, render_detail=render_client, on_select=on_select)# Liste de tickets filtrable, liste plus étroite
bpm.master_detail(
items=tickets,
columns=[{"key": "ref", "label": "Ticket"}, {"key": "status", "label": "Statut"}],
render_detail=render_ticket,
on_select=on_select,
searchable=True,
split_ratio=30,
)# Clé d'identité personnalisée + message d'état vide
bpm.master_detail(items=commandes, columns=columns, render_detail=render_commande, on_select=on_select, id_key="ref", empty_detail_message="Choisissez une commande.")