Sütunları Tanımlama ve Satırları Görüntüleme

TanStack Table'daki her sütun bir ColumnDef nesnesiyle tanımlanır. En önemli iki alan accessorKey (veri nesnenizdeki özellik adı) ve header (sütun etiketi dizesi veya oluşturma işlevi) alanlarıdır.

accessorKey yaklaşımı düz veriler için idealdir; karmaşık veya hesaplanmış değerler için accessorFn gerekir.

Verilerinizde name veya email gibi doğrudan bir özellik varsa accessorKey: 'name' kullanın. Bir değeri hesaplamanız gerektiğinde (örneğin firstName ve lastName değerlerini birleştirirken) accessorFn: row => row.firstName + ' ' + row.lastName kullanın.

Satır verisi genel türünü ColumnDef'e verdiğinizde her ikisinin türleri de tam olarak belirlenir.

Bir ColumnDef içindeki cell alanı, hücre bağlamını alan ve JSX döndüren bir işlev kabul eder. Rozetleri, düğmeleri, görselleri veya herhangi bir özel kullanıcı arayüzünü hücre içinde bu şekilde oluşturursunuz.

Düz metin değerleri için cell.renderValue() yeterlidir. Daha zengin içerikler için cell.getContext() içindeki bilgileri ayrıştırın.

Her oluşturmada yeniden oluşturulmalarını önlemek için columns dizinizi bileşenin dışında tanımlayın. Diziyi verileriniz ve getCoreRowModel ile birlikte useReactTable'e geçirin.

ColumnDef'i veri türünüzle belirttiğinizde TypeScript sütun türlerini çıkarır ve accessorKey değerleri için otomatik tamamlama sunar.

getCoreRowModel, @tanstack/react-table paketinden içe aktarılan bir fabrika işlevidir. Döndürülen değerini useReactTable'e geçirerek tablo örneğine veri dizinizden temel satır listesini nasıl oluşturacağını bildirirsiniz.

Ek satır modelleri (sıralanmış, filtrelenmiş ve sayfalanmış), ek model fabrikaları geçirilerek bunun üzerine katmanlanır.

table.getHeaderGroups() çağrısını yapın ve sonucu map ederek thead öğenizi oluşturun. Her başlık grubunda bir headers dizisi, her başlıkta ise bir sütun tanımı ve bir id bulunur.

Başlık içeriğinin bir dize veya JSX döndüren bir işlev olmasına bakmaksızın oluşturmak için flexRender(header.column.columnDef.header, header.getContext()) kullanın.

table.getRowModel().rows çağrısını yapın ve her satırı bir tr öğesine map edin. İçeride row.getVisibleCells() çağrısını yapın ve her hücreyi bir td öğesine map edin.

Sütunda tanımlanan özel hücre oluşturucusunu dikkate alarak hücre içeriğini oluşturmak için flexRender(cell.column.columnDef.cell, cell.getContext()) kullanın.

flexRender; bir React bileşenini, JSX döndüren bir işlevi veya düz bir değeri kabul eden ve bunları tutarlı biçimde oluşturan bir yardımcıdır. Sütun tanımlarının başlıklar ve hücreler için basit dizeler veya tam oluşturma işlevleri kullanmasına olanak tanır.

Bu birleştirilmiş API sayesinde, oluşturma işleminden önce tanımın türünü kontrol etmeniz gerekmez.

cell.renderValue(), ham erişim değerini dize olarak biçimlendirilmiş şekilde döndürür. Daha fazla denetim için cell.getContext(); satır, sütun, tablo örneği ve ham değer dahil olmak üzere oluşturmanın tüm bağlamını sağlar.

Özel hücre oluşturucuları, tek bir erişim değerinin ötesindeki ilgili satır verilerine ulaşmak için bağlamı kullanır.

Her ColumnDef, isSticky: true veya alignment: 'right' gibi keyfi üst veriler ekleyebileceğiniz bir meta alanını kabul eder. Bu verilere oluşturucunuzda column.columnDef.meta üzerinden erişin.

Sütunları sola veya sağa sabitlemek için TanStack Table, sütun nesnesinde sütun sabitleme durumu ve yardımcı yöntemler sunar.

accessorKey, header ve isteğe bağlı cell alanlarını içeren bir ColumnDef dizisi tanımlayın. useReactTable'i data, columns ve getCoreRowModel ile çağırın. Her başlığı ve hücreyi oluşturmak için flexRender kullanarak getHeaderGroups ile thead'i ve getRowModel().rows ile tbody'yi map edin.

Bu asgari kurulum size tamamen işlevsel ve tamamen özel stillendirilmiş bir tablo sunar.

Bir TanStack Table sütun tanımında accessorKey yerine accessorFn'i ne zaman kullanmalısınız?

Doğrudan alanlar için accessorKey, hesaplanmış değerler için accessorFn kullanarak sütunları ColumnDef ile tanımlayın. columns ve getCoreRowModel'i useReactTable'e geçirin, ardından başlıkları getHeaderGroups ve gövde satırlarını getRowModel().rows ile oluşturun.

flexRender yardımcı işlevi, dize tabanlı ve işlev tabanlı başlık ve hücre tanımlarının her ikisini de aynı şekilde işler.