Demande informations sur l’usage des checkbox/selection de lignes dans le composant Table

[lefeuvrej]

Bonjour

Dans le cadre d'une projet pour le MEAE nous tentons d’utiliser les checkbox et la sélection de lignes comme indiqué dans l’exemple ci-joint.

(capture issue de https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/tableau)

Problème, nous ne parvenons pas à déterminer quelles sont les propriétés ouvertes du composants Table permettant de faire de telles manipulations, et particulièrement les propriétés permettant de définir un callback personnalisé au moment de la sélection/desélection.

Auriez-vous la liste de ces propriétés et des exemples de cas d’implémentation en React 18 avec l’import du composant Table puis l’usage de ces propriétés pour mener à l’usage attendu ?

Vous remerçiant par avance,

Jérôme Lefeuvre
CP Inetum pour le MEAE

[garronej]

Bonjour @lefeuvrej,

À mon avis, le composant Table du DSFR est adapté uniquement pour afficher des tableaux statiques, rien de plus.

L'équipe DSFR du SIG a commencé à travailler sur des propositions de designs pour des tableaux dynamiques, que vous pouvez consulter ici :
https://main--ds-gouv.netlify.app/example/component/table/

Cependant, comme vous pouvez le constater, il s'agit uniquement de maquettes. Les fonctionnalités telles que le tri des colonnes ne sont pas implémentées. Tout cela reste à la charge de l'utilisateur.
Je vous déconseille de suivre cette voie. Développer un tableau dynamique et performant est une tâche complexe qui pourrait vous prendre des semaines. C'est un problème technique éloigné de la logique métier.

Je recommande plutôt d'utiliser le composant Table de MUI :
https://mui.com/material-ui/react-table/?srsltid=AfmBOoqIVyV4tRmegeohjiPdS7MbR7HhZ8yIQfmrmIJiw6oFVZMnp6E7

Si vous avez besoin de fonctionnalités encore plus avancées, vous pouvez opter pour le composant DataGrid :
https://mui.com/x/?srsltid=AfmBOorSS3If48q4_gcf6cQNkV8rL_Kj9CrsTKRCogy3dE8BNZBslQrm

Grâce à l'intégration MUI proposée par react-dsfr, l'aspect visuel du tableau sera automatiquement adapté au DSFR, assurant une intégration harmonieuse à votre site :
https://react-dsfr.codegouv.studio/mui

[lefeuvrej]

Merci pour ce retour rapide