Material-ui: [docs] Tabel divirtualisasi

Kami berharap API saat ini memungkinkan integrasi sederhana dengan react-virtualized . Kami terbuka untuk melakukan perubahan apapun pada implementasi untuk membuat integrasi lebih sederhana.

Memiliki contoh demo di dokumen akan luar biasa.

Jika itu dapat membantu, berikut adalah contoh integrasi dengan Daftar / Menu https://codesandbox.io/s/oQ0nkl5pk.

@oliviertassinari Saya membuatnya tanpa react-virtualized karena berantakan dan tidak berfungsi dengan baik dengan komponen mui.
Selain itu, solusi saya saat ini adalah thead tetap murni-css dan tubuh yang dapat digulir dengan tinggi tabel dinamis dan lebar kolom dinamis (diuji di Safari juga).
Thead selalu di atas dengan tubuh yang dapat digulir adalah suatu keharusan untuk data grid.

Saya menambahkan scroll debouncing, mengutak-atik kinerja, dan memperbaiki beberapa kesalahan tetapi berhasil dengan baik: Saya "secara virtual" merender sekitar ~ 2400 baris, sangat mulus.

Pertanyaan tentang Table components:

1. bagaimana cara menggunakan ref dengan komponen MUI? Saya menghitung otomatis TableThead tinggi: masalahnya adalah itu

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

tidak mengembalikan elemen kontainer DOM sebenarnya dari TableThead tetapi contoh React (perilaku asli React saat menerapkan ref pada elemen bukan-DOM) karena itu adalah sesuatu yang harus diterapkan di TableThead komponen itu sendiri; komponen lain mungkin memerlukan ini, jadi mengapa tidak memiliki refHandler pada setiap komponen MUI yang menerapkan callback yang diberikan dalam elemen yang dirender pertama? (Saya harap saya berhasil menjelaskan ini @ _ @)
Solusi saya saat ini aneh

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

yang berarti menggunakan findDomNode dan juga menonaktifkan eslint.

1. mengapa border-bottom diterapkan pada sel, bukan baris?

2. bagaimana dengan memiliki stripe={true} prop untuk secara otomatis menghapus baris TableBody ?

3. mengapa .MuiIconButton.root memiliki properti gaya zIndex? 🤔

Saya berharap untuk segera mempublikasikan sesuatu yang stabil tentang ini sehingga Anda dapat melihatnya bahwa itu adalah sesuatu yang dapat diadopsi secara umum.

Maaf mengganggu sebanyak ini, tetapi saya banyak menggunakan mui @ next jadi saya menemukan banyak kasus penggunaan!

Saya membuatnya tanpa react-virtualized karena itu berantakan dan tidak berfungsi dengan baik dengan komponen mui.

Oh, itu memalukan bagi kami. Adakah ide yang bisa kami lakukan untuk mewujudkannya?

1. Anda dapat mencoba innerRef untuk mendapatkan referensi atas TableHead . ref akan memberi Anda referensi tentang komponen withStyles(TableHead) . Jika itu tidak berhasil, kami dapat mengekspos properti rootRef . Itu pola yang sudah kami gunakan.

2. Tidak tahu

3. Apa yang kamu maksud dengan stripe?
4. Saya telah menghapusnya di # 7467

~~Oh, itu memalukan bagi kami.

Sebenarnya adalah campuran dari react-virtualized kontainer sendiri, elemen asli table/thead/tbody DOM dan kebutuhan memiliki tbody yang dapat digulir yang menyebabkan masalah.
Terlalu banyak pekerjaan yang dibutuhkan dengannya: membuat solusi ad-hoc untuk MuiTable sangatlah mudah.

1. mengekspos rootRef akan bagus (dengan asumsi elemen utama TableThead dalam metode render adalah elemen Thead DOM itu sendiri)

2. haruskah border-bottom dipindahkan ke tr ? Haruskah saya memindahkan ini ke masalah khusus?

3. Maksud saya baris bergaris: mudah dicapai dengan like tr:nth-child(odd) { backgroundColor: f2f2f2 tetapi karena kita sudah memiliki pewarnaan hover={true} yang praktis, mengapa tidak memiliki striped={true} praktis? :)

4. Bagus!

1. 👍 Kedengarannya seperti rencana, ini contohnya , PR disambut baik.
2. Bootstrap melakukan hal yang sama , saya pikir ini memberikan lebih banyak fleksibilitas dengan menggunakannya pada TableCell .
3. Karena tidak ada dalam spesifikasi dan dapat diimplementasikan dengan mudah di userland?
4. 👍

1. Saya tidak yakin tentang hanya memiliki ref={rootRef} pada setiap komponen.
   Pengembang yang menggunakannya mungkin (sebagian besar) perlu memiliki kendali atas DOM.
   Dalam contoh Anda <FormControl ref={rootRef} ...> akan mengembalikan referensi ke komponen React (karena FormControl bukan elemen DOM) dan akan meminta pengembang menggunakan solusi yang harus saya gunakan.
   Mungkin kita harus memiliki rootRef berperilaku seperti berikut:

Apakah wadah dari komponen yang dirender adalah elemen DOM?

• jika ya maka terapkan ref={rootRef} di atasnya
• jika tidak, terapkan rootRef={rootRef} di atasnya => yang akan disebarkan ke elemen DOM pertama: cara ini pembuat kode akan selalu memiliki referensi DOM asli

Solusi penampung semua yang dapat saya pikirkan adalah memiliki properti muiRef dan rootRef mana yang pertama menerapkan callback ke wadah "komponen mui" (jika ada) dan yang terakhir menerapkan callback saat saya katakan sebelumnya.
Dengan cara ini, Pengembang dapat dengan mudah memiliki kedua / baik MUI ref dan DOM ref (apa pun yang dia butuhkan, kapan pun dia membutuhkannya).
Apakah menurut Anda ini masuk akal?

1. Betulkah? @ _ @

2. ops! Saya selalu lupa tentang spesifikasi material

1. Oh, saya belum memikirkan kasus itu. Masalah yang Anda maksud adalah sebagai berikut:
2. Komponen A mengambil properti ref dan properti rootRef
3. Bereaksi mencegat ref dan menerapkannya pada elemen
4. Komponen B menerima properti rootRef dan menerapkannya sebagai referensi pada root Komponen C
5. Bereaksi mencegat ref dan menerapkannya pada elemen

Tetapi bagaimana jika Komponen C juga memiliki properti rootRef?
Komponen A bisa berada di lahan pengguna, Komponen B bisa menjadi BidangTeks dan Komponen C bisa menjadi FormControl.

Jadi jawaban saya, pada awalnya kami memperkenalkan rootRef sebagai penolong sederhana. Kami belum memikirkan tentang industrialisasi. Jadi, menurut saya perilaku saat ini sangat bagus karena deterministik, sederhana dan tanpa batasan yang Anda gambarkan, jika orang tertarik untuk mengakses elemen dom yang mendasarinya, mereka dapat menggunakan API findDOMNode .

@damianobarbati Apakah react-virtual-list percobaan dengan Tabel dan virtualisasi disebutkan di sini ?

Saya menebak listComponent = TableBody, itemComponent = TableRow?

Saya telah memulai proyek ini yang menggunakan react-virtualized dengan Material 1.0 yang mungkin Anda minati.

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

Ini masih dalam proses (lihat https://github.com/techniq/mui-table/blob/master/TODO.md) tetapi mungkin berguna bagi Anda. Dokumen kurang, tetapi lihat ceritanya untuk mengetahui cara menggunakannya.

@techniq Ini terlihat menjanjikan 😄! Saya pikir akan sangat bagus untuk mengubah bagian dokumentasi tabel di beberapa titik untuk memiliki:
- https://github.com/DevExpress/devextreme-reactive~~ (lisensi komersial)

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

Kami juga dapat menambahkannya ke bagian https://material-ui-next.com/discover-more/related-projects/#material-ui-specific-projects.
Jadi, beri tahu kami jika proyeknya sudah lebih matang. Saya pikir kami dapat menerima permintaan tarik untuk mempromosikan proyek :).

Saya telah melakukan PR sebesar react-virtual-list sini https://github.com/clauderic/react-tiny-virtual-list/pull/30 yang memungkinkan penggunaannya dengan material-ui. Saya berjuang untuk mendapatkan react-virtual untuk bekerja dan membuat HTML yang valid karena memiliki kode keras div .

cc: @kgregory

@eyn kerja bagus! Saya baru saja menyelesaikan implementasi tabel gulir tak terbatas menggunakan react-virtualized dan material-ui. Saya berharap untuk segera menyadarinya. Ketika saya melakukannya, saya akan menautkannya di sini untuk pengunjung masalah ini di masa mendatang dan mungkin sebagai contoh di dokumen.

@kgregory apakah Anda sudah menyelesaikan intinya? Saya masih mencari solusi dasar untuk tabel Material UI tervirtualisasi dan tidak mudah menemukannya ... Ini akan sangat membantu!

Terima kasih atas pekerjaan Anda!

@ neox Tidak, maaf. Saya tidak pernah membahasnya, tetapi balasan Anda adalah pengingat yang bagus. Saya akan mencoba mencari waktu untuk mengumpulkan sesuatu.

@oliviertassinari contoh Anda di salah satu komentar pertama yang seharusnya menunjukkan cara menggunakan daftar bahan dengan daftar virtual react tidak berfungsi. Apakah Anda masih memiliki contoh itu?

@rolandjitsu Maaf, saya tidak punya contoh. Tentang masalah ini :).

@oliviertassinari mengerti. Saya pikir masalah ini tentang tabel dan bukan <List> , atau itu juga mencakup daftar?

@rolandjitsu Daftar, tabel, kertas, daftar grid. Semuanya sama. Masalah ini tentang menambahkan demo sederhana sehingga orang dapat melihat polanya dan menerapkannya ke berbagai komponen. Tabel adalah komponen yang mungkin Anda perlukan untuk virtualisasi.

@oliviertassinari Saya ingin memberikan celah, jika Anda dapat mengarahkan saya ke arah yang benar. Sejauh yang saya tahu, kita membutuhkan inti dasar dengan material-ui @ next terintegrasi dengan react-virtualized?

@ hassan-zaheer Ya, saya rasa demo sederhana dengan react-virtualized di akhir halaman tabel docs akan berhasil :).

Hai. Kebetulan tersandung pada utas ini saat meneliti untuk proyek saya. Saya ingin tahu apakah ada pembaruan di sini tentang demo atau dokumentasi penggunaan? @kgregory Atau bisakah Anda memberikan wawasan tentang menggabungkan keduanya? Alangkah baiknya membuat tabel terlihat koheren dengan gaya

@ zd-project Anda dapat melihat proyek mui-virtualized-table saya .

Dulu mui-table tetapi saya memutuskan untuk membagi 2 dan mendukung kasus penggunaan yang berbeda ( mui-table memanfaatkan DOM secara langsung dan memungkinkan Anda menggunakan hal-hal seperti position: sticky dan <table> layout (baris / kolom kolom, lebar otomatis, dll) yang sulit dilakukan dengan react-virtualized.

Dengan demikian, mui-virtualized-table baru saja menambahkan pengubahan ukuran kolom dari PR yang bagus.

Dimana kita pada orang-orang ini?

@techniq , terima kasih untuk mui-virtualized-table ! Itu bagus! Adakah kemungkinan kita bisa menggabungkannya menjadi mui-org/material-ui ?

Saya akan senang jika seseorang akan membuka PR yang memperkenalkan demo ke dokumen. Dengan cara ini kami dapat memeriksa apakah kami dapat meningkatkan API tabel untuk integrasi yang lebih baik dengan strategi virtualisasi.

@mastertinner Mengapa kita perlu menambahkan ini ke inti? Virtualisasi adalah strategi pengoptimalan. Tidak semua orang membuat kumpulan data yang besar jadi saya tidak akan membebani paket semua orang dengannya.

@mastertinner Kita bisa mulai dengan mereferensikan proyek itu dalam dokumentasi, misalnya di sini: https://material-ui.com/demos/tables/#advanced-use-cases :)

👍 terdengar seperti rencana

@mastertinner Sementara saya masih menggunakannya (ketika virtualisasi diperlukan), saya juga menggunakan mui-table baru saya ketika saya tidak membutuhkan virtualisasi, dan dapat memanfaatkan dom (menggunakan table , tr , td , atau css grid untuk tata letak, menghilangkan kebutuhan untuk lebar kolom eksplisit, dll) dan mengaktifkan beberapa pola lanjutan seperti beberapa position: sticky header (seperti ini )

@rogerstorm mendanai masalah ini dengan $ 30. Lihat di IssueHunt

Memutuskan untuk bermain-main dengan hari ini, saya tidak merekomendasikan 😭 Inilah yang telah saya hasilkan sejauh ini:

Maafkan lag, laptop saya tidak bagus 👎 Menggunakan Komponen Material-UI dan react-virtualized komponen

@joshwooding Saya telah melakukan hal yang sama persis seperti yang telah Anda lakukan, header virtual + tetap (dengan scrollbar pada body saja) . Jika implementasi Anda menggunakan dua <Table> s yang terpisah, maka saya pikir Anda mendapat masalah yang sama dengan yang saya temukan.

• alat peraga penyelarasan materi (mis. numeric ) tidak berfungsi, karena Anda mungkin menggunakan komponen seperti <div> untuk tata letak di dalam <TableCell> .
• Anda dapat memberikan properti css untuk td dan tr agar dapat bekerja secara virtual dengan benar. Tidak ada cara untuk memberikan height atau max-height menjadi td dan tr dan materi <TableCell> memiliki bantalannya sendiri, margin hal sehingga membuatnya sulit untuk memperbaiki tinggi baris.

Nah, intinya adalah komponen di dalam <TableCell> tidak bisa dihindari. Saya ingin tahu apakah Anda memecahkan masalah ini dengan cara yang elegan. Jika tidak, menurut saya header virtual + tetap (dengan scrollbar pada body saja) sulit untuk menjadi komponen yang kecil (sekecil fungsinya), dan terdefinisi dengan baik.

@worudso Saat ini hanya menggunakan satu <Table> Saya perlu menemukan cara untuk menurunkan angka tetapi saya mungkin bisa membuatnya berfungsi. Ini jelas bukan Komponen kecil dan kode saya masih ada di mana-mana tetapi saya akan mengerjakannya lagi dan melihat apakah saya dapat memperbaikinya

Saya telah membuat kotak pasir yang mendemonstrasikan penggunaan material-ui dan react-virtualized untuk menghasilkan tabel virtual. Contoh khusus ini menggunakan react-virtualized untuk mengukur Tabel dengan ketinggian jendela.

Komponen MuiVirtualizedTable dari contoh juga tersedia dalam inti ini .

MuiVirtualizedTable dapat menerima prop apapun yang didukung oleh Tabel . rowClassName tidak diterapkan secara langsung, tetapi diterapkan sebagai tambahan gaya lain yang ditentukan dalam MuiVirtualizedTable .

Prop columns mengharapkan array objek yang digunakan saat merender sel untuk setiap kolom. Setiap objek dapat menerima prop apapun yang didukung oleh Kolom .

Saya minta maaf karena terlalu lama. Saya sibuk.

FYI, sekarang ada juga react-window yang seharusnya menjadi penerus react-virtualized . Jika ada yang ingin mencobanya.

@kgregory Terima kasih telah membagikan kode dan kotak.

@joshwooding Demo yang bagus. Sangat menyenangkan memiliki tajuk tetap :). Saya harap Anda dapat menyelesaikan penerapannya! Mengenai penerusan numerik, apa yang mencegah Anda menerapkan langsung pada sel? react-window vs react-virtualized

@oliviertassinari Saya telah menetapkan tujuan untuk menggunakan API komponen Table dan saat ini sepertinya Anda tidak dapat mengirimkan alat peraga khusus melalui komponen Column . Mungkin ada cara untuk melakukannya tanpa menggunakan cara react-virtualized

@joshwooding Apakah Anda mencoba https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#headerrowrenderer ?

@oliviertassinari Saya sudah mencoba menggunakan HeaderRowRenderer tetapi sepertinya Anda tidak dapat melewatkan alat peraga khusus tanpa memanipulasi alat peraga yang ada karena inilah yang disebut untuk membuat kolom untuk melewati ke headerRenderer:

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

@oliviertassinari Untuk tabel tinggi tetap, Anda dapat mengedit sedikit demo @kgregory : https://codesandbox.io/s/6vo8y0929k

@joshwooding Tampak hebat! Saya tidak bisa memikirkan ada yang kurang untuk menjadikannya demo resmi.

@issuehuntfest telah mendanai $ 60.00 untuk masalah ini. Lihat di IssueHunt

@oliviertassinari Saya akan bekerja menerapkan ini :)

@tokopedia telah mengirimkan permintaan penarikan. Lihat di IssueHunt

@oliviertassinari telah memberikan $ 81.00 kepada @joshwooding. Lihat di IssueHunt

• : kantong uang: Total deposit: $ 90.00
• : tada: Hadiah repositori (0%): $ 0,00
• : kunci inggris: Biaya layanan (10%): $ 9,00

@oliviertassinari telah memberikan $ 81.00 kepada @joshwooding. Lihat di IssueHunt

Sangat layak. Kerja bagus @joshwooding!

Saya memiliki kebutuhan yang sama tetapi untuk komponen Daftar ... apakah pendekatan yang sama akan berhasil untuk membuat daftar berfungsi?

@mdizzy Ya, kami dapat menambahkan demo serupa ke daftar.

Saya mencoba sekarang untuk membuat daftar virtual dengan react-window (seperti yang disarankan pembuatnya untuk menggunakannya sebagai pengganti virtual jika Anda tidak memerlukan API lengkap, tetapi pada akhirnya API untuk daftar tidak benar-benar berubah yang banyak)

Sejauh ini saya memiliki dua masalah besar:
1) Gaya item daftar rusak, terutama untuk hal-hal seperti ikon / tindakan yang benar. Saya rasa gaya yang diinjeksi daftar virtual tidak cocok dengan gaya dari material-ui
2) Subheader yang lengket juga menjadi sangat berantakan, mungkin karena alasan yang sama (posisi penggunaan react-window absolut untuk mengatur tata letak item)

Saya mungkin akan mencoba bereaksi-virtual untuk melihat apakah mereka bekerja lebih baik bersama-sama

@MastroLindus Saya menganggap Anda telah mencoba demo virtualisasi kami terlebih dahulu?

@oliviertassinari Saya memulai dengan cara saya sendiri, menemukan masalah yang saya jelaskan di atas, mencari di Google untuk itu, menemukan utas ini.

Kemudian saya menemukan tentang demo virtualisasi, saya memeriksa kodenya dan menemukan bahwa pada dasarnya adalah hal yang sama yang saya lakukan sendiri (hanya diterapkan ke Tabel, bukan daftar).

Masalah saya sedikit lebih terkait dengan daftar. Konsep umum berfungsi, tetapi hal-hal seperti ikon, tindakan, tajuk melekat tidak berfungsi dengan benar.
Secara rinci, mengacu pada 2 poin saya di komentar di atas:
Masalah nomor 1 bisa menjadi masalah dengan react-window yang tidak akan hadir dengan react-virtualized. Saya akan memberi tahu Anda segera setelah saya mencobanya hari ini atau besok. Mungkin kita beruntung dan itu hanya akan bekerja dengan react-virtualized. Ayo lihat.
Masalah nomor 2 (subheader lengket tidak berfungsi dengan baik) Saya pikir itu adalah sesuatu yang memerlukan solusi ad-hoc, karena posisi mereka mungkin akan menciptakan konflik apa pun yang terjadi. Seseorang membuat https://github.com/marchaos/react-virtualized-sticky-tree untuk masalah yang sama (memiliki kesepakatan yang divirtualisasi bereaksi dengan header yang lengket) tetapi saya tidak punya waktu untuk memeriksanya sekarang

@MastroLindus Masalah apa yang kita https://next.material-ui.com/demos/tables/#virtualized -table?

@oliviantassin Tidak ada.
Saya menetapkan bahwa masalah saya khusus untuk daftar virtual, bukan tabel virtual. (Sekali lagi: Saya minta maaf saya menulis tentang masalah untuk Table Virtualized, tidak ada untuk Daftar virtual dan saya menindaklanjuti komentar @mdizzy )

Mengenai daftar: menggunakan ListItemSecondaryAction, ListItemIcon dan ListSubheader (dengan sticky header) tampaknya tidak berfungsi, karena pemosisiannya kacau.
Tanpa komponen itu, saya mendapat daftar dasar untuk bekerja dengan react-window (dan saya kira akan melakukan hal yang sama dalam react-virtualized)

@MastroLindus Saya rasa Anda dapat memindahkan diskusi ke # 15149.