TanStack Table ile Veri Tabloları Oluşturma

5 min readOct 9, 2023

TanStack Table, veri tablolarını hızlı ve esnek bir biçimde oluşturabilmemiz için tasarlanmış güçlü bir kütüphane olarak karşımıza çıkıyor. Bu yazıda, adım adım TanStack Table kullanarak nasıl veri tabloları oluşturabileceğimizi birlikte öğreneceğiz.

Neden TanStack Table’a İhtiyacımız Var?

Web uygulamalarında, verileri düzenlemek ve kullanıcılarla etkileşimli tablolar oluşturmak, birçok geliştiricinin karşılaştığı bir ihtiyaç. Bu ihtiyacı gidermek için saf HTML ile kendi tablolarımızı yazabiliriz ama bu noktada da karşımıza 2 kritik sorun çıkıyor.

Ölçeklenebilirlik: Büyük veri setleriyle çalışırken bu verinin işlenmesi ve optimize edilmesi.
Özelleştirilebilirlik: Filtreleme, sıralama, sayfalama ve hatta genişletilebilir satırlar gibi kompleks işlevlerin eklenmesi.

Saf HTML tablolarıyla bu karmaşık maddeleri çözmek ve yönetmek zaman alıcı ve zorlayıcı olabiliyor. İşte bu noktada, TanStack Table bizim ihtiyaçlarımızı tam anlamıyla karşılıyor.

TanStack Table’ın Sunduğu Özellikler

Row Selection: TanStack Table, bizler için tablo üzerindeki belirli satırları seçmemize ve o satırlar üzerinde işlem yapmamıza olanak tanır.
Sorting & Filtering: Tablo kolonları üzerinde sıralama ve filtreleme yaparak veri okunurluğunu ve yönetimini kolaylaştırır.
Pagination: Büyük veri setleriyle çalışmak bazen kafa karıştırıcı olabiliyor. Bu noktada TanStack Table, pagination hookları ile bu sorunu çözerken biz kullanıcıların da veriler arasında rahatlıkla gezinmesini sağlıyor.
Auto-managed internal state: TanStack Table, verilerin işlevsel durumunu bizler için otomatik olarak yönetir. Bu sayede daha temiz kod yazabiliriz.
Row Expansion: Tablomuzdaki belirli satırları genişletebilme ve daha fazla detay görebilme imkanı sunar. Bu, daha fazla bilgiye ulaşabilmemiz için harika bir çözüm olarak karşımıza çıkıyor.
Cell Formatters: Hücre biçimlendirme, verileri daha etkili bir şekilde sunmamıza yardımcı olur. Hücre içeriğini istediğimiz gibi özelleştirebiliriz.
Aggregation: Datalarımız üzerinde matematiksel işlemleri gerçekleştirme ihtiyacı duyduğumuz zaman TanStack Table bu konuda bize kolaylık sağlamakta ve büyük veri kümelerini daha anlamlı bir şekilde özetleyebilmemize olanak tanımakta.

TanStack Table’ın Sağladığı Performans Avantajları 🚀

TanStack Table, büyük veri setleriyle oluşturulan tablolarda dahi yüksek performans sunar. Ancak kullanıcı deneyimini daha da iyileştirmek ve performansı artırmak için Virtualized Rows gibi teknikleri de uygulayabilmemize olanak sağlar.

Lightweight (Hafif): TanStack Table, minimal boyutta tasarlanmış bir kütüphanedir. Bu da sayfanızın daha hızlı yüklenmesinin ve genel performansının artmasını sağlar
Tree-shaking: Tree-shaking, gereksiz kodları otomatik olarak çıkaran bir JavaScript optimizasyon tekniğidir. TanStack Table ile sadece projenizde kullanılan bileşenler ve fonksiyonlar derlenir, böylece uygulamanız daha hızlı ve kompakt hale gelir.
Virtualized Rows: TanStack Table, sadece ekranda görünen satırları işleyerek büyük veri kümelerini verimli bir şekilde yönetebilir. Bu çözüm, ekranda görünmeyen satırları render etmeyeceği için performansı artırır ve gereksiz yüklemeleri önler.

TanStack Table’ın Desteklediği Frameworkler

TanStack Table kütüphanesi, React, Solid, Svelte ve Vue.js gibi popüler JavaScript çerçeveleri ve kütüphaneleriyle çalışabiliyor. Bu sayede de farklı çerçeveye sahip projelerde aynı çözümleri uygulamanıza olanak sağlıyor.

React ile TanStack Table Örneği

Kurulum ⚙️

TanStack Table’ı kullanmaya başlamak oldukça basit. Gelin temel adımları beraber inceleyelim.

İlk olarak, projemize TanStack Table’ı eklememiz gerekiyor. Bu adımı aşağıdaki komutları kullanarak hızlıca yapabiliriz.

npm install @tanstack/react-table
## or
yarn add @tanstack/react-table

Şimdi, useTable ve gerektiğinde diğer özelleştirme hooklarını (örneğin; useSortBy, usePagination, vb.) kullanabileceğimiz ve pek çok sayfada çağırabileceğimiz global bir table bileşeni oluşturmaya başlayabiliriz.

import React from 'react';

import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import type { ColumnDef } from '@tanstack/react-table';

type TablePropTypes = {
  data: any[];
  columns: ColumnDef<any, any>[];
};

const Table: React.FC<TablePropTypes> = ({ data, columns }) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

Şu anda elimizde her sayfada çağırabileceğimiz ve yolladığımız proplar aracılığıyla yönetebileceğimiz basit bir table bileşeni var. Şimdi bu table bileşenine birkaç özellik ekleyelim.

1. Pagination özelliğinin eklenmesi

import React from 'react';

import { flexRender, getCoreRowModel, useReactTable, getPaginationRowModel } from '@tanstack/react-table';
import type { ColumnDef } from '@tanstack/react-table';

type TablePropTypes = {
  data: any[];
  columns: ColumnDef<any, any>[];
};

const Table: React.FC<TablePropTypes> = ({ data, columns }) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });

  return (
    <div className="p-2">
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <div className="flex gap-x-4 mt-4">
        <button className="border rounded p-1" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
          Prev
        </button>
        <button className="border rounded p-1" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
          Next
        </button>
      </div>
    </div>
  );
};

export default Table;

2. Sorting özelliğinin eklenmesi

import React, { useState } from 'react';

import { flexRender, getCoreRowModel, useReactTable, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
import type { ColumnDef, SortingState } from '@tanstack/react-table';

type TablePropTypes = {
  data: any[];
  columns: ColumnDef<any, any>[];
};

const Table: React.FC<TablePropTypes> = ({ data, columns }) => {
  const [sorting, setSorting] = useState<SortingState>([]);

  const table = useReactTable({
    data,
    columns,
    state: {
      sorting,
    },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <div className="p-2">
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th key={header.id} colSpan={header.colSpan}>
                  {header.isPlaceholder ? null : (
                    <div
                      {...{
                        className: header.column.getCanSort() ? 'cursor-pointer select-none' : '',
                        onClick: header.column.getToggleSortingHandler(),
                      }}
                    >
                      {flexRender(header.column.columnDef.header, header.getContext())}
                      {{
                        asc: '🔼',
                        desc: ' 🔽',
                      }[header.column.getIsSorted() as string] ?? null}
                    </div>
                  )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <div className="flex gap-x-4 mt-4">
        <button className="border rounded p-1" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
          Prev
        </button>
        <button className="border rounded p-1" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
          Next
        </button>
      </div>
    </div>
  );
};

export default Table;

Son olarak, oluşturduğumuz Table bileşenini bir sayfada nasıl kullanabileceğimizi gösteren basit bir örnek ile kodumuzu tamamlayalım.

import React from 'react';

import { createColumnHelper } from '@tanstack/react-table';

import { Table } from '@app/components';

type Person = {
  firstName: string;
  lastName: string;
  age: number;
};

const Persons: React.FC = () => {
  const columnHelper = createColumnHelper<Person>();

  const columns = [
    columnHelper.accessor('firstName', {
      id: 'firstName',
      cell: (info) => info.getValue(),
    }),
    columnHelper.accessor((row) => row.lastName, {
      id: 'lastName',
      header: () => <span>Last Name</span>,
      cell: (info) => <i>{info.getValue()}</i>,
    }),
    columnHelper.accessor('age', {
      id: 'age',
      header: () => 'Age',
      cell: (info) => info.renderValue(),
    }),
  ];

  const persons = [
    { firstName: 'John', lastName: 'Doe', age: 25 },
    { firstName: 'Jane', lastName: 'Smith', age: 30 },
    { firstName: 'Michael', lastName: 'Johnson', age: 22 },
    { firstName: 'Emily', lastName: 'Williams', age: 28 },
    { firstName: 'David', lastName: 'Brown', age: 35 },
    { firstName: 'Sarah', lastName: 'Jones', age: 40 },
    { firstName: 'Daniel', lastName: 'Davis', age: 32 },
    { firstName: 'Olivia', lastName: 'Miller', age: 27 },
    { firstName: 'James', lastName: 'Wilson', age: 29 },
    { firstName: 'Sophia', lastName: 'Anderson', age: 31 },
    { firstName: 'Matthew', lastName: 'Taylor', age: 24 },
    { firstName: 'Ava', lastName: 'Martinez', age: 26 },
    { firstName: 'Ethan', lastName: 'Moore', age: 33 },
    { firstName: 'Isabella', lastName: 'Garcia', age: 38 },
    { firstName: 'William', lastName: 'Lopez', age: 21 },
    { firstName: 'Mia', lastName: 'Harris', age: 34 },
    { firstName: 'Alexander', lastName: 'Clark', age: 36 },
    { firstName: 'Abigail', lastName: 'Lewis', age: 23 },
    { firstName: 'Daniel', lastName: 'Walker', age: 37 },
    { firstName: 'Chloe', lastName: 'Young', age: 39 },
  ];

  return <Table columns={columns} data={persons} />;
};

export default Persons;

Sonuç

Bu yazıda, projelerde veri tablolarımız için son derece esnek ve performanslı çözümler sunan bu kütüphane ile basit bir tablo nasıl oluşturulur bunu anlatmak istedim. Umarım bu bilgiler işinize yaramıştır.

Gelecek yazılarda görüşmek dileğiyle, teşekkürler 🙂

Merve Kocabay | Frontend Developer