Quelle est la meilleure façon d'afficher des données tabulaires hiérarchiques (relation parent / enfant) tout en permettant la pagination et la recherche?
J'ai rencontré un mur de briques en essayant de proposer une interface utilisateur tabulaire appropriée pour afficher les données hiérarchiques dans un tableau tout en incluant une interface de recherche et une pagination.
La structure de base du tableau pourrait ressembler à ceci: 
L'utilisateur a accès à une interface de pagination (coin inférieur droit) pour décomposer de grands ensembles de données ainsi qu'une fonction de recherche (en haut) pour rechercher les enregistrements.
L'un des problèmes auxquels je suis confronté est de savoir comment je dois gérer l'affichage des lignes enfants en ce qui concerne la pagination. Dois-je compter les lignes enfants ('ventilateurs de boîtier, calculs thermiques, etc ...') lors de l'affichage de X quantité d'enregistrements par page? Mon instinct me dit de ne pas compter les enfants car si l'utilisateur change de page, il perdra le contexte de l'enregistrement parent qu'il regarde. De plus, si je garde les lignes enfants cachées par défaut (sauf si l'utilisateur clique sur une icône "plus" à côté d'un parent), cela devrait garder la table plus compacte. Cependant, en ne comptant pas les enregistrements enfants dans le total, l'utilisateur ne sait pas combien d'enregistrements totaux ont été renvoyés dans la requête (c'est-à-dire que le bas du tableau dirait "Afficher 1 enregistrement" alors qu'en fait il y en a 20 supplémentaires). enregistrements enfants dans le tableau)
Un autre problème auquel je suis confronté est de savoir comment afficher les résultats de la recherche dans le tableau si un enfant correspond à la recherche et que le parent ne le fait pas. De plus, je veux savoir si je dois inclure tous les enfants d'un parent correspondant.
Par exemple, si l'utilisateur tape dans le mot "case" dans la zone de recherche, je pourrais retourner les résultats comme ceci: 
L'utilisateur voit toutes les correspondances pour la casse dans le contexte de la hiérarchie. Cependant, dans le cas où les enregistrements enfants sont masqués par défaut, il pourrait sembler que "Matériel informatique" correspondait à la recherche. En utilisant cette méthode, je devrais afficher toutes les lignes enfants par défaut, étirant ainsi la taille de la table.
Une autre option pourrait être d'éliminer complètement la hiérarchie. Cela résout à la fois le problème de pagination et le problème des résultats de recherche. Cependant, l'inconvénient est que l'utilisateur perd tout le contexte de la relation parent/enfant entre les enregistrements.
Enfin, je suis curieux de savoir si lors de l'exécution d'une recherche comme "Matériel informatique" qui renvoie une catégorie parent si je dois automatiquement inclure tous les enfants pour le match. Bien que techniquement les enregistrements enfants n'aient pas de chaîne correspondante dans leur titre, ils sont toujours liés à la correspondance car ils existent en tant qu'enfants du parent.
Tout aperçu, idée ou inspiration que vous pourriez avoir à ce sujet serait le plus apprécié. Les domaines dans lesquels j'ai cherché l'inspiration incluent le plug-in jQuery datatable et l'interface Apple OS X Finder.
Personnellement, Je pense que votre principal problème est d'utiliser une table , ce qui complique les choses et fournit un abordable qui entre en collision avec ce que vous voulez réaliser. Pensez-y: je vois votre liste de catégories et je vois qu'il y en a 10 par page. Génial. Maintenant, j'élargis votre catégorie ... et maintenant je vois des sous-catégories mais certaines des catégories que je voyais ont disparu ! C'est un problème ÉNORME.
Maintenant, disons que vous affichez alors simplement comme statique (donc pas de développement) et vous avez une catégorie avec 12 sous-catégories ... que ferez-vous? Vous affichez 10 résultats par page, donc, en supposant que la catégorie s'affiche en premier dans la page, vous aurez toujours 2 sous-catégories orphelines!
Et bien que ces problèmes soient des opportunités attendues en raison de l'utilisation de tables et que vous devez vraiment vous en occuper, si vous souhaitez toujours utiliser une table pour cela, vous ne devez compter que les catégories, puis développer une table interne pour les sous-catégories. , quelle que soit sa taille. Voir l'exemple ci-dessous:
ou tout simplement oublier les tableaux et créer des cartes ou des listes, voir une maquette rapide ci-dessous (j'ai également utilisé des tailles plus petites pour que vous puissiez voir comment cela fonctionne pour les mobiles):
État par défaut avec navigation
Résultats de la recherche
ou avoir un mélange des deux approches, comme dans Tables de conception de matériaux (faites défiler les menus en ligne et vérifiez également Tables dans les cartes )
bien, j'espère que ça aide!
Je pense qu'un moyen plus simple de considérer le problème est de considérer les lignes comme "dénormalisées" en incluant la catégorie dans le nom ou une autre colonne pour chaque "ligne enfant". Et lorsque l'utilisateur recherche quelque chose, incluez le nom et la catégorie dans la recherche. Donc, si la chaîne de recherche correspond à une catégorie, elle correspondra à tous les éléments appartenant à cette catégorie. C'est uniquement pour des raisons d'argument; ne pas être mis en œuvre de manière dénormalisée. Mais créez toutes vos règles sur la façon de compter, de faire correspondre, etc. en prétendant qu'il s'agit d'une liste dénormalisée.
Argument philosophique
En réalité, l'ensemble d'informations que nous recherchons est TOUTES les "lignes enfants"; c'est la viande de l'ensemble d'informations. Et en raison de nos capacités humaines limitées à gérer de grands ensembles d'informations, nous avons recours à leur classement en catégories. Nous pouvons même avoir plusieurs catégories pour chaque article, pas seulement une. Cependant, les catégories sont des informations "supplémentaires" que nous connaissons sur chaque article; quelque chose d'autre que nous savons d'eux. Nous pouvons choisir d'utiliser ces informations lors d'une recherche ou non. Mais la plupart du temps, nous voulons inclure tout ce que nous savons sur chaque élément lors d'une recherche.
Je rencontre ce problème assez souvent; où l'implémentation, l'outil ou la technologie obscurcit mon jugement sur le problème réel que nous essayons de résoudre. Mon outil mental pour résoudre ces problèmes est de penser comme s'il n'y avait pas d'ordinateur, pas d'implémentation, pas de schéma de base de données, etc; juste le problème brut. J'essaie aussi de penser à une solution comme s'il y avait de la magie; à quoi ressemblerait le résultat final si je pouvais obtenir tout ce que je voulais. Ensuite, je travaille en arrière à partir de cela dans une solution réalisable.
Vous avez raison de penser qu'une bonne option serait d'éliminer la relation parent/enfant globale du tableau de résultats. Les utilisateurs ne recherchent pas une catégorie, ils parcourent celle-ci; ce qui signifie qu'un utilisateur sélectionnerait le matériel informatique dans une sorte de liste de catégories, puis parcourrait ses enfants pour un raffinement supplémentaire. Amazon et PCPartpicker gèrent leur contenu de cette manière.
Le problème avec la table arborescente mélangée à la recherche en ce moment est qu'il y a logiquement plus que les 2 catégories que vous montrez dans l'exemple. I pourrait rechercher 'fan de cas', mais je pourrais aussi rechercher 'zalman'. En tant qu'utilisateur, cela n'aurait aucun sens de voir un résultat de "fan de cas" si j'effectuais une recherche plus spécifique. Une solution potentielle à cela serait d'afficher uniquement les non-catégories dans vos résultats (comme une liste de fans de cas Zalman). Ensuite, vous pouvez répertorier vos catégories - et même une certaine arborescence - séparément, permettant à l'utilisateur de cliquer dessus et d'affiner les résultats.
Le résultat final serait maintenant que lorsque je rechercherai "Zalman", je verrai tous les éléments liés à cette phrase. Je peux ensuite cliquer sur la catégorie "fan de cas" et limiter mes résultats à exactement ce que je cherchais.
Je ne pense pas qu'une grande liste soit la voie à suivre. Affichez toutes les catégories parentes sous la forme de grandes cases à toucher Permettez à l'utilisateur d'explorer. Il sera plus facile de trouver ce qu'ils recherchent de cette façon que d'avoir à parcourir une grande liste.
Pour la recherche, affichez toutes les entrées qui correspondent. Dans chaque entrée, vous pouvez afficher une hiérarchie cliquable de ses parents.