Mendefinisikan Kolom dan Merender Baris

Setiap kolom dalam TanStack Table dijelaskan oleh objek ColumnDef. Dua bidang terpentingnya adalah accessorKey (nama properti pada objek data Anda) dan header (teks label kolom atau fungsi perenderan).

Pendekatan accessorKey ideal untuk data datar; nilai yang kompleks atau terhitung memerlukan accessorFn.

Jika data Anda memiliki properti langsung seperti name atau email, gunakan accessorKey: 'name'. Jika Anda perlu menghitung suatu nilai, misalnya menggabungkan firstName dan lastName, gunakan accessorFn: row => row.firstName + ' ' + row.lastName.

Keduanya memiliki tipe lengkap saat Anda memberikan tipe data baris sebagai generik kepada ColumnDef.

Bidang cell dalam ColumnDef menerima fungsi yang menerima konteks cell dan mengembalikan JSX. Dengan cara inilah Anda merender lencana, tombol, gambar, atau antarmuka pengguna kustom apa pun di dalam sel.

Untuk nilai teks biasa, cell.renderValue() sudah memadai. Untuk hal yang lebih kompleks, ambil informasi dari cell.getContext().

Tentukan kolom di luar komponen agar tidak dibuat ulang pada setiap perenderan. Teruskan larik tersebut ke useReactTable bersama data dan getCoreRowModel.

TypeScript akan menyimpulkan tipe kolom saat Anda memberi anotasi pada ColumnDef dengan tipe data Anda, sehingga Anda mendapatkan pelengkapan otomatis untuk nilai accessorKey.

getCoreRowModel adalah fungsi pabrik yang diimpor dari @tanstack/react-table. Teruskan nilai yang dikembalikannya ke useReactTable untuk memberi tahu instans tersebut cara membangun daftar baris dasar dari larik data Anda.

Model baris tambahan (terurut, tersaring, dan terpaginasikan) ditumpuk di atasnya dengan meneruskan fungsi pabrik model tambahan.

Panggil table.getHeaderGroups() dan petakan hasilnya untuk merender thead. Setiap grup tajuk memiliki larik headers; setiap header memiliki definisi kolom dan id.

Gunakan flexRender(header.column.columnDef.header, header.getContext()) untuk merender konten tajuk, baik berupa teks maupun fungsi yang mengembalikan JSX.

Panggil table.getRowModel().rows dan petakan setiap baris ke elemen tr. Di dalamnya, panggil row.getVisibleCells() dan petakan setiap cell ke td.

Gunakan flexRender(cell.column.columnDef.cell, cell.getContext()) untuk merender konten sel dengan tetap menghormati perender sel kustom apa pun yang ditentukan di kolom.

flexRender adalah pembantu yang menerima komponen React, fungsi yang mengembalikan JSX, atau nilai biasa, lalu merendernya secara konsisten. Utilitas ini memungkinkan definisi kolom menggunakan teks sederhana atau fungsi perenderan lengkap untuk tajuk dan sel.

Antarmuka terpadu ini berarti Anda tidak perlu memeriksa tipe definisi sebelum merendernya.

cell.renderValue() mengembalikan nilai mentah yang diakses, yang diformat sebagai teks. Untuk kontrol lebih besar, cell.getContext() menyediakan konteks perenderan lengkap, termasuk baris, kolom, instans tabel, dan nilai mentah.

Perender sel kustom menggunakan konteks tersebut untuk mengakses data baris terkait di luar satu nilai yang diakses.

Setiap ColumnDef menerima bidang meta tempat Anda dapat melampirkan metadata sewenang-wenang seperti isSticky: true atau alignment: 'right'. Akses metadata tersebut di perender melalui column.columnDef.meta.

Untuk menyematkan kolom ke kiri atau kanan, TanStack Table menyediakan status penyematan kolom dan metode pembantu pada objek kolom.

Tentukan larik ColumnDef dengan accessorKey, header, dan cell opsional. Panggil useReactTable dengan data, columns, dan getCoreRowModel. Petakan getHeaderGroups untuk thead dan getRowModel().rows untuk tbody, dengan menggunakan flexRender untuk merender setiap tajuk dan sel.

Penyiapan minimal ini memberi Anda tabel yang berfungsi penuh dan sepenuhnya dapat ditata sesuai keinginan.

Kapan Anda harus menggunakan accessorFn, bukan accessorKey, dalam definisi kolom TanStack Table?

Tentukan kolom menggunakan ColumnDef dengan accessorKey untuk bidang langsung atau accessorFn untuk nilai terhitung. Teruskan columns dan getCoreRowModel ke useReactTable, lalu lakukan perenderan menggunakan getHeaderGroups untuk tajuk dan getRowModel().rows untuk baris isi.

Utilitas flexRender menangani definisi tajuk dan sel berbasis teks maupun fungsi secara seragam.