docs-i18n 0.8.1 → 0.8.3

package/template/content/table/en/guides/column-definitions.md

@@ -0,0 +1,135 @@
+---
+title: Column Definitions
+description: Learn how to define and configure columns in TanStack Table
+---
+
+# Column Definitions
+
+Column definitions are the single most important part of building a table. They are responsible for defining the data model, how data is displayed, and what features each column supports.
+
+## Column Definition Types
+
+TanStack Table supports three types of column definitions:
+
+| Type | Purpose | Has data accessor? |
+|---|---|---|
+| **Accessor Columns** | Display data from your data model | Yes |
+| **Display Columns** | Render arbitrary UI (e.g., action buttons) | No |
+| **Group Columns** | Group other columns under a shared header | No |
+
+## Accessor Columns
+
+Accessor columns are the most common type. They map directly to a field in your data:
+
+```tsx
+import { createColumnHelper } from '@tanstack/react-table'
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  email: string
+}
+
+const columnHelper = createColumnHelper<Person>()
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    header: 'First Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('lastName', {
+    header: 'Last Name',
+  }),
+  columnHelper.accessor('age', {
+    header: 'Age',
+    cell: (info) => <span className="font-mono">{info.getValue()}</span>,
+  }),
+  columnHelper.accessor('email', {
+    header: 'Email',
+    cell: (info) => (
+      <a href={`mailto:${info.getValue()}`} className="text-blue-600 underline">
+        {info.getValue()}
+      </a>
+    ),
+  }),
+]
+```
+
+## Display Columns
+
+Display columns do not have a data accessor and are useful for rendering UI elements like action buttons or row selection checkboxes:
+
+```tsx
+const columns = [
+  columnHelper.display({
+    id: 'select',
+    header: ({ table }) => (
+      <input
+        type="checkbox"
+        checked={table.getIsAllRowsSelected()}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+      />
+    ),
+    cell: ({ row }) => (
+      <input
+        type="checkbox"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+      />
+    ),
+  }),
+  // ... accessor columns
+  columnHelper.display({
+    id: 'actions',
+    header: 'Actions',
+    cell: ({ row }) => (
+      <button onClick={() => handleEdit(row.original)}>Edit</button>
+    ),
+  }),
+]
+```
+
+## Column Sizing
+
+You can control column widths through the column definition:
+
+```tsx
+columnHelper.accessor('firstName', {
+  header: 'First Name',
+  size: 200,    // default column size
+  minSize: 100, // minimum column size
+  maxSize: 300, // maximum column size
+})
+```
+
+> [!NOTE]
+> Column sizes are specified in pixels. The table will attempt to respect these sizes but may adjust them based on available space and other column constraints.
+
+## Header Groups
+
+Group columns allow you to create multi-level headers:
+
+```tsx
+const columns = [
+  columnHelper.group({
+    id: 'name',
+    header: 'Name',
+    columns: [
+      columnHelper.accessor('firstName', { header: 'First' }),
+      columnHelper.accessor('lastName', { header: 'Last' }),
+    ],
+  }),
+  columnHelper.group({
+    id: 'info',
+    header: 'Info',
+    columns: [
+      columnHelper.accessor('age', { header: 'Age' }),
+      columnHelper.accessor('email', { header: 'Email' }),
+    ],
+  }),
+]
+```
+
+> [!WARNING]
+> When using group columns, make sure each group has a unique `id`. The `id` is required because group columns do not have an accessor to derive an ID from.

package/template/content/table/en/installation.md

@@ -0,0 +1,56 @@
+---
+title: Installation
+description: How to install TanStack Table in your project
+---
+
+# Installation
+
+## React
+
+```bash
+npm install @tanstack/react-table
+```
+
+```bash
+pnpm add @tanstack/react-table
+```
+
+```bash
+yarn add @tanstack/react-table
+```
+
+```bash
+bun add @tanstack/react-table
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-table
+```
+
+## Solid
+
+```bash
+npm install @tanstack/solid-table
+```
+
+## Svelte
+
+```bash
+npm install @tanstack/svelte-table
+```
+
+## Requirements
+
+- TypeScript 4.7+ (recommended)
+- React 18+ / Vue 3+ / Solid 1.6+ / Svelte 4+
+
+## Adapter Pattern
+
+TanStack Table uses an adapter pattern. The core logic lives in `@tanstack/table-core`, while framework-specific packages provide thin wrappers:
+
+```ts
+// The core is included automatically — you don't need to install it separately
+import { getCoreRowModel } from '@tanstack/react-table'
+```

package/template/content/table/en/overview.md

@@ -0,0 +1,79 @@
+---
+title: TanStack Table Overview
+description: Headless UI for building powerful tables and datagrids
+---
+
+# TanStack Table
+
+TanStack Table is a headless UI library for building powerful tables and datagrids for TS/JS, React, Vue, Solid, and Svelte.
+
+## What is "Headless" UI?
+
+Headless UI is a term for libraries and utilities that provide the logic, state, processing, and API for UI elements and interactions, but do not provide markup, styles, or pre-built implementations.
+
+## Features
+
+- **Framework Agnostic** — Core logic works with React, Vue, Solid, Svelte, and vanilla JS
+- **Sorting** — Multi-column sorting with customizable sort functions
+- **Filtering** — Column and global filtering with custom filter functions
+- **Pagination** — Client-side and server-side pagination
+- **Row Selection** — Single and multi-row selection
+- **Column Ordering & Pinning** — Reorder and pin columns
+- **Column Sizing** — Resizable columns
+- **Virtualization** — Virtual scrolling for large datasets (via TanStack Virtual)
+- **Grouping & Aggregation** — Group rows and aggregate data
+
+## Basic Example
+
+```tsx
+import { createColumnHelper, useReactTable, getCoreRowModel } from '@tanstack/react-table'
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+}
+
+const columnHelper = createColumnHelper<Person>()
+
+const columns = [
+  columnHelper.accessor('firstName', { header: 'First Name' }),
+  columnHelper.accessor('lastName', { header: 'Last Name' }),
+  columnHelper.accessor('age', { header: 'Age' }),
+]
+
+function MyTable({ data }: { data: Person[] }) {
+  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}>
+                {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>
+  )
+}
+```

package/template/content/table/en/quick-start.md

@@ -0,0 +1,112 @@
+---
+title: Quick Start
+description: Get up and running with TanStack Table
+---
+
+# Quick Start
+
+## Define Your Data
+
+Start by defining the shape of your data:
+
+```ts
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  status: 'active' | 'inactive'
+}
+
+const data: Person[] = [
+  { firstName: 'Alice', lastName: 'Johnson', age: 32, status: 'active' },
+  { firstName: 'Bob', lastName: 'Smith', age: 45, status: 'inactive' },
+  { firstName: 'Carol', lastName: 'Williams', age: 28, status: 'active' },
+]
+```
+
+## Define Columns
+
+Use the column helper for type-safe column definitions:
+
+```tsx
+import { createColumnHelper } from '@tanstack/react-table'
+
+const columnHelper = createColumnHelper<Person>()
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    header: 'First Name',
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor('lastName', {
+    header: 'Last Name',
+  }),
+  columnHelper.accessor('age', {
+    header: 'Age',
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    cell: (info) => (
+      <span className={info.getValue() === 'active' ? 'text-green-600' : 'text-red-600'}>
+        {info.getValue()}
+      </span>
+    ),
+  }),
+]
+```
+
+## Create the Table
+
+```tsx
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table'
+
+function DataTable() {
+  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}>
+                {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>
+  )
+}
+```
+
+## Adding Sorting
+
+Enable sorting by adding the sorting row model:
+
+```tsx
+import { getSortedRowModel } from '@tanstack/react-table'
+
+const table = useReactTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+})
+```

package/template/content/table/ja/installation.md

@@ -0,0 +1,56 @@
+---
+title: インストール
+description: プロジェクトに TanStack Table をインストールする方法
+---
+
+# インストール
+
+## React
+
+```bash
+npm install @tanstack/react-table
+```
+
+```bash
+pnpm add @tanstack/react-table
+```
+
+```bash
+yarn add @tanstack/react-table
+```
+
+```bash
+bun add @tanstack/react-table
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-table
+```
+
+## Solid
+
+```bash
+npm install @tanstack/solid-table
+```
+
+## Svelte
+
+```bash
+npm install @tanstack/svelte-table
+```
+
+## 必要要件
+
+- TypeScript 4.7+（推奨）
+- React 18+ / Vue 3+ / Solid 1.6+ / Svelte 4+
+
+## アダプターパターン
+
+TanStack Table はアダプターパターンを採用しています。コアロジックは `@tanstack/table-core` にあり、フレームワーク固有のパッケージが薄いラッパーを提供します：
+
+```ts
+// コアは自動的に含まれます — 別途インストールする必要はありません
+import { getCoreRowModel } from '@tanstack/react-table'
+```

package/template/content/table/ja/overview.md

@@ -0,0 +1,79 @@
+---
+title: TanStack Table 概要
+description: 強力なテーブルとデータグリッドを構築するためのヘッドレス UI
+---
+
+# TanStack Table
+
+TanStack Table は、TS/JS、React、Vue、Solid、Svelte 向けの強力なテーブルとデータグリッドを構築するためのヘッドレス UI ライブラリです。
+
+## 「ヘッドレス」UI とは？
+
+ヘッドレス UI とは、UI 要素やインタラクションのロジック、状態、処理、API を提供しますが、マークアップ、スタイル、既成の実装は提供しないライブラリやユーティリティを指す用語です。
+
+## 特徴
+
+- **フレームワーク非依存** — コアロジックは React、Vue、Solid、Svelte、バニラ JS で動作
+- **ソート** — カスタマイズ可能なソート関数によるマルチカラムソート
+- **フィルタリング** — カスタムフィルター関数によるカラム・グローバルフィルタリング
+- **ページネーション** — クライアントサイドとサーバーサイドのページネーション
+- **行選択** — 単一および複数行の選択
+- **カラムの順序変更とピン留め** — カラムの並べ替えとピン留め
+- **カラムのサイズ変更** — リサイズ可能なカラム
+- **仮想化** — 大規模データセット向けの仮想スクロール（TanStack Virtual 使用）
+- **グルーピングと集約** — 行のグループ化とデータの集約
+
+## 基本的な例
+
+```tsx
+import { createColumnHelper, useReactTable, getCoreRowModel } from '@tanstack/react-table'
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+}
+
+const columnHelper = createColumnHelper<Person>()
+
+const columns = [
+  columnHelper.accessor('firstName', { header: 'First Name' }),
+  columnHelper.accessor('lastName', { header: 'Last Name' }),
+  columnHelper.accessor('age', { header: 'Age' }),
+]
+
+function MyTable({ data }: { data: Person[] }) {
+  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}>
+                {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>
+  )
+}
+```

package/template/content/table/zh-hans/installation.md

@@ -0,0 +1,56 @@
+---
+title: 安装
+description: 如何在项目中安装 TanStack Table
+---
+
+# 安装
+
+## React
+
+```bash
+npm install @tanstack/react-table
+```
+
+```bash
+pnpm add @tanstack/react-table
+```
+
+```bash
+yarn add @tanstack/react-table
+```
+
+```bash
+bun add @tanstack/react-table
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-table
+```
+
+## Solid
+
+```bash
+npm install @tanstack/solid-table
+```
+
+## Svelte
+
+```bash
+npm install @tanstack/svelte-table
+```
+
+## 环境要求
+
+- TypeScript 4.7+（推荐）
+- React 18+ / Vue 3+ / Solid 1.6+ / Svelte 4+
+
+## 适配器模式
+
+TanStack Table 采用适配器模式。核心逻辑位于 `@tanstack/table-core` 中，而各框架包提供轻量级的封装：
+
+```ts
+// 核心会自动包含——无需单独安装
+import { getCoreRowModel } from '@tanstack/react-table'
+```

package/template/content/table/zh-hans/overview.md

@@ -0,0 +1,79 @@
+---
+title: TanStack Table 概述
+description: 用于构建强大表格和数据网格的无头 UI 库
+---
+
+# TanStack Table
+
+TanStack Table 是一个无头 UI 库，用于为 TS/JS、React、Vue、Solid 和 Svelte 构建强大的表格和数据网格。
+
+## 什么是"无头" UI？
+
+无头 UI 是指那些提供 UI 元素和交互的逻辑、状态、处理和 API，但不提供标记、样式或预构建实现的库和工具。
+
+## 特性
+
+- **框架无关** — 核心逻辑支持 React、Vue、Solid、Svelte 和原生 JS
+- **排序** — 多列排序，支持自定义排序函数
+- **筛选** — 列筛选和全局筛选，支持自定义筛选函数
+- **分页** — 客户端和服务端分页
+- **行选择** — 单行和多行选择
+- **列排序与固定** — 重新排列和固定列
+- **列大小调整** — 可调整列宽
+- **虚拟化** — 大数据集的虚拟滚动（通过 TanStack Virtual）
+- **分组与聚合** — 对行进行分组和数据聚合
+
+## 基本示例
+
+```tsx
+import { createColumnHelper, useReactTable, getCoreRowModel } from '@tanstack/react-table'
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+}
+
+const columnHelper = createColumnHelper<Person>()
+
+const columns = [
+  columnHelper.accessor('firstName', { header: 'First Name' }),
+  columnHelper.accessor('lastName', { header: 'Last Name' }),
+  columnHelper.accessor('age', { header: 'Age' }),
+]
+
+function MyTable({ data }: { data: Person[] }) {
+  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}>
+                {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>
+  )
+}
+```

package/template/content/virtual/docs.config.json

@@ -0,0 +1,18 @@
+{
+  "sections": [
+    {
+      "label": "Getting Started",
+      "children": [
+        { "label": "Overview", "to": "overview" },
+        { "label": "Installation", "to": "installation" },
+        { "label": "Quick Start", "to": "quick-start" }
+      ]
+    },
+    {
+      "label": "Guides",
+      "children": [
+        { "label": "Dynamic Sizing", "to": "guides/dynamic-sizing" }
+      ]
+    }
+  ]
+}