Learn TanStack - Table Core & Basic Rendering

#Introduction

TanStack Query manages server data; TanStack Table manages how that data is displayed in rows and columns. After episode 5, you have data from a query — now it's time to present it in a table that can be sorted, filtered, and paginated.

Episode 6 builds the first table from scratch: defining columns as data, using useReactTable, rendering through flexRender, then enabling sorting, filtering, and pagination through row models.

Important to remember from episode 2: TanStack Table ships no visual styling. You render the table with plain HTML elements — this is the headless philosophy in its most tangible form.

#Defining Columns and Data

#columnHelper and Data Types

Columns are defined as data with createColumnHelper. The data type is provided as a generic so accessors are checked by TypeScript:

Data dan kolom dengan columnHelper

import { createColumnHelper } from "@tanstack/react-table"
 
type Pengguna = { id: number; nama: string; peran: string }
 
const data: Pengguna[] = [
  { id: 1, nama: "Arman", peran: "Engineer" },
  { id: 2, nama: "Dwi", peran: "Designer" },
]
 
const columnHelper = createColumnHelper<Pengguna>()
 
const columns = [
  columnHelper.accessor("id", { header: "ID" }),
  columnHelper.accessor("nama", { header: "Nama" }),
  columnHelper.accessor("peran", { header: "Peran" }),
]

createColumnHelper<Pengguna>() binds the helper to the data type, so columnHelper.accessor("nama" is validated by the compiler. header is the column label; later it can be replaced with a function or component.

#useReactTable and Row Model

#Connecting Data, Columns, and Models

useReactTable accepts data, columns, and one or more row models. The base model is getCoreRowModel:

useReactTable dengan model dasar

import { useReactTable, getCoreRowModel } from "@tanstack/react-table"
 
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})

useReactTable({ data, columns }) builds the core table. getCoreRowModel() computes the base rows. Other models — sorting, filtering, pagination — just get added to the same list.

#Rendering the Table with flexRender

#Displaying Headers and Rows

Rendering uses table.getHeaderGroups(), table.getRowModel().rows, and flexRender to evaluate the header and cell definitions:

Merender table secara manual

<table>
  <thead>
    {table.getHeaderGroups().map((hg) => (
      <tr key={hg.id}>
        {hg.headers.map((header) => (
          <th key={header.id}>
            {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>

flexRender(header.column.columnDef.header, header.getContext()) evaluates a header definition into a real element. header.getContext() and cell.getContext() carry the table state the cell needs — this is the bridge between definitions and rendered output.

#Sorting, Filtering, and Pagination

#Enabling Additional Row Models

The three basic features are enabled simply by adding models to useReactTable:

Table dengan sorting, filter, dan pagination

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})
 
const { pageIndex, pageSize } = table.getState().pagination

Models run in sequence: the core model produces rows, filtering narrows them, sorting orders them, and pagination slices them into pages. table.getState().pagination holds the active page and page size.

#Sorting and Pagination UI

Sorting is triggered by a button on the header, pagination by page navigation buttons:

Tombol sorting pada header

<button onClick={header.column.getToggleSortingHandler()}>
  {header.column.getIsSorted() === "asc" ? "Naik" : "Turun"}
</button>

Kontrol pagination

<button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
  Sebelumnya
</button>
<button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
  Berikutnya
</button>

header.column.getToggleSortingHandler() toggles the sort direction when clicked. table.previousPage() and table.nextPage() move between pages, while getCanPreviousPage and getCanNextPage disable the buttons at the edges of the range.

#Conclusion

Episode 6 completed your first table: columns defined as data with columnHelper, useReactTable combining data and row models, manual rendering with flexRender, and sorting, filtering, and pagination enabled through additional models.

Key takeaways:

• Columns are data: define them with columnHelper and a generic type.
• useReactTable combines data, columns, and row models.
• flexRender evaluates header and cell definitions into elements.
• The core model produces base rows; other models process in sequence.
• Sorting, filtering, and pagination are just a matter of adding row models.
• TanStack Table is headless: the entire look is under your control.

In the next episode, episode 7, we'll discuss routing and navigation — building a route tree with TanStack Router, nested routes and layouts, data loading with loaders, and navigation with Link and route state. You'll connect the episode 6 table to a URL that's truly navigable!