ページ分割と検索の両方を許可しながら、階層的な表形式のデータ（親/子関係）を表示するための最良の方法は何ですか？
テーブルに階層データを表示するための適切な表形式のユーザーインターフェイスを考えながら、同時に検索インターフェイスとページネーションを含めて、レンガの壁にぶつかりました。
テーブルの基本的な構造は次のようになります： 
ユーザーは、ページネーションインターフェイス（右下隅）にアクセスして大きなデータセットを分割したり、レコードを検索する検索機能（上部）にアクセスしたりできます。
私が直面している問題の1つは、ページ付けに関して、子行の表示をどのように処理するかです。ページごとにX個のレコードを表示するときに、子の行（「ケースファン、サーマルコンポイントなど」）を数える必要がありますか？ユーザーがページを切り替えると、ユーザーが見ている親レコードのコンテキストが失われるため、私の直感では子供を数えないように指示しています。さらに、デフォルトで子行を非表示にしておくと（ユーザーが親の横の「プラス」アイコンをクリックしない限り）、テーブルがよりコンパクトに保たれるはずです。ただし、合計の子レコードを数えない場合、ユーザーはクエリで返された合計レコードの数を知りません（つまり、実際に20の追加レコードがある場合、テーブルの下部には「Showing 1 Record」と表示されます。テーブル内の子レコード）
私が直面しているもう1つの問題は、子が検索に一致し、親が一致しない場合に検索結果をテーブルに表示する方法です。さらに、一致する親のすべての子を含める必要があるかどうかを知りたいです。
たとえば、ユーザーが検索ボックスに「ケース」という単語を入力すると、次のような結果が返されます。 
ユーザーは、階層のコンテキスト内で大文字小文字の一致をすべて表示します。ただし、子レコードがデフォルトで非表示になっている場合、「コンピュータハードウェア」が検索に一致したように見える可能性があります。この方法を使用すると、デフォルトですべての子行を表示する必要があるため、テーブルのサイズが拡大されます。
別のオプションは、階層を完全に削除することです。これにより、ページ分割の問題と検索結果の問題の両方が解決されます。ただし、これを行うことの欠点は、ユーザーがレコード間の親子関係のすべてのコンテキストを失うことです。
最後に、「コンピュータハードウェア」のような検索を実行して、一致するすべての子を自動的に含める必要がある場合に親カテゴリを返すかどうかについて知りたいです。技術的には、子レコードのタイトルに一致する文字列はありませんが、親の子として存在するため、一致に関連しています。
あなたがこの主題について持つかもしれない洞察、アイデア、またはインスピレーションは、最も高く評価されます。私がインスピレーションを求めて検索した領域には、jQueryデータテーブルプラグインとApple OS X Finderインターフェースが含まれます。
個人的に、私はあなたの主な問題はテーブルを使用することだと思いますこれは物事を複雑にし、アフォーダンスを提供しますそれはあなたが達成したいものと衝突します。これについて考えてみましょう。カテゴリリストが表示され、ページごとに10あります。すごい。ここで、カテゴリを展開します...そしてサブカテゴリが表示されますが、表示されていた一部のカテゴリが消えました！これは大きな問題です。
ここで、静的（sono expand）として表示し、12のサブカテゴリを持つカテゴリがあるとします。どうしますか？ページごとに10件の結果を表示しているため、カテゴリがページの最初に表示されていると仮定すると、2つの孤立したサブカテゴリが残ります。
これらの問題はテーブルの使用により予想されるアフォーダンスであり、実際にはこれに注意する必要がありますが、これに引き続きテーブルを使用する場合は、カテゴリのみをカウントし、内部テーブルをサブカテゴリに展開する必要がありますサイズに関係なく。以下の例をご覧ください。
または単にテーブルを忘れてカードまたはリストを作成します。以下の簡単なモックアップを参照してください（モバイルでどのように機能するかを確認できるように、私は小さいサイズも使用しました）。
ナビゲーション付きのデフォルトのステータス
検索結果
または Material Design Tables のように両方のアプローチを組み合わせてください（インラインメニューにスクロールし、さらに カード内のテーブル を確認してください）。
まあ、これが役に立てば幸い！
問題を見るためのより簡単な方法は、名前の一部または各「子行」の別の列としてカテゴリを含めることにより、行を「非正規化」と考えることです。そして、ユーザーが何かを検索する場合、名前とカテゴリーの両方を検索に含めます。したがって、検索文字列がカテゴリに一致すると、そのカテゴリに属するすべてのアイテムに一致します。これは議論のためだけのものです。非正規化された方法で実装されません。しかし、それが非正規化されたリストであると偽って、カウント方法、照合方法などに関するすべてのルールを作成してください。
哲学的議論
実際には、私たちが探している実際の情報セットはすべて「子行」です。それが情報セットの要です。また、大量の情報を処理する人間の能力が限られているため、それらをカテゴリに分類しています。 1つだけでなく、各アイテムに複数のカテゴリを設定することもできます。ただし、カテゴリは、各アイテムについて知っている「追加の」情報です。それらについて私たちが知っている他の何か。検索中にこの情報を使用するかどうかを選択する場合があります。しかし、ほとんどの場合、検索中に各項目について知っているすべてを含めたいと思います。
私はこの問題に頻繁に遭遇します。実装、ツール、またはテクノロジーが、私たちが解決しようとしている実際の問題についての私の判断を曇らせている場合。これらの問題を解決する私の心のツールは、コンピューター、実装、データベーススキーマなどがないかのように考えることです。ただの問題です。私はまた、魔法があるかのように解決策について考えようとします。私が望むものを手に入れることができたら、最終結果はどのように見えるでしょう。それから私はそれを逆にして実行可能な解決策に取り組みます。
結果表から全体の親子関係を排除するのが良い選択肢であるとあなたは正しいです。ユーザーはカテゴリを「検索」するのではなく、browseです。つまり、ユーザーはある種のカテゴリリストからコンピュータハードウェアを選択し、その子を閲覧してさらに絞り込みます。 AmazonとPCPartpickerの両方がこの方法でコンテンツを処理します。
現時点でツリー構造テーブルと検索が混在している場合の問題は、例で示している2つのカテゴリよりも論理的に多くのカテゴリがあることです。 I might「case fan」を検索しますが、「zalman」も検索する場合があります。より具体的な検索を実行した場合、ユーザーとして「ケースファン」の結果を表示することは意味がありません。これに対する潜在的な解決策は、カテゴリ以外の結果のみを表示することです（Zalmanケースファンのリストなど）。次に、カテゴリを（場合によってはツリー構造も）個別にリストし、ユーザーがそれらをクリックして結果を絞り込むことができます。
最終的に、「Zalman」を検索すると、そのフレーズに関連するすべてのアイテムが表示されます。次に、「ケースファン」カテゴリをクリックして、結果を自分が探していたものに正確に制限できます。
一つの大きなリストが進むべき道だとは思わない。すべての親カテゴリを大きなタップ可能なボックスとして表示します。ユーザーがドリルダウンできるようにします。その方法で探しているものを見つけるのは、大きなリストをスクロールするよりも簡単になります。
検索の場合、一致するすべてのエントリを表示します。各エントリには、親のクリック可能な階層を表示できます。