React-window: ReactウィンドウでMuiVirtualizedTableを実装する方法は？
スタイリングにマテリアルUIを使用していて、大きなテーブルが遅れ始めています。
そのため、ドキュメントでReact VirtualizedTableの使用に関するこのチュートリアルを見つけました。 しかし、その中でMuiVirtualizedTableはReactWindowではなくReactVirtualizedTableを使用しています。 前者のドキュメントでは、次のように述べています。
プロジェクトにreact-virtualizedを追加することを検討している場合は、より軽量な代替手段として、react-windowを検討してください。
だから私の質問は：RVTの代わりにReactWindowを使用する方法はありますか？ はいの場合、どのように？ RVTのデモでは、React Window APIによって公開されていないTableというコンポーネントを使用します。
janhesters
全てのコメント3件
TableとMuiVirtualizedTableは内部で<table /> 、 <tr />などを使用していないので、ReactWindowを使用できることを知りました。
janhesters
2019年04月30日
@janhesters ReactWindowをmaterial-uiのテーブルでどのように使用したかを教えてください。 それは素晴らしいでしょう！ ありがとう
stefanoTron
2019年06月19日
@littletowerは、元のマテリアルUIの例にほぼ従う私が作成した例です。
https://codesandbox.io/s/material-ui-react-window-virtualized-table-example-byv8n
実際の実装自体はかなり単純で、基本的にはテーブルの行を<FixedSizeList/>ラップするだけです。 <table/>要素を実際に使用できないため、大きな頭痛の種は実際にはテーブルのように見えます。
samuelcolburn
2019年07月11日
関連する問題
marian-c
·
3コメント
lifeisaloha
·
3コメント
vinnymac
·
3コメント
ivan-badmaev
·
3コメント
carolin913
·
3コメント
最も参考になるコメント
@littletowerは、元のマテリアルUIの例にほぼ従う私が作成した例です。
https://codesandbox.io/s/material-ui-react-window-virtualized-table-example-byv8n
実際の実装自体はかなり単純で、基本的にはテーブルの行を
<FixedSizeList/>ラップするだけです。<table/>要素を実際に使用できないため、大きな頭痛の種は実際にはテーブルのように見えます。