Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions docs/zh-hant/api/core/cell.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
source-updated-at: '2025-03-20T21:15:29.000Z'
translation-updated-at: '2025-05-08T23:44:14.582Z'
title: 儲存格
---
這是適用於所有儲存格 (cell) 的**核心**選項與 API 屬性。更多選項與 API 屬性可參閱其他[表格功能](../guide/features)。

## 儲存格 API (Cell API)

所有儲存格物件皆具備以下屬性:

### `id`

```tsx
id: string
```

此儲存格在整個表格中的唯一識別碼 (ID)。

### `getValue`

```tsx
getValue: () => any
```

透過關聯欄位 (column) 的存取器鍵 (accessor key) 或存取器函式 (accessor function) 取得儲存格的值並回傳。

### `renderValue`

```tsx
renderValue: () => any
```

與 `getValue` 相同會回傳儲存格的值,但若找不到值時會回傳 `renderFallbackValue`。

### `row`

```tsx
row: Row<TData>
```

此儲存格所關聯的列物件 (Row object)。

### `column`

```tsx
column: Column<TData>
```

此儲存格所關聯的欄位物件 (Column object)。

### `getContext`

```tsx
getContext: () => {
table: Table<TData>
column: Column<TData, TValue>
row: Row<TData>
cell: Cell<TData, TValue>
getValue: <TTValue = TValue,>() => TTValue
renderValue: <TTValue = TValue,>() => TTValue | null
}
```

回傳儲存格型元件 (如儲存格與聚合儲存格) 的渲染上下文 (rendering context) 或屬性 (props)。可搭配您框架的 `flexRender` 工具使用這些屬性,並依照選擇的模板進行渲染:

```tsx
flexRender(cell.column.columnDef.cell, cell.getContext())
```
108 changes: 108 additions & 0 deletions docs/zh-hant/api/core/column-def.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
---
source-updated-at: '2024-03-22T01:02:38.000Z'
translation-updated-at: '2025-05-08T23:44:15.675Z'
title: 欄位定義
---
欄位定義 (ColumnDef) 是包含以下選項的純物件:

## 選項

### `id`

```tsx
id: string
```

欄位的唯一識別符。

> 🧠 在以下情況下,欄位 ID 是選填的:
>
> - 使用物件鍵存取器 (object key accessor) 建立存取器欄位時
> - 欄位標頭定義為字串時

### `accessorKey`

```tsx
accessorKey?: string & typeof TData
```

從資料列物件中提取欄位值時使用的鍵名。

### `accessorFn`

```tsx
accessorFn?: (originalRow: TData, index: number) => any
```

從每個資料列中提取欄位值時使用的存取器函式。

### `columns`

```tsx
columns?: ColumnDef<TData>[]
```

群組欄位中包含的子欄位定義。

### `header`

```tsx
header?:
| string
| ((props: {
table: Table<TData>
header: Header<TData>
column: Column<TData>
}) => unknown)
```

欄位顯示的標頭內容。若傳入字串,可作為欄位 ID 的預設值。若傳入函式,將會接收標頭的 props 物件,並應返回渲染後的標頭值(具體類型取決於使用的適配器)。

### `footer`

```tsx
footer?:
| string
| ((props: {
table: Table<TData>
header: Header<TData>
column: Column<TData>
}) => unknown)
```

欄位顯示的頁尾內容。若傳入函式,將會接收頁尾的 props 物件,並應返回渲染後的頁尾值(具體類型取決於使用的適配器)。

### `cell`

```tsx
cell?:
| string
| ((props: {
table: Table<TData>
row: Row<TData>
column: Column<TData>
cell: Cell<TData>
getValue: () => any
renderValue: () => any
}) => unknown)
```

欄位在每個資料列中顯示的儲存格內容。若傳入函式,將會接收儲存格的 props 物件,並應返回渲染後的儲存格值(具體類型取決於使用的適配器)。

### `meta`

```tsx
meta?: ColumnMeta // 此介面可透過宣告合併 (declaration merging) 擴展。見下方說明!
```

與欄位關聯的中繼資料 (meta data)。當欄位可用時,可透過 `column.columnDef.meta` 在任何地方存取此資料。此類型對所有表格都是全域的,並可透過以下方式擴展:

```tsx
import '@tanstack/react-table' // 或 vue、svelte、solid、qwik 等

declare module '@tanstack/react-table' {
interface ColumnMeta<TData extends RowData, TValue> {
foo: string
}
}
```
78 changes: 78 additions & 0 deletions docs/zh-hant/api/core/column.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
source-updated-at: '2025-03-20T21:15:29.000Z'
translation-updated-at: '2025-05-08T23:44:07.088Z'
title: 欄位
---
這些是適用於所有欄位的**核心**選項與 API 屬性。更多選項與 API 屬性可參閱其他[表格功能](../guide/features)。

## 欄位 API

所有欄位物件皆具備以下屬性:

### `id`

```tsx
id: string
```

解析後的唯一識別符,優先順序如下:

- 來自欄位定義的手動 `id` 屬性
- 來自欄位定義的存取器 (accessor) 鍵名
- 來自欄位定義的標頭字串

### `depth`

```tsx
depth: number
```

欄位的深度(若為分組欄位)相對於根欄位定義陣列。

### `accessorFn`

```tsx
accessorFn?: AccessorFn<TData>
```

解析後的存取器函式 (accessor function),用於從每列資料中提取該欄位的值。僅在欄位定義有設定有效的存取器鍵名或函式時才會定義。

### `columnDef`

```tsx
columnDef: ColumnDef<TData>
```

用於建立此欄位的原始欄位定義。

### `columns`

```tsx
type columns = ColumnDef<TData>[]
```

子欄位陣列(若該欄位為群組欄位)。若非群組欄位則為空陣列。

### `parent`

```tsx
parent?: Column<TData>
```

此欄位的父欄位。若為根欄位則為 undefined。

### `getFlatColumns`

```tsx
type getFlatColumns = () => Column<TData>[]
```

回傳此欄位及其所有子欄位/孫欄位的扁平化陣列。

### `getLeafColumns`

```tsx
type getLeafColumns = () => Column<TData>[]
```

回傳此欄位所有葉節點 (leaf-node) 欄位的陣列。若欄位無子欄位,則視為唯一的葉節點欄位。
34 changes: 34 additions & 0 deletions docs/zh-hant/api/core/header-group.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
source-updated-at: '2025-03-20T21:15:29.000Z'
translation-updated-at: '2025-05-08T23:43:55.956Z'
title: 標題群組
---
以下是所有標頭群組 (Header Group) 的**核心**選項與 API 屬性。更多選項與 API 屬性可能在其他[表格功能](../guide/features)中提供。

## 標頭群組 API (Header Group API)

所有標頭群組物件皆具有以下屬性:

### `id`

```tsx
id: string
```

標頭群組的唯一識別碼。

### `depth`

```tsx
depth: number
```

標頭群組的深度,以零為起始索引。

### `headers`

```tsx
type headers = Header<TData>[]
```

屬於此標頭群組的[標頭 (Header)](../api/core/header) 物件陣列
Loading