Falsafah Jadual TanStack dan Reka Bentuk Tanpa Kepala

Pustaka antara muka pengguna tanpa kepala menyediakan semua logik, pengurusan keadaan dan tingkah laku yang anda perlukan, tetapi sengaja tidak menyertakan sebarang penanda atau gaya. Anda mengawal setiap piksel hasil yang dipaparkan.

Falsafah ini bermakna anda tidak perlu bergelut dengan penggantian CSS atau struktur DOM yang ditetapkan oleh pustaka.

Dengan komponen jadual tradisional, mengubah rupanya memerlukan penggantian berpuluh-puluh gaya dan kadangkala helah untuk mengatasi struktur HTML. Pustaka tanpa kepala menyerahkan data dan keadaan kepada anda, kemudian tidak menghalang cara anda bekerja.

Hasilnya ialah kebebasan reka bentuk sepenuhnya: gunakan Tailwind, CSS Modules, Emotion atau CSS biasa tanpa kesukaran.

TanStack Table v8 berfungsi merentas React, Vue, Solid, Svelte dan juga JavaScript tulen. Logik terasnya tidak bergantung pada rangka kerja; setiap penyesuai membalutnya dengan cangkuk yang biasa digunakan.

Ini bermakna kemahiran boleh dipindahkan antara rangka kerja dan permukaan API kekal konsisten.

Dalam React, anda memanggil useReactTable({ data, columns, getCoreRowModel }) dan fungsi itu mengembalikan objek jadual. Objek ini menjadi teras kepada segala-galanya.

Objek ini menyimpan semua keadaan semasa (pengisihan, penomboran dan pemilihan) serta menyediakan kaedah pembantu yang mengawal pemaparan JSX anda.

TanStack Table tidak pernah merender satu pun tag HTML bagi pihak anda. Anda menulis sendiri elemen table, thead, tbody, tr, th dan td, kemudian meminta objek jadual menentukan kandungan yang perlu diletakkan di dalamnya.

Ini berbeza daripada AG Grid atau Ant Design Table, yang merender DOM sendiri dan menyediakan slot penyesuaian yang terhad.

AG Grid, Material Table dan Ant Design Table menyertakan saluran pemaparan lengkap, gaya terbina dalam dan antara muka ciri yang kaya secara lalai. Pustaka ini lebih pantas untuk prototaip, tetapi lebih sukar untuk disesuaikan secara mendalam.

TanStack Table memerlukan lebih banyak persediaan awal, tetapi memberikan anda jadual yang mudah dicapai dan sepenuhnya mengikut jenama tanpa perlu bergelut dengan penggantian gaya.

Oleh sebab TanStack Table tidak menyertakan gaya dan anda hanya mengimport model baris yang benar-benar digunakan (pengisihan, penapisan dan penomboran), jejaknya kekal kecil.

Anda hanya membayar dari segi saiz untuk ciri yang didayakan, menjadikannya sesuai untuk aplikasi yang peka terhadap prestasi.

Oleh sebab TanStack Table tidak menghasilkan penanda, penyepaduannya dengan Tailwind CSS semudah menambahkan nama kelas pada elemen tr dan td anda sendiri. Perkara yang sama berlaku untuk CSS Modules atau apa-apa pendekatan penggayaan.

Tiada pertarungan kekhususan kerana tiada gaya terbina dalam yang perlu digantikan.

Pendekatan tanpa kepala memang memerlukan lebih banyak kod pada permulaan. Anda mesti menulis gelung pemaparan sendiri dan menyambungkan pengendali keadaan secara manual.

Namun begitu, selepas membina komponen jadual asas, anda boleh menggunakannya semula di seluruh aplikasi dengan penggayaan yang konsisten.

Cangkuk useReactTable menerima objek konfigurasi yang sekurang-kurangnya mengandungi data (tatasusunan objek anda), columns (tatasusunan ColumnDef) dan getCoreRowModel.

Instans jadual yang dikembalikan menyediakan getHeaderGroups() untuk pengepala dan getRowModel().rows untuk baris badan, yang anda lelar dalam JSX.

Mulakan dengan memasang @tanstack/react-table, takrifkan tatasusunan lajur anda, panggil useReactTable, kemudian merender elemen jadual sendiri menggunakan kaedah pembantu. Pustaka mengendalikan semua keadaan dan data terbitan; anda mengendalikan semua penanda.

Pemisahan yang jelas ini memastikan komponen jadual anda boleh diuji dan sistem reka bentuk anda kekal koheren.

TanStack Table ialah pustaka jadual tanpa kepala dan tidak bergantung pada rangka kerja yang menyediakan keadaan serta logik, sambil menyerahkan semua pemaparan kepada anda. Anda memanggil useReactTable, menerima instans jadual dan melelar kaedah pembantunya untuk membina penanda sendiri.

Ini bermakna tiada konflik gaya, kebebasan penuh menggunakan rangka kerja CSS dan saiz himpunan yang hanya merangkumi perkara yang anda gunakan.