docs-i18n 0.8.1 → 0.8.2

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" }
+      ]
+    }
+  ]
+}

package/template/content/virtual/en/guides/dynamic-sizing.md

@@ -0,0 +1,129 @@
+---
+title: Dynamic Sizing
+description: Learn how to handle dynamically sized elements with TanStack Virtual
+---
+
+# Dynamic Sizing
+
+By default, TanStack Virtual assumes all items have the same size. However, many real-world use cases require items with varying heights or widths. The `measureElement` option enables dynamic sizing by measuring actual DOM elements.
+
+## Basic Dynamic Sizing
+
+To enable dynamic sizing, pass the `measureElement` function to your virtualizer and attach the provided ref to each item:
+
+```tsx
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+function DynamicList({ items }: { items: string[] }) {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 50, // estimated height in px
+    measureElement: (element) => {
+      return element.getBoundingClientRect().height
+    },
+  })
+
+  return (
+    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => (
+          <div
+            key={virtualItem.key}
+            ref={virtualizer.measureElement}
+            data-index={virtualItem.index}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            {items[virtualItem.index]}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+## Estimated Size
+
+The `estimateSize` function provides an initial size estimate before measurement occurs. A good estimate reduces layout shifts:
+
+```tsx
+const virtualizer = useVirtualizer({
+  count: 10000,
+  getScrollElement: () => parentRef.current,
+  estimateSize: (index) => {
+    // Different estimates based on item type
+    if (items[index].type === 'header') return 80
+    if (items[index].type === 'image') return 200
+    return 50
+  },
+})
+```
+
+> [!NOTE]
+> The `estimateSize` function receives the item index, so you can provide different estimates based on item data. Better estimates lead to smoother scrolling.
+
+## Performance Considerations
+
+Dynamic sizing involves DOM measurement, which can be expensive. Here are some tips:
+
+| Technique | Description |
+|---|---|
+| Good estimates | Provide accurate `estimateSize` values to minimize re-measurements |
+| Overscan | Use `overscan` to render extra items outside the viewport |
+| Stable keys | Provide stable `key` values to avoid unnecessary re-renders |
+| CSS containment | Use `contain: strict` on the scroll container for better paint performance |
+
+```tsx
+const virtualizer = useVirtualizer({
+  count: items.length,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 50,
+  overscan: 5, // Render 5 extra items on each side
+})
+```
+
+## Handling Resizes
+
+When item content can change size after initial render (e.g., images loading, accordions expanding), you need to re-measure:
+
+```tsx
+// Re-measure a specific item
+virtualizer.resizeItem(index, newSize)
+
+// Re-measure all items
+virtualizer.measure()
+```
+
+> [!WARNING]
+> Calling `measure()` on every render will cause performance issues. Only call it when you know sizes have actually changed, such as after a window resize or content update.
+
+## Horizontal Dynamic Sizing
+
+Dynamic sizing also works for horizontal lists. Use `horizontal: true` and measure width instead of height:
+
+```tsx
+const virtualizer = useVirtualizer({
+  horizontal: true,
+  count: items.length,
+  getScrollElement: () => parentRef.current,
+  estimateSize: () => 100,
+  measureElement: (element) => {
+    return element.getBoundingClientRect().width
+  },
+})
+```

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

@@ -0,0 +1,57 @@
+---
+title: Installation
+description: How to install TanStack Virtual in your project
+---
+
+# Installation
+
+## React
+
+```bash
+npm install @tanstack/react-virtual
+```
+
+```bash
+pnpm add @tanstack/react-virtual
+```
+
+```bash
+yarn add @tanstack/react-virtual
+```
+
+```bash
+bun add @tanstack/react-virtual
+```
+
+## Vue
+
+```bash
+npm install @tanstack/vue-virtual
+```
+
+## Solid
+
+```bash
+npm install @tanstack/solid-virtual
+```
+
+## Svelte
+
+```bash
+npm install @tanstack/svelte-virtual
+```
+
+## Requirements
+
+- React 18+ / Vue 3+ / Solid 1.6+ / Svelte 4+
+- A scroll container with a fixed height (or width for horizontal lists)
+
+## Bundle Size
+
+TanStack Virtual is extremely lightweight:
+
+| Package | Size (gzipped) |
+|---------|---------------|
+| `@tanstack/virtual-core` | ~2.5 KB |
+| `@tanstack/react-virtual` | ~3.5 KB |
+| `@tanstack/vue-virtual` | ~3.5 KB |

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

@@ -0,0 +1,74 @@
+---
+title: TanStack Virtual Overview
+description: Headless UI for virtualizing large element lists at 60FPS
+---
+
+# TanStack Virtual
+
+TanStack Virtual provides headless utilities for virtualizing long lists of elements. It handles the logic of which items to render based on scroll position, while you retain full control over markup and styles.
+
+## Why Virtualization?
+
+Rendering thousands of DOM nodes at once causes significant performance issues. Virtualization solves this by only rendering the items currently visible in the viewport, plus a small overscan buffer.
+
+## Features
+
+- **Framework Agnostic** — Works with React, Vue, Solid, Svelte, and vanilla JS
+- **Vertical & Horizontal** — Virtualize lists in any direction
+- **Grid Virtualization** — Combine vertical and horizontal virtualizers for grids
+- **Dynamic Row Heights** — Supports variable-size items with measurement
+- **Sticky Items** — Pin items to the top or bottom of the scroll area
+- **Scroll Restoration** — Maintain scroll position across navigation
+- **Tiny Bundle** — Under 5KB gzipped
+
+## Basic Example
+
+```tsx
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+function VirtualList() {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+
+  const virtualizer = useVirtualizer({
+    count: 10000,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+  })
+
+  return (
+    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => (
+          <div
+            key={virtualItem.key}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            Row {virtualItem.index}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+## When to Use TanStack Virtual
+
+- Lists with 100+ items
+- Tables with many rows
+- Chat/message interfaces
+- Infinite scrolling feeds
+- Any UI with dynamic, large datasets