# Table 表格

表格可以清晰地展示二维数据。

另外我们封装了 [ProTable](/material/pro-table)，在 Tea Table 的基础上扩展了更多便捷易用的功能，内置了表格的请求，预设了常用的表头操作配置，简化了插件类型，欢迎尝试使用。

## 使用示例

### 布局示例

💡 Table 上方操作区域需用 **Table.ActionPanel** 包裹。

[Example: 布局示例](./_example/TableLayoutExample.jsx)


### 基本用法

💡 顶部提示可通过自动提示插件（[autotip](/component/table/自动提示)）处理。

[Example: 表格示例](./_example/TableExample.jsx)

## 组件属性

[Interface: TableProps](./TableProps.ts)

## 插件

> 🧰 注意，不同的插件放置顺序可能会产生不同的结果，如果遇到异常可尝试交换插件顺序

通过插件可以支持更多复杂功能，如排序、筛选、展开、滚动等。

### 插件示例

[Example: 插件](./_example/TableAddonExample.jsx)

### 复杂示例

[Example: 复杂示例](./_example/TableComplexExample.jsx)

***

## 插件 API

### 自动提示

[Example: 自动提示条](./_example/addons/TableAutoTipsExample.jsx)

[Interface: AutoTipOptions](./addons/autotip.tsx)

### 排序

[Example: 排序](./_example/addons/TableSortableExample.jsx)

[Interface: SortableOptions](./addons/sortable.tsx)

### 筛选

[Example: 筛选](./_example/addons/TableFilterableExample.jsx)

[Interface: FilterableConfig](./addons/filterable/FilterableTypes.ts)

[Interface: SingleFilterableConfig](./addons/filterable/FilterableTypes.ts)

[Interface: MultipleFilterableConfig](./addons/filterable/FilterableTypes.ts)

### 行展开

##### 自定义渲染

[Example: 行展开](./_example/addons/TableExpandableExample.jsx)

***

##### 展开为更多记录

💡 配合缩进插件（[expandable](/component/table/缩进)）支持展开行缩进样式。

[Example: 行展开](./_example/addons/TableExpandableExample2.jsx)


[Interface: ExpandableAddonOptions](./addons/expandable.tsx)

### 缩进

[Example: 缩进](./_example/addons/TableIndentableExample.jsx)

[Interface: IndentableOptions](./addons/indentable.tsx)

### 单选

[Example: 单选](./_example/addons/TableRadioableExample.jsx)

[Interface: RadioableOptions](./addons/radioable.tsx)

### 多选

[Example: 多选](./_example/addons/TableSelectableExample.jsx)

💡 多层级选择可参考插件[复杂示例](/component/table/复杂示例)。

[Interface: SelectableOptions](./addons/selectable.tsx)

### 移除

[Example: 移除](./_example/addons/TableRemoveableExample.jsx)

[Interface: RemoveableOptions](./addons/removeable.tsx)

### 滚动

#### 固定表头

通过宽高配置可设置表格的横纵向滚动，其中纵向滚动将固定表头。

[Example: 滚动](./_example/addons/TableScrollableExample.jsx)

#### 固定列

> `2.3.0` 版本支持

通过 Table `columns` 中 `fixed` 属性配合横向滚动可实现固定列。

（受样式兼容性影响，固定列会在 IE 11 下退化为横向滚动）

[Example: 滚动](./_example/addons/TableScrollableFixedExample.jsx)

#### 虚拟滚动

> `2.3.0` 版本支持

通过配置插件 `virtualizedOptions` 可开启虚拟滚动，以提高渲染大量数据时的性能。

[Example: 滚动](./_example/addons/TableScrollableVirtualizedExample.jsx)

[Interface: ScrollableAddonOptions](./addons/scrollable/scrollable.tsx)

### 行/列合并

[Example: 行/列合并](./_example/addons/TableMergeableExample.jsx)

[Interface: MergeableOptions](./addons/mergeable.tsx)

### 表头分组

> `2.5.0` 版本支持

[Example: 表头分组](./_example/addons/TableGroupableExample.jsx)

[Interface: GroupableOptions](./addons/groupable.tsx)

### 行拖拽排序

#### 内置拖拽

> `2.6.13` 版本支持

内置的拖拽排序实现，另外可通过该插件实现多层级表格拖拽排序，详见 [多层级树状拖拽](/component/table/多层级树状拖拽)。

[Example: 行拖拽排序](./_example/addons/TableLightWeightDraggableExample.jsx)

#### 第三方库拖拽

> `2.3.6` 版本支持

集成 `react-beautiful-dnd` 来实现拖拽排序。

[Example: 第三方库行拖拽排序](./_example/addons/TableDraggableExample.jsx)

[Interface: DraggableOptions](./addons/draggable/draggable.tsx)

#### 多层级树状拖拽

> `2.6.13` 版本支持

[Example: 复杂示例](./_example/addons/TableRowsDraggableExample.jsx)

[Interface: RowsDraggableOptions](./addons/draggable/rowsDraggable.tsx)

### 列拖拽排序

> `2.6.0` 版本支持

[Example: 列拖拽排序](./_example/addons/TableColumnsDraggableExample.jsx)

[Interface: ColumnsDraggableOptions](./addons/draggable/columnsDraggable.tsx)

### 列宽度调整

> `2.6.0` 版本支持

[Example: 列宽度调整](./_example/addons/TableColumnsResizableExample.jsx)

[Interface: ColumnsResizableOptions](./addons/resizable/resizable.tsx)

### 分页

#### 前端分页

前端分页时该插件与 selectable 等其他插件的前后顺序可能影响其他插件的表现行为。

[Example: 分页](./_example/addons/TablePageableExample.jsx)

#### 动态加载分页

[Example: 分页](./_example/addons/TablePageableExample2.jsx)

[Interface: PageableOptions](./addons/pageable.tsx)

### 行提示

[Example: 行提示](./_example/addons/TableRowtooltipExample.jsx)

[Interface: RowTooltipAddonOption](./addons/rowtooltip.tsx)

### 类名/样式

> 💡 行及单元格的类名/样式可使用 `injectable` 插件注入 props 进行控制。

[Example: 类名/样式](./_example/addons/TableStylizeExample.jsx)

[Interface: StylizeOption](./addons/stylize.tsx)

### props 注入

[Example: 注入](./_example/addons/TableInjectableExample.jsx)

[Interface: InjectableOptions](./addons/injectable.ts)

<!-- # 从 Tea v1 升级

- 组件名从 `TablePanel` 更名为 `Table`
- 表格行的选择，不再内置，改为从 `table/addon/selectable` 提供
- 表格行的展开，不再内置，改为从 `table/addon/expandable` 提供
- 移除 `topTipStyle` 和 `bottomTipStyle` 配置，如需配置请自行提供带样式的 tips
- 为了命名一致，`recordDisabled` 更名为 `rowDisabled` -->