A copyable TanStack Table 9 recipe with Minecraft cells.
Preview
Example source could not be loaded: data-table-example. Reload this page to retry.Usage
The installed generic DataTable accepts columns, data and scale. Build columns with createColumnHelper<DataTableFeatures, World>() and helper.columns. Install both data-table.tsx and data-table-features.ts; the latter defines the actual feature set.
Composition
The full world-browser example uses useTable({features,columns,data}), table.FlexRender, table.state and real column/pagination methods. It provides filtering, sorting, column visibility, page navigation and keyboard row selection. These controls are composed in the example rather than automatic DataTable props.
World browser
Example source could not be loaded: data-table-features-example. Reload this page to retry.Interaction and limits
The empty state comes from the block when no rows remain. TanStack 8 useReactTable/getCoreRowModel examples do not match this installed version. Table layout, engine state and controls are web adaptations; native claims apply to the recorded painted constituents.
See the upstream API for the underlying part and event contracts.
Installation
The World browser example also uses Button and Input. Install button and input when copying that example; the minimal DataTable example uses only the Data Table payload.
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { flexRender, useTable } from "@tanstack/react-table";
import type { CellContext, ColumnDef, RowData } from "@tanstack/react-table";
import * as React from "react";
import { MinecraftDisclosureText } from "@/components/ui/minecraft-disclosure-text";
import {
Table,
TableBody,
TableCell,
TableHead,Interactive playground
Players | |
|---|---|
Grasslands | 4 |
你好，世界 | 2 |