Material-ui: [ドキュメント]仮想化されたテーブル

現在のAPIでreact-virtualizedとの簡単な統合が可能になることを願っています。 統合をより簡単にするために、実装に変更を加えることができます。

ドキュメントにデモの例があると素晴らしいでしょう。

それが役立つ場合は、リスト/メニューhttps://codesandbox.io/s/oQ0nkl5pkとの統合例を次に示し

@oliviertassinari react-virtualizedなしで作成しました。これは混乱していて、muiコンポーネントではうまく機能しなかったためです。
さらに、私の現在のソリューションは、動的なテーブルの高さと動的な列の幅を備えた純粋なcss固定ヘッダーとスクロール可能なtbodyです（Safariでもテスト済み）。
スクロール可能なボディを備えた常時オントップのヘッダーは、データグリッドに必須です。

スクロールのデバウンスを追加し、パフォーマンスを微調整し、グリッチを修正していますが、うまく機能しています。約2400行を「仮想的に」レンダリングしているので、とてもスムーズです。

Tableコンポーネントに関する質問：

1. MUIコンポーネントでrefを使用する方法は？ 私はTableThead高さを自動計算しています：問題はそれです

<TableHead ref={ ref => this.tableThead = ref }>

TableTheadの実際のDOMコンテナ要素ではなく、Reactインスタンス（非DOM要素にrefを適用するときのReactのネイティブな動作）を返します。これは、 TableThead適用する必要があるためです。 refHandlerを持たないのはなぜですか？ （私はこれを@ _ @で説明することができたと思います）
私の現在の解決策は奇妙です

const theadHeight = ReactDOM.findDOMNode(this.tableThead).clientHeight; // eslint-disable-line react/no-find-dom-node

これは、非推奨のfindDomNodeを使用し、eslintも無効にすることを意味します。

1. border-bottomが行ではなくセルに適用されるのはなぜですか？

2. TableBody行を自動的にストライプ化するstripe={true}小道具があるのはどうですか？

3. .MuiIconButton.root zIndexスタイルのプロパティがあるのはなぜですか？ 🤔

これについて安定したものをすぐに公開して、一般的な方法で採用できるものを見ていただけるようにしたいと思います。

大変申し訳ありませんが、 mui @ nextを多用しているので、たくさんのユースケースを見つけています！

私はそれが混乱していて、muiコンポーネントでうまく機能しなかったので、react-virtualizedなしでそれを作りました。

ああ、それは私たちにとって残念です。 私たちができることは何でも可能ですか？

1. あなたは試すことができますinnerRef上参照を取得するためにTableHead 。 refは、 withStyles(TableHead)コンポーネントの参照を取得します。 それが機能しない場合は、 rootRefプロパティを公開できます。 それは私たちがすでに使用しているパターンです。

2. 全く分からない

3. ストライプとはどういう意味ですか？
4. ＃7467で削除しました

~~ああ、それは私たちにとって残念です。

実際には、 react-virtualized独自のコンテナー、ネイティブのtable/thead/tbody DOM要素、および問題の原因となったスクロール可能なtbodyの必要性が混在しています。
それにはあまりにも多くの作業が必要でした。 MuiTableアドホックソリューションを作成するのは簡単でした。

1. rootRefを公​​開するのrenderメソッドのTableTheadメイン要素がThead DOM要素自体であると仮定します）

2. 次に、 border-bottomをtr移動する必要がありますか？ これを専用の問題に移す必要がありますか？

3. 私は縞模様の行を意味します： like tr:nth-child(odd) { backgroundColor: f2f2f2簡単に達成できますが、すでに便利なhover={true}色が付いているので、便利なstriped={true}を持っていないのはなぜですか？ :)

4. すごい！

1. 👍計画のように聞こえます、
2. Bootstrapも同じことをしていますが、 TableCell使用することで、より柔軟性が増していると思います。
3. それは仕様に含まれておらず、ユーザーランドに簡単に実装できるからですか？
4. 👍

1. すべてのコンポーネントにref={rootRef}かどうかはわかりません。
   それを使用している開発者は、おそらく（ほとんど）DOMを制御する必要があります。
   あなたの例では、 <FormControl ref={rootRef} ...>は再びReactコンポーネントへの参照を返し（ FormControlはDOM要素ではないため）、開発者に私が使用しなければならなかった回避策を使用させます。
   たぶん、 rootRef次のように動作させる必要があります。

レンダリングされたコンポーネントのコンテナはDOM要素ですか？

• はいの場合ref={rootRef} 、それに
• それ以外の場合は、 rootRef={rootRef}を適用します=>これは最初のDOM要素に伝播します：このようにして、コーダーは常に実際のDOM参照を持ちます

私が考えることができる包括的な解決策は、 muiRef rootRefプロパティと
このようにして、開発者はMUIrefとDOMrefの両方/どちらかを簡単に持つことができます（必要なときにいつでも）。
これは理にかなっていると思いますか？

1. 本当に？ @ _ @

2. おっと！ 素材スペックはいつも忘れてます

1. ああ、私はその事件について考えていません。 あなたが言及している問題は次のとおりです。
2. コンポーネントAはrefとrootRefプロパティを取ります
3. インターセプトrefを反応させ、要素に適用します
4. コンポーネントBはrootRefプロパティを受け取り、それをルートコンポーネントCの参照として適用します
5. このrefをReactインターセプトし、要素に適用します

しかし、コンポーネントCにもrootRefプロパティがある場合はどうなるでしょうか。
コンポーネントAはユーザーランドに、コンポーネントBはTextFieldに、コンポーネントCはFormControlに配置できます。

だから私の答えは、最初は単純なヘルパーとしてrootRefを紹介しました。 工業化についてはまだ考えていません。 したがって、現在の動作は決定論的でシンプルであり、説明している制限なしで思います。基盤となるdom要素へのアクセスに関心がある場合は、

@damianobarbatiここで言及されてreact-virtual-listしましたか？

listComponent = TableBody、itemComponent = TableRowだと思いますか？

私はあなたが興味を持っているかもしれないMaterial1.0でreact-virtualizedを使用するこのプロジェクトを始めました。

https://github.com/techniq/mui-table

これはまだ進行中の作業ですが（https://github.com/techniq/mui-table/blob/master/TODO.mdを参照）、役立つ場合があります。 ドキュメントが不足していますが、ストーリーを見て、使い方を理解してください。

@techniqこれは有望に見えます😄！ ある時点でテーブルのドキュメントセクションを刷新して
-https：//github.com/DevExpress/devextreme-reactive ~~ （商用ライセンス）

• https://github.com/gregnb/mui-datatables
• https://github.com/techniq/mui-table

https://material-ui-next.com/discover-more/related-projects/#material-ui-specific-projectsセクションに追加することもできます。
それで、プロジェクトがより成熟したときに私たちに知らせてください。 プロジェクトを宣伝するためのプルリクエストを受け入れることができると思います:)。

私はここhttps://github.com/clauderic/react-tiny-virtual-list/pull/30でreact-virtual-list PRを行いました。これにより、material-uiでの使用が可能になります。 divハードコーディングされているため、react-virtualを機能させて有効なHTMLを作成するのに苦労しました。

cc： @kgregory

@eynいい仕事！ react-virtualizedとmaterial-uiを使用して、無限スクロールテーブルの実装を完了しました。 すぐに要点をまとめたいと思います。 私がそうするとき、私はこの問題の将来の訪問者のために、そしておそらくドキュメントの例としてそれをここにリンクします。

@kgregory要点は終わりましたか？ 仮想化されたマテリアルUIテーブルの基本的なソリューションをまだ探していますが、見つけるのは簡単ではありません...それは大きな助けになるでしょう！

お疲れ様でした！

@neofoxいいえ、ごめんなさい。 私はそれを回避したことはありませんが、あなたの返事は素晴らしい思い出です。 何かをまとめる時間を見つけようと思います。

@oliviertassinari最初のコメントの1つにあるあなたの例は、react仮想化リストでマテリアルリストを使用する方法を示していると思われますが機能していません。 あなたはまだその例を置いていますか？

@rolandjitsu申し訳ありませんが、例はありません。 それがこの問題の内容です:)。

@oliviertassinariはそれを手に入れました。 この問題は<List>ではなくテーブルに関するものだと思いましたか、それともリストもカバーしていますか？

@rolandjitsuリスト、表、紙、グリッドリスト。 それはすべて同じです。 この問題は、人々がパターンを見て、それをさまざまなコンポーネントに適用できるように、簡単なデモを追加することに関するものです。 テーブルは、仮想化が必要になる可能性が高いコンポーネントです。

@oliviertassinariあなたが私を正しい方向に向けることができれば、私はこれに亀裂を与えたいと思います。 私の知る限り、react-virtualizedと統合されたmaterial-ui @ nextの基本的な要点が必要ですか？

@ hassan-zaheerはい、テーブルのドキュメントページの最後にreact-virtualizedを使用した簡単なデモでうまくいくと思います:)。

こんにちは。 私のプロジェクトを研究しているときに、このスレッドに偶然出くわしました。 デモまたは使用法のドキュメントに関して、ここで更新があるかどうか知りたいですか？ @kgregoryまたは、2つを組み込む際の洞察を提供できますか？ テーブルをスタイルと調和させて見せるのもいいでしょう

@ zd-project私のmui-virtualized-tableプロジェクトを見ることができ

以前はマルチテーブルでしたが、2つをフォークして、さまざまなユースケースをサポートすることにしました（ mui-tableはDOMを直接活用し、 position: stickyや<table>レイアウトなどを使用できるようにします（行/列スパン、自動幅など）react-virtualizedでは困難でした。

そうは言っても、 mui-virtualized-tableは、優れたPRから列のサイズ変更を追加しただけです。

私たちはこの人たちのどこにいますか？

@techniq 、 mui-virtualized-tableありがとう！ それは素晴らしい！ mui-org/material-uiに統合できる可能性はありますか？

誰かがドキュメントにデモを紹介するPRを開いてくれたら嬉しいです。 このようにして、仮想化戦略との統合を改善するためにテーブルAPIを改善できるかどうかを調べることができます。

@mastertinnerなぜこれをコアに追加する必要があるのですか？ 仮想化は最適化戦略です。 誰もが大きなデータセットをレンダリングするわけではないので、私はそれでみんなのバンドルに負担をかけません。

@mastertinnerドキュメントでプロジェクトを参照することから始めることができます。たとえば、https：

👍は計画のように聞こえます

@mastertinner私はまだそれを使用していますが（仮想化が必要な場合）、仮想化が必要ない場合は新しいmui-tableも使用し、domを活用できます（ table 、 tr 、 td 、またはレイアウト用のcssグリッド、明示的な列幅の必要性の排除など）、複数のposition: stickyヘッダーなどの高度なパターンを有効にします（このように）

@rogerstormはこの問題に30ドルの資金を提供しました。 IssueHuntでご覧ください

今日これを試してみることにしました、私はお勧めしません😭これまでに私が作成したものは次のとおりです：

遅れを許してください、私のラップトップは素晴らしいではありません👎それはMaterial-UIコンポーネントとreact-virtualizedコンポーネントを使用しています

@joshwooding私はあなたがしたこととまったく同じことをしました、仮想化された+固定ヘッダー（本体にのみスクロールバーがあります） 。 実装で2つの別々の<Table>使用している場合、私が見つけたのと同じ問題が発生したと思います。

• <TableCell>内のレイアウトに<div>ようなコンポーネントを使用する可能性があるため、マテリアルの配置小道具（ numeric ）は機能しません。
• 正しく仮想化されて機能するように、 tdとtr cssプロパティを指定できます。 heightまたはmax-heightをtdとtrに与える方法はありません。また、マテリアルの<TableCell>は独自のパディング、マージンがあります。行の高さを修正するのは難しいです。

さて、ポイントは<TableCell>内のコンポーネントが避けられないということです。 この問題を上品に解決したのではないでしょうか。 そうでない場合は、仮想化+固定ヘッダー（本体のみにスクロールバーを使用）を小さく（関数と同じくらい小さく）、明確に定義されたコンポーネントにするのは難しいと思います。

@worudso現在、1つの<Table>のみを使用しています。数値を渡す方法を見つける必要がありますが、それを機能させることができる可能性があります。 それは間違いなく小さなコンポーネントではなく、私のコードはまだどこにでもありますが、もう少し作業して、それを改良できるかどうかを確認します

material-uiとreact-virtualizedを使用して仮想化テーブルを作成する方法を示すサンドボックスを作成しました。 この特定の例では、react-virtualizedを使用して、テーブルのサイズをウィンドウの高さに合わせています。

例のMuiVirtualizedTableコンポーネントも、この要点で利用できます。

MuiVirtualizedTableは、テーブルでサポートされているすべての小道具を受け入れることができます。 rowClassNameは直接適用されませんが、代わりにMuiVirtualizedTable定義されている他のスタイルに加えて適用されます。

columns小道具は、各列のセルをレンダリングするときに使用されるオブジェクトの配列を想定しています。 各オブジェクトは、 Columnでサポートされている任意の小道具を受け入れることができます。

時間がかかってしまったことをお詫びします。 私は忙しいです。

参考までに、 react-virtualized後継となるreact-windowあります。 誰かがそれを試してみたい場合に備えて。

@kgregoryコードサンドボックスを共有していただきありがとうございます。

@joshwooding素晴らしいデモ。 固定ヘッダーがあるのは素晴らしいことです:)。 実装を完了していただければ幸いです。 数値転送に関して、セルに直接適用できない理由は何ですか？ react-windowとreact-virtualized

@oliviertassinari TableコンポーネントのAPIを使用するという目標を設定しましたが、現在、 Columnコンポーネントを介してカスタム小道具を渡すことができるようには見えません。 しかし、react-virtualizedの方法を使用せずにそれを行う方法はおそらくあります

@joshwooding https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#headerrowrendererを試しましたか？

@oliviertassinari HeaderRowRendererを使用してみましたが、headerRendererに渡す列を作成するために呼び出されるので、既存の小道具を操作せずにカスタム小道具を渡すことはできないようです。

const renderedHeader = headerRenderer({ columnData, dataKey, disableSort, label, sortBy, sortDirection, });

@oliviertassinari固定高さのテーブルの場合、 @ kgregoryのデモを少し編集できます： https ： //codesandbox.io/s/6vo8y0929k

@joshwooding見栄えがいいです！ 公式デモにするために欠けているものは何も考えられません。

@issuehuntfestは、この問題に60.00ドルの資金を提供しました。 IssueHuntでご覧ください

@oliviertassinariこれの実装に

@joshwoodingがプルリクエストを送信しました。 IssueHuntでご覧ください

@oliviertassinariは81.00を報酬として与えました。 IssueHuntでご覧ください

• ：moneybag：合計​​デポジット：$ 90.00
• ：tada：リポジトリ報酬（0％）：$ 0.00
• ：レンチ：サービス料（10％）：$ 9.00

@oliviertassinariは81.00を報酬として与えました。 IssueHuntでご覧ください

当然のことです。 いい仕事@joshwooding！

同様のニーズがありますが、リストコンポーネントが必要です...リストを機能させるために同じアプローチが機能しますか？

@mdizzyはい、リストに同様のデモを追加できます。

私は今、react-windowを使用してリストを仮想化しようとしています（完全なAPIが必要ない場合は、仮想化の代わりにリストを使用することを作成者が提案しましたが、最終的にはリストのAPIは実際には変更されませんそれだけ）

これまでのところ、2つの大きな問題があります。
1）リストアイテムのスタイルは、特に正しいアイコン/アクションのようなものでは壊れています。 仮想リストが挿入されたスタイルは、material-uiのスタイリングとうまく機能しないと思います
2）おそらく同じ理由で、スティッキーサブヘッダーも非常に乱雑になります（react-windowはアイテムのレイアウトに絶対位置を使用します）

私はおそらくreact-virtualizedを試して、それらが一緒にうまく機能するかどうかを確認します

@MastroLindus最初に仮想化デモを試したと思いますか？

@oliviertassinari私は自分のやり方で始め、上記の問題を見つけ、

次に、仮想化デモについて発見し、そのコードを確認したところ、基本的に自分で行っていることと同じであることがわかりました（リストではなくテーブルにのみ適用されます）。

私の問題はもう少し関連するリストです。 一般的な概念は機能しますが、アイコン、アクション、スティッキーヘッダーなどは正しく機能しません。
詳細には、上記のコメントの私の2つのポイントを参照してください。
問題番号1は、react-virtualizedでは発生しないreact-windowの問題である可能性があります。 今日または明日試してみたらすぐにお知らせします。 たぶん私たちは幸運で、react-virtualizedで動作するでしょう。 どれどれ。
問題2（スティッキーサブヘッダーが正しく機能しない）とにかくアドホックな解決策が必要になると思います。それらの配置は、何があっても競合を引き起こす可能性があるためです。 誰かが同様の問題（スティッキーヘッダーを処理するreact-virtualizedを持っている）のためにhttps://github.com/marchaos/react-virtualized-sticky-treeを構築しましたが、私は今それを調べる時間がありませんでした

@MastroLindus https://next.material-ui.com/demos/tables/#virtualized -tableにはどのような問題がありますか？

@oliviertassinariなし。
問題は仮想テーブルではなく仮想リストに固有であると指定しました。 （繰り返しになりますが、Table Virtualizedの問題について書いているのは残念ですが、仮想化リストには何もありません。 @ mdizzyのコメントをました）

リストについて：ListItemSecondaryAction、ListItemIcon、およびListSubheader（スティッキーヘッダー付き）を使用すると、配置が混乱するため、機能しないようです。
これらのコンポーネントがなければ、react-windowで動作する基本的なリストを取得しました（react-virtualizedでも同じことを行うと思います）

@MastroLindusディスカッションを＃15149に移すことができると思います。