amis2/docs/zh-CN/components/table2.md

---
title: Table2 表格
description:
type: 0
group: ⚙ 组件
menuName: Table 表格
icon:
order: 67
---

表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。

## 基本用法

可配置表头（`title`）、表尾(`footer`)，同时支持文本或者 schema 类型。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "title": "表格标题 - ${rows.length}",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "width": 120
                },
                {
                    "title": "Version",
                    "name": "version",
                    "type": "property",
                    "items": [
                        {
                            "label": "cpu",
                            "content": "1 core"
                        },
                        {
                            "label": "memory",
                            "content": "4G"
                        },
                        {
                            "label": "disk",
                            "content": "80G"
                        },
                        {
                            "label": "network",
                            "content": "4M",
                            "span": 2
                        },
                        {
                            "label": "IDC",
                            "content": "beijing"
                        },
                        {
                            "label": "Note",
                            "content": "其它说明",
                            "span": 3
                        }
                    ]
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ],
            "footer": {
                "type": "tpl",
                "tpl": "表格Footer"
            }
        }
    ]
}
```

## 可选择

可以通过配置`rowSelection`来支持单选或者多选，也可以配置`selectable`、`multiple`结合来实现，其中`selectable`、`multiple`的优先级更高。

### 多选

可以简单将`rowSelection`设置为`true`开启多选，也可以给`rowSelection`配置更多属性，不指定`type`则默认为多选。也可以设置`selectable`为`true`，同时`multiple`设置为`true`，同样可以开启多选。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id"
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

### 点击整行选择

目前仅能通过`rowSelection.rowClick`属性来开启。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id",
                "rowClick": true
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

### 已选择

通过`rowSelection.selectedRowKeys`属性来设置表格内已选中的项，可以使用`primaryField`、`rowSelection.keyField`或者`keyField`指定数据源中用来做值匹配的字段，优先级依次递减。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id",
                "selectedRowKeys": [1, 2]
            },
            "columns": [
                {
                    "title": "ID",
                    "name": "id"
                },
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

### 已选择 - 正则表达式

还可以使用正则表达式的方式来匹配已选中的项，`rowSelection.selectedRowKeysExpr`可以配置表达式。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id",
                "selectedRowKeysExpr": "data.record.id === 1"
            },
            "columns": [
                {
                    "title": "ID",
                    "name": "id"
                },
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

### 单选

设置`rowSelection.type`为`radio`或者设置`selectable`为`true`、`multiple`为`false`来实现单选，同时可通过`rowSelection.disableOn`来控制哪一行不可选，不可选情况下默认会有禁用样式，但如果行内有除文字外的其他组件，禁用样式需要自行控制。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "rowSelection": {
                "type": "radio",
                "keyField": "id",
                "disableOn": "this.record.id === 1"
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                }
            ]
        }
    ]
}
```

### 自定义选择菜单

内置全选`all`、反选`invert`、清空`none`、选中奇数行`odd`、选中偶数行`even`，可以通过`rowSelection.selections`自行配置，超出内置功能范围的不支持，配置了也无法使用。被禁用的行不参与计算奇偶数。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id",
                "selections": [
                    {
                        "key": "all",
                        "text": "全选所有"
                    },
                    {
                        "key": "invert",
                        "text": "反选当页"
                    },
                    {
                        "key": "none",
                        "text": "清空所有"
                    },
                    {
                        "key": "odd",
                        "text": "选择奇数行"
                    },
                    {
                        "key": "even",
                        "text": "选择偶数行"
                    }
                ]
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

### 最大选择个数

可通过设置`maxKeepItemSelectionLength`控制表格可选中的最大个数。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "maxKeepItemSelectionLength": 2,
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id"
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

## 筛选和排序

通过设置`column.sorter`开启列排序，只能通过`crud2`来看实际效果。通过`column.filters`开启列筛选，支持单选、多选两种模式，同样依赖`crud2`查看实际效果。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "sorter": true,
                    "filterMultiple": true,
                    "filters": [
                        {
                            "text": "Joe",
                            "value": "Joe"
                        },
                        {
                            "text": "Jim",
                            "value": "Jim"
                        }
                    ]
                },
                {
                    "title": "Version",
                    "name": "version",
                    "sorter": true,
                    "width": 100
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "filters": [
                        {
                            "text": "Joe",
                            "value": "Joe"
                        },
                        {
                            "text": "Jim",
                            "value": "Jim"
                        }
                    ]
                }
            ]
        }
    ]
}
```

## 带边框

可通过`bordered`属性控制表格是否有边框。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "bordered": true,
            "title": "标题",
            "footer": "Footer",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

## 可展开

支持点击按钮展开/关闭当前行的自定义内容，展开按钮可放在表格的最左侧、最右侧或通过事件动作来触发展开。

### 默认展开

可简单设置`expandable`为`true`开启行展开功能，也可以在`expandable`属性上配置更多功能，`expandable.expandableOn`控制哪些行可以展开，`expandable.expandedRowKeys`控制哪些行默认展开，默认展开按钮放在表格最左侧。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ],
            "expandable": {
                "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)",
                "keyField": "id",
                "expandedRowClassNameExpr": "<%= data.rowIndex === 2 ? 'bg-success' : '' %>",
                "expandedRowKeys": ["3"],
                "type": "container",
                "body": [
                    {
                        "type": "tpl",
                        "html": "<div class=\"test\">测试测试</div>"
                    }
                ]
            }
        }
    ]
}
```

### 默认展开 - 正则表达式

也可以通过设置`expandable.expandedRowKeysExpr`使用正则表达式来控制默认展开项。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ],
            "expandable": {
                "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)",
                "keyField": "id",
                "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
                "expandedRowKeysExpr": "data.record.id == '3'",
                "type": "container",
                "body": [
                    {
                        "type": "tpl",
                        "html": "<div class=\"test\">测试测试</div>"
                    }
                ]
            }
        }
    ]
}
```

### 右侧展开按钮

通过设置`expandable.position`属性为`right`控制，支持不设置（展示在左侧）、`left`、`right`、`none`（无展开按钮）四种情况。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ],
            "expandable": {
                "expandableOn": "this.record && (this.record.id === 1 || this.record.id === 3)",
                "keyField": "id",
                "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
                "expandedRowKeys": ["3"],
                "type": "container",
                "position": "right",
                "body": [
                    {
                        "type": "tpl",
                        "html": "<div class=\"test\">测试测试</div>"
                    }
                ]
            },
            "footSummary": [
                {
                    "type": "text",
                    "text": "总计"
                },
                {
                    "type": "tpl",
                    "tpl": "测试测试",
                    "colSpan": 2
                },
                {
                    "type": "tpl",
                    "tpl": "最后一列"
                }
            ]
        }
    ]
}
```

### 无展开按钮

设置成无展开按钮形式，通过事件动作控制展开关闭，可单独行控制。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "id": "table-select",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "展开",
                    "size": "sm",
                    "onEvent": {
                        "click": {
                            "actions": [
                                {
                                    "actionType": "expand",
                                    "componentId": "table-select",
                                    "description": "展开行",
                                    "args": {
                                        "value": "${id}"
                                    }
                                }
                            ]
                        }
                    }
                }
            ],
            "expandable": {
                "keyField": "id",
                "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
                "type": "container",
                "position": "none",
                "body": [
                    {
                        "type": "tpl",
                        "html": "<div class=\"test\">测试测试</div>"
                    }
                ]
            }
        }
    ]
}
```

也可以通过正则表达式一次控制多行展开关闭。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "container",
            "style": {
                "marginBottom": "5px"
            },
            "body": [
                {
                    "type": "button",
                    "label": "展开",
                    "size": "sm",
                    "onEvent": {
                        "click": {
                            "actions": [
                                {
                                    "actionType": "expand",
                                    "componentId": "table-select2",
                                    "description": "展开行",
                                    "args": {
                                        "expandedRowsExpr": "data.record?.id === 1 || data.record?.id === 3"
                                    }
                                }
                            ]
                        }
                    }
                }
            ]
        },
        {
            "type": "table2",
            "source": "$rows",
            "id": "table-select2",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                }
            ],
            "expandable": {
                "keyField": "id",
                "expandedRowClassNameExpr": "<%= data.rowIndex % 2 ? 'bg-success' : '' %>",
                "type": "container",
                "position": "none",
                "body": [
                    {
                        "type": "tpl",
                        "html": "<div class=\"test\">测试测试</div>"
                    }
                ]
            }
        }
    ]
}
```

## 表格行/列合并

可以通过设置`column.rowSpanExpr`来实现行合并，`column.colSpanExpr`来实现列合并。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version",
                    "rowSpanExpr": "<%= data.rowIndex === 2 ? 2 : 0 %>"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Badge",
                    "name": "badgeText",
                    "colSpanExpr": "<%= data.rowIndex === 6 ? 3 : 0 %>"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

表头分组的情况下也是合并单元格，但包含分组的表头配置`column.rowSpanExpr`或者`column.colSpanExpr`无效。

```schema: scope="body"
{
  "type": "page",
  "body": [
    {
      "type": "service",
      "body": [
        {
          "type": "table2",
          "source": "$rows",
          "columns": [
            {
              "title": "key",
              "name": "key"
            },
            {
              "title": "name",
              "name": "name",
              "colSpanExpr": "${rowIndex === 1 ? 2 : 1}"
            },
            {
              "title": "age",
              "name": "age",
              "rowSpanExpr": "${rowIndex === 2 ? 1 : 0}"
            },
            {
              "title": "Home Phone",
              "name": "homephone",
              "children": [
                {
                  "title": "tel",
                  "name": "tel"
                },
                {
                  "title": "phone",
                  "name": "phone"
                }
              ]
            },
            {
              "title": "address",
              "name": "address"
            }
          ],
          "bordered": true
        }
      ],
      "data": {
        "rows": [
          {
            "key": "1",
            "name": "John Brown",
            "age": 32,
            "tel": "0571-22098909",
            "phone": 18889898989,
            "address": "New York No. 1 Lake Park"
          },
          {
            "key": "2",
            "name": "Jim Green",
            "tel": "0571-22098333",
            "phone": 18889898888,
            "age": 42,
            "address": "London No. 1 Lake Park"
          },
          {
            "key": "3",
            "name": "Joe Black",
            "age": 32,
            "tel": "0575-22098909",
            "phone": 18900010002,
            "address": "Sydney No. 1 Lake Park"
          },
          {
            "key": "4",
            "name": "Jim Red",
            "age": 18,
            "tel": "0575-22098909",
            "phone": 18900010002,
            "address": "London No. 2 Lake Park"
          },
          {
            "key": "5",
            "name": "Jake White",
            "age": 18,
            "tel": "0575-22098909",
            "phone": 18900010002,
            "address": "Dublin No. 2 Lake Park"
          }
        ]
      }
    }
  ],
  "asideResizor": false,
  "pullRefresh": {
    "disabled": true
  },
  "regions": [
    "body",
    "toolbar",
    "header"
  ]
}
```

## 固定表头

给`scroll.y`设置一个固定高度，当表格行数据超过该高度时，会自动出现滚动条。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "scroll": {"y" : 200},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

## 固定列

如果列数足够多或者设置`scroll.x`一个超出表格可视范围的宽度，表格会自动出现横向滚动条，此时可以通过`column.fixed`来固定列，保证左右滑动的时候，一些关键列始终可见。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "scroll": {"x": 1000},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "fixed": "left",
                    "width": 100
                },
                {
                    "title": "Version",
                    "name": "version",
                    "fixed": "left",
                    "width": 100
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Platform",
                    "name": "platform",
                    "fixed": "right"
                }
            ]
        }
    ]
}
```

## 固定头和列

同时设置`scroll.y`和`column.fixed`，内容超过可视范围，表格会自动出现横向、纵向滚动条，实现同时固定表头和指定列。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "scroll": {"x": 1000, "y": 200},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "fixed": "left",
                    "width": 100
                },
                {
                    "title": "Version",
                    "name": "version",
                    "type": "property",
                    "width": 400,
                    "items": [
                        {
                            "label": "cpu",
                            "content": "1 core"
                        },
                        {
                            "label": "memory",
                            "content": "4G"
                        },
                        {
                            "label": "disk",
                            "content": "80G"
                        },
                        {
                            "label": "network",
                            "content": "4M",
                            "span": 2
                        },
                        {
                            "label": "IDC",
                            "content": "beijing"
                        },
                        {
                            "label": "Note",
                            "content": "其它说明",
                            "span": 3
                        }
                    ]
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Platform",
                    "name": "platform",
                    "fixed": "right"
                }
            ]
        }
    ]
}
```

## 表头分组

通过`column.children`可以设置表头分组，实现多级表头，可以任意组合多级嵌套。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "scroll": {"y": 200},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Grade1",
                    "name": "grade1",
                    "children": [
                        {
                            "title": "Browser",
                            "name": "browser"
                        },
                        {
                            "title": "Badge",
                            "name": "badgeText",
                            "children": [
                                {
                                    "title": "ID",
                                    "name": "id"
                                }
                            ]
                        }
                    ]
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

`children`里的配置同`columns`，可以灵活组合，支持无限层级。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "scroll": {"y": 200},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Grade",
                    "name": "grade",
                    "colSpanExpr": "<%= data.rowIndex === 1 ? 3 : 0 %>"
                },
                {
                    "title": "Grade1",
                    "name": "grade1",
                    "children": [
                        {
                            "title": "Browser",
                            "name": "browser"
                        }
                    ]
                },
                {
                    "title": "Platform1",
                    "name": "platform1",
                    "children": [
                        {
                            "title": "Badge1",
                            "name": "badgeText1",
                            "children": [
                                {
                                    "title": "ID",
                                    "name": "id"
                                },
                                {
                                    "title": "Platform",
                                    "name": "platform"
                                },
                                {
                                    "title": "Badge",
                                    "name": "badgeText"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}
```

## 拖拽排序

设置`draggable`为`true`，开启手动拖动排序。

### 默认拖拽排序

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "draggable": true,
            "keyField": "id",
            "columns": [
                {
                    "title": "ID",
                    "name": "id"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Badge",
                    "name": "badgeText",
                    "children": [
                        {
                            "title": "Engine",
                            "name": "engine",
                        }
                    ]
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

### 嵌套拖拽排序

数据源嵌套情况下，仅允许同层级之间排序。

```schema: scope="body"
{
    "type": "page",
    "body": {
        "type": "service",
        "data": {
            "rows": [
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 4.0",
                    "platform": "Win 95+",
                    "version": "4",
                    "grade": "X",
                    "id": 1,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 1001,
                            "children": [
                                {
                                    "engine": "Trident",
                                    "browser": "Internet Explorer 4.0",
                                    "platform": "Win 95+",
                                    "version": "4",
                                    "grade": "X",
                                    "id": 10001
                                },
                                {
                                    "engine": "Trident",
                                    "browser": "Internet Explorer 5.0",
                                    "platform": "Win 95+",
                                    "version": "5",
                                    "grade": "C",
                                    "id": 10002
                                }
                            ]
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 1002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.0",
                    "platform": "Win 95+",
                    "version": "5",
                    "grade": "C",
                    "id": 2,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 2001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 2002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.5",
                    "platform": "Win 95+",
                    "version": "5.5",
                    "grade": "A",
                    "id": 3,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 3001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 3002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 6",
                    "platform": "Win 98+",
                    "version": "6",
                    "grade": "A",
                    "id": 4,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 4001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 4002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 7",
                    "platform": "Win XP SP2+",
                    "version": "7",
                    "grade": "A",
                    "id": 5,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 5001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 5002
                        }
                    ]
                }
            ]
        },
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "columns": [
                    {
                        "name": "engine",
                        "title": "Engine"
                    },
                    {
                        "name": "grade",
                        "title": "Grade"
                    },
                    {
                        "name": "browser",
                        "title": "Browser"
                    },
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "platform",
                        "title": "Platform"
                    }
                ],
                "keyField": "id",
                "draggable": true
            }
        ]
    }
}
```

## 总结栏

支持在表格的顶部或底部设置总结栏。

### 顶部单行

`headSummary`设置顶部导航栏，一维数组为单行，列数和表格列不一致的情况下，需要手动设置`colSpan`来保证总结栏展示和表格对应。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "scroll": {"y": 200},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ],
            "headSummary": [
                {
                    "type": "text",
                    "text": "总计"
                },
                {
                    "type": "tpl",
                    "tpl": "测试测试",
                    "colSpan": 5
                }
            ],
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id"
            }
        }
    ]
}
```

### 顶部多行

`headSummary`设置为二维数组实现顶部多行。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "scroll": {"y": 200},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ],
            "headSummary": [
                [
                    {
                        "type": "text",
                        "text": "总计"
                    },
                    {
                        "type": "tpl",
                        "tpl": "测试测试",
                        "colSpan": 5
                    }
                ],
                [
                    {
                        "type": "text",
                        "text": "总结",
                        "colSpan": 6
                    }
                ]
            ],
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id"
            }
        }
    ]
}
```

### 尾部单行

`footSummary`设置尾部总结行，格式同`headSummary`。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "bordered": true,
            "scroll": {"y": 200, "x": 1000},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "fixed": "left"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ],
            "footSummary": [
                {
                    "type": "text",
                    "text": "总计",
                    "fixed": 'left'
                },
                {
                    "type": "tpl",
                    "tpl": "测试测试",
                    "colSpan": 5
                }
            ]
        }
    ]
}
```

### 尾部多行

如果二维数组中出现了非数组，那么认为是第一行的数据追加进去。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=10",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "bordered": true,
            "scroll": {"y": 200, "x": 1000},
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "fixed": "left"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Grade",
                    "name": "grade"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ],
            "footSummary": [
                {
                    "type": "text",
                    "text": "总计",
                    "colSpan": 6
                },
                [
                    {
                        "type": "tpl",
                        "tpl": "测试测试",
                        "colSpan": 5
                    },
                    {
                        "type": "text",
                        "text": "总结",
                        "colSpan": 1
                    }
                ]
            ]
        }
    ]
}
```

## 调整列宽

通过设置`resizable`为`true`开启列宽调整功能，开启后可以手动拖动来调整某一列的宽度。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "scroll": {"x": 1000},
            "resizable": true,
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "width": 200,
                    "align": "center"
                },
                {
                    "title": "Version",
                    "name": "version",
                    "width": 200,
                    "align": "right"
                },
                {
                    "title": "Grade",
                    "name": "grade",
                    "width": 200
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "width": 200
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

## 自定义列

### 默认

可简单设置`columnsTogglable`为`true`快速开启自定义列功能，适用于列数较多的情况，可以手动控制展示或隐藏一些列。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columnsTogglable": true,
            "title": "表格的标题",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "width": 200
                },
                {
                    "title": "Version",
                    "name": "version",
                    "width": 200
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "width": 200,
                    "children": [
                        {
                            "title": "Grade",
                            "name": "grade",
                            "width": 200
                        }
                    ]
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

### 自定义图标

如果默认的自定义列图标不能满足需求，可以通过设置`columnsTogglable.icon`来自定义图标。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columnsTogglable": {
                "icon": "fa fa-user"
            },
            "title": "表格的标题",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "width": 200
                },
                {
                    "title": "Version",
                    "name": "version",
                    "width": 200
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "width": 200,
                    "children": [
                        {
                            "title": "Grade",
                            "name": "grade",
                            "width": 200
                        }
                    ]
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

## 数据为空

可以通过`placeholder`自定义数据为空时的展示内容，支持文本或者 schema 类型。

```schema
{
    "type": "table2",
    "data": {
        "items": []
    },
    "columns": [
        {
            "title": "Engine",
            "name": "engine",
            "width": 200
        },
        {
            "title": "Version",
            "name": "version",
            "width": 200
        },
        {
            "title": "Browser",
            "name": "browser",
            "width": 200,
            "children": [
                {
                    "title": "Grade",
                    "name": "grade",
                    "width": 200
                }
            ]
        },
        {
            "title": "Platform",
            "name": "platform",
            "children": [
                {
                    "title": "Badge",
                    "name": "badgeText"
                }
            ]
        }
    ],
    "placeholder": "暂无数据"
}
```

## 数据加载中

可以通过`loading`自定义数据加载时的展示内容，支持布尔或者 schema 类型。

```schema
{
    "type": "table2",
    "data": {
        "items": []
    },
    "columns": [
        {
            "title": "Engine",
            "name": "engine",
            "width": 200
        },
        {
            "title": "Version",
            "name": "version",
            "width": 200
        },
        {
            "title": "Browser",
            "name": "browser",
            "width": 200,
            "children": [
                {
                    "title": "Grade",
                    "name": "grade",
                    "width": 200
                },
                {
                    "title": "Badge",
                    "name": "badgeText",
                    "children": [
                        {
                            "title": "Platform",
                            "name": "platform"
                        }
                    ]
                }
            ]
        }
    ],
    "loading": true
}
```

## 树形结构

当行数据中存在 children 属性时，可以自动嵌套显示下去。也可以通过设置 childrenColumnName 进行配置。

### 默认嵌套

```schema: scope="body"
{
    "type": "page",
    "body": {
        "type": "service",
        "data": {
            "rows": [
                {
                    "engine": "Trident1",
                    "browser": "Internet Explorer 4.0",
                    "platform": "Win 95+",
                    "version": "4",
                    "grade": "X",
                    "id": 1,
                    "children": [
                        {
                            "engine": "Trident1-1",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 1001,
                            "children": [
                                {
                                    "engine": "Trident1-1-1",
                                    "browser": "Internet Explorer 4.0",
                                    "platform": "Win 95+",
                                    "version": "4",
                                    "grade": "X",
                                    "id": 10001
                                },
                                {
                                    "engine": "Trident1-1-2",
                                    "browser": "Internet Explorer 5.0",
                                    "platform": "Win 95+",
                                    "version": "5",
                                    "grade": "C",
                                    "id": 10002
                                }
                            ]
                        },
                        {
                            "engine": "Trident1-2",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 1002
                        }
                    ]
                },
                {
                    "engine": "Trident2",
                    "browser": "Internet Explorer 5.0",
                    "platform": "Win 95+",
                    "version": "5",
                    "grade": "C",
                    "id": 2,
                    "children": [
                        {
                            "engine": "Trident2-1",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 2001
                        },
                        {
                            "engine": "Trident2-2",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 2002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.5",
                    "platform": "Win 95+",
                    "version": "5.5",
                    "grade": "A",
                    "id": 3,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 3001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 3002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 6",
                    "platform": "Win 98+",
                    "version": "6",
                    "grade": "A",
                    "id": 4,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 4001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 4002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 7",
                    "platform": "Win XP SP2+",
                    "version": "7",
                    "grade": "A",
                    "id": 5,
                    "children":[
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 5001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 5002
                        }
                    ]
                }
            ]
        },
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "columns": [
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "engine",
                        "title": "Engine"
                    },
                    {
                        "name": "grade",
                        "title": "Grade"
                    },
                    {
                        "name": "version",
                        "title": "Version"
                    },
                    {
                        "name": "browser",
                        "title": "Browser"
                    },
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "platform",
                        "title": "Platform"
                    }
                ],
                "keyField": "id"
            }
        ]
    }
}
```

### 多选嵌套

嵌套模式下表格支持多选的同时支持级联选中。

```schema: scope="body"
{
    "type": "page",
    "body": {
        "type": "service",
        "data": {
            "rows": [
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 4.0",
                    "platform": "Win 95+",
                    "version": "4",
                    "grade": "X",
                    "id": 1,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 1001,
                            "children": [
                                {
                                    "engine": "Trident",
                                    "browser": "Internet Explorer 4.0",
                                    "platform": "Win 95+",
                                    "version": "4",
                                    "grade": "X",
                                    "id": 10001
                                },
                                {
                                    "engine": "Trident",
                                    "browser": "Internet Explorer 5.0",
                                    "platform": "Win 95+",
                                    "version": "5",
                                    "grade": "C",
                                    "id": 10002
                                }
                            ]
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 1002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.0",
                    "platform": "Win 95+",
                    "version": "5",
                    "grade": "C",
                    "id": 2,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 2001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 2002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.5",
                    "platform": "Win 95+",
                    "version": "5.5",
                    "grade": "A",
                    "id": 3,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 3001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 3002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 6",
                    "platform": "Win 98+",
                    "version": "6",
                    "grade": "A",
                    "id": 4,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 4001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 4002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 7",
                    "platform": "Win XP SP2+",
                    "version": "7",
                    "grade": "A",
                    "id": 5,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 5001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 5002
                        }
                    ]
                }
            ]
        },
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "columns": [
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "engine",
                        "title": "Engine"
                    },
                    {
                        "name": "grade",
                        "title": "Grade"
                    },
                    {
                        "name": "version",
                        "title": "Version"
                    },
                    {
                        "name": "browser",
                        "title": "Browser"
                    },
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "platform",
                        "title": "Platform"
                    }
                ],
                "keyField": "id",
                "rowSelection": {
                    "type": "checkbox",
                    "keyField": "id"
                }
            }
        ]
    }
}
```

### 单选嵌套

单选情况下，不同层级之间都是互斥选择。

```schema: scope="body"
{
    "type": "page",
    "body": {
        "type": "service",
        "data": {
            "rows": [
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 4.0",
                    "platform":  "Win 95+",
                    "version": "4",
                    "grade": "X",
                    "id": 1,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 1001,
                            "children": [
                                {
                                    "engine": "Trident",
                                    "browser": "Internet Explorer 4.0",
                                    "platform": "Win 95+",
                                    "version": "4",
                                    "grade": "X",
                                    "id": 10001
                                },
                                {
                                    "engine": "Trident",
                                    "browser": "Internet Explorer 5.0",
                                    "platform": "Win 95+",
                                    "version": "5",
                                    "grade": "C",
                                    "id": 10002
                                }
                            ]
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 1002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.0",
                    "platform": "Win 95+",
                    "version": "5",
                    "grade": "C",
                    "id": 2,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 2001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 2002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.5",
                    "platform": "Win 95+",
                    "version": "5.5",
                    "grade": "A",
                    "id": 3,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 3001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 3002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 6",
                    "platform": "Win 98+",
                    "version": "6",
                    "grade": "A",
                    "id": 4,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 4001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 4002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 7",
                    "platform": "Win XP SP2+",
                    "version": "7",
                    "grade": "A",
                    "id": 5,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 5001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 5002
                        }
                    ]
                }
            ]
        },
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "columns": [
                    {
                        "name": "engine",
                        "title": "Engine"
                    },
                    {
                        "name": "grade",
                        "title": "Grade"
                    },
                    {
                        "name": "version",
                        "title": "Version"
                    },
                    {
                        "name": "browser",
                        "title": "Browser"
                    },
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "platform",
                        "title": "Platform"
                    }
                ],
                "keyField": "id",
                "rowSelection": {
                    "type": "radio",
                    "keyField": "id"
                }
            }
        ]
    }
}
```

### 缩进设置

嵌套模式下可以通过`indentSize`来设置每一层级的缩进值。

```schema: scope="body"
{
    "type": "page",
    "body": {
        "type": "service",
        "data":{
            "rows": [
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 4.0",
                    "platform": "Win 95+",
                    "version": "4",
                    "grade": "X",
                    "id": 1,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 1001,
                            "children": [
                                {
                                    "engine": "Trident",
                                    "browser": "Internet Explorer 4.0",
                                    "platform": "Win 95+",
                                    "version": "4",
                                    "grade": "X",
                                    "id": 10001
                                },
                                {
                                    "engine": "Trident",
                                    "browser": "Internet Explorer 5.0",
                                    "platform": "Win 95+",
                                    "version": "5",
                                    "grade": "C",
                                    "id": 10002
                                }
                            ]
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 1002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.0",
                    "platform": "Win 95+",
                    "version": "5",
                    "grade": "C",
                    "id": 2,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 2001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 2002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 5.5",
                    "platform": "Win 95+",
                    "version": "5.5",
                    "grade": "A",
                    "id": 3,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 3001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 3002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 6",
                    "platform": "Win 98+",
                    "version": "6",
                    "grade": "A",
                    "id": 4,
                    "children": [
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id": 4001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id": 4002
                        }
                    ]
                },
                {
                    "engine": "Trident",
                    "browser": "Internet Explorer 7",
                    "platform": "Win XP SP2+",
                    "version": "7",
                    "grade": "A",
                    "id":5,
                    "children":[
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 4.0",
                            "platform": "Win 95+",
                            "version": "4",
                            "grade": "X",
                            "id":5001
                        },
                        {
                            "engine": "Trident",
                            "browser": "Internet Explorer 5.0",
                            "platform": "Win 95+",
                            "version": "5",
                            "grade": "C",
                            "id":5002
                        }
                    ]
                }
            ]
        },
        "body":[
            {
                "type": "table2",
                "source": "$rows",
                "columns":[
                    {
                        "name": "engine",
                        "title": "Engine"
                    },
                    {
                        "name": "grade",
                        "title": "Grade"
                    },
                    {
                        "name": "version",
                        "title": "Version"
                    },
                    {
                        "name": "browser",
                        "title": "Browser"
                    },
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "platform",
                        "title": "Platform"
                    }
                ],
                "keyField": "id",
                "rowSelection":{
                    "type": "checkbox",
                    "keyField": "id"
                },
                "indentSize": 20
            }
        ]
    }
}
```

## 列搜索

通过设置`column.searchable`为`true`快速开启列搜索功能。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "width": 200
                },
                {
                    "title": "Version",
                    "name": "version",
                    "width": 200,
                    "searchable": true
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "width": 200,
                    "children": [
                        {
                            "title": "Grade",
                            "name": "grade",
                            "width": 200
                        }
                    ]
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

## 粘性头部

设置`sticky`为`true`开启粘性头部。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "title": "表格的标题",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "width": 200
                },
                {
                    "title": "Version",
                    "name": "version",
                    "width": 200
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "width": 200,
                    "children": [
                        {
                            "title": "Grade",
                            "name": "grade",
                            "width": 200
                        }
                    ]
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ],
            "sticky": true
        }
    ]
}
```

## 表格尺寸

通过设置`size`属性来控制表格尺寸，支持`large`、`default`、`small`，`default`是中等尺寸。

### 最大尺寸

`large`是最大尺寸。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "size": "large",
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id"
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "sorter": true,
                    "tpl": "${engine|truncate:5}"
                },
                {
                    "title": "Version",
                    "name": "version",
                    "sorter": true,
                    "filterMultiple": true,
                    "filters": [
                        {
                            "text": "Joe",
                            "value": "Joe"
                        },
                        {
                            "text": "Jim",
                            "value": "Jim"
                        }
                    ]
                },
                {
                    "type": "tpl",
                    "title": "Browser",
                    "name": "browser",
                    "tpl": "${browser|truncate:5}",
                    "searchable": true
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ],
            "footSummary": [
                {
                    "type": "text",
                    "text": "总计",
                    "fixed": "left"
                },
                {
                    "type": "tpl",
                    "tpl": "测试测试",
                    "colSpan": 5
                }
            ]
        }
    ]
}
```

### 默认尺寸

默认尺寸是`default`，即中等尺寸。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id"
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "sorter": true,
                    "tpl": "${engine|truncate:5}"
                },
                {
                    "title": "Version",
                    "name": "version",
                    "sorter": true,
                    "filterMultiple": true,
                    "filters": [
                        {
                            "text": "Joe",
                            "value": "Joe"
                        },
                        {
                            "text": "Jim",
                            "value": "Jim"
                        }
                    ]
                },
                {
                    "type": "tpl",
                    "title": "Browser",
                    "name": "browser",
                    "tpl": "${engine|truncate:5}",
                    "searchable": true
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ],
            "footSummary": [
                {
                    "type": "text",
                    "text": "总计",
                    "fixed": "left"
                },
                {
                    "type": "tpl",
                    "tpl": "测试测试",
                    "colSpan": 5
                }
            ]
        }
    ]
}
```

### 小尺寸

`size`设置为`small`是最小尺寸。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "size": "small",
            "rowSelection": {
                "type": "checkbox",
                "keyField": "id"
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "sorter": true,
                    "tpl": "${engine|truncate:5}"
                },
                {
                    "title": "Version",
                    "name": "version",
                    "sorter": true,
                    "filterMultiple": true,
                    "filters": [
                        {
                            "text": "Joe",
                            "value": "Joe"
                        },
                        {
                            "text": "Jim",
                            "value": "Jim"
                        }
                    ]
                },
                {
                    "type": "tpl",
                    "title": "Browser",
                    "name": "browser",
                    "tpl": "${engine|truncate:5}",
                    "searchable": true
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ],
            "footSummary": [
                {
                    "type": "text",
                    "text": "总计",
                    "fixed": "left"
                },
                {
                    "type": "tpl",
                    "tpl": "测试测试",
                    "colSpan": 5
                }
            ]
        }
    ]
}
```

## 可复制

给列配置`copyable`属性即可开启列内容复制功能。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "title": "表格的标题",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine",
                    "width": 200
                },
                {
                    "title": "Version",
                    "name": "version",
                    "copyable": true
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "width": 200
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

## 弹出框

可以给列配置上`popOver`属性，默认会在该列内容区里渲染一个图标，点击会显示弹出框，用于展示全部内容。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "copyable": true,
                    "popOver": {
                        "body": {
                            "type": "tpl",
                            "tpl": "详细信息：${browser}"
                        }
                    }
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

也可以设置图标不展示，结合`truncate`实现内容自动省略，其余可点击/悬浮查看更多。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "type": "tpl",
                    "title": "Browser",
                    "name": "browser",
                    "tpl": "${engine|truncate:5}",
                    "popOver": {
                        "trigger": "hover",
                        "position": "left-top",
                        "showIcon": false,
                        "body": {
                            "type": "tpl",
                            "tpl": "${browser}"
                        }
                    }
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

可以给列配置`popOverEnableOn`属性，该属性为表达式，来控制当前行是否启动`popOver`功能。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=6",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "ID",
                    "name": "id",
                    "popOver": {
                        "body": {
                            "type": "tpl",
                            "tpl": "${id}"
                        }
                    },
                    "popOverEnableOn": "this.id == 1"
                },
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                },
                {
                    "title": "Browser",
                    "name": "browser",
                    "popOver": {
                        "body": {
                            "type": "tpl",
                            "tpl": "${browser}"
                        }
                    }
                },
                {
                    "title": "Badge",
                    "name": "badgeText"
                },
                {
                    "title": "Platform",
                    "name": "platform"
                }
            ]
        }
    ]
}
```

## 行角标

通过属性`itemBadge`，可以为表格行配置[角标](./badge)，可以使用[数据映射](../../../docs/concepts/data-mapping)为每一行添加特定的 Badge 属性。[`visibleOn`](../../../docs/concepts/expression)属性控制显示的条件，表达式中`this`可以取到行所在上下文的数据，比如行数据中有`badgeText`字段才显示角标，可以设置`"visibleOn": "this.badgeText"`。

```schema: scope="body"
{
  "type": "service",
  "body": {
    "type": "table2",
    "source": "${table}",
    "syncLocation": false,
    "showBadge": true,
    "itemBadge": {
      "text": "${badgeText}",
      "mode": "ribbon",
      "position": "top-left",
      "level": "${badgeLevel}",
      "visibleOn": "this.badgeText"
    },
    "columns": [
        {
            "name": "id",
            "title": "ID",
            "searchable": {
              "type": "input-text",
              "name": "id",
              "label": "主键",
              "placeholder": "输入id",
              "size": "sm",
            }
        },
        {
            "name": "engine",
            "title": "Rendering engine"
        },
        {
            "name": "browser",
            "title": "Browser",
            "searchable": {
              "type": "select",
              "name": "browser",
              "label": "浏览器",
              "placeholder": "选择浏览器",
              "size": "sm",
              "options": [
                {
                  "label": "Internet Explorer ",
                  "value": "ie"
                },
                {
                  "label": "AOL browser",
                  "value": "aol"
                },
                {
                  "label": "Firefox",
                  "value": "firefox"
                }
              ]
            }
        },
        {
            "name": "platform",
            "title": "Platform(s)"
        },
        {
            "name": "version",
            "title": "Engine version",
            "searchable": {
              "type": "input-number",
              "name": "version",
              "label": "版本号",
              "placeholder": "输入版本号",
              "size": "sm",
              "mode": "horizontal"
            }
        },
        {
            "name": "grade",
            "title": "CSS grade"
        }
    ]
  },
  data: {
    table: [
      {
        "id": 1,
        "engine": "Trident",
        "browser": "Internet Explorer 4.0",
        "platform": "Win 95+",
        "version": "4",
        "grade": "X",
        "badgeText": "默认",
        "badgeLevel": "info"
      },
      {
        "id": 2,
        "engine": "Trident",
        "browser": "Internet Explorer 5.0",
        "platform": "Win 95+",
        "version": "5",
        "grade": "C",
        "badgeText": "危险",
        "badgeLevel": "danger"
      },
      {
        "id": 3,
        "engine": "Trident",
        "browser": "Internet Explorer 5.5",
        "platform": "Win 95+",
        "version": "5.5",
        "grade": "A"
      },
      {
        "id": 4,
        "engine": "Trident",
        "browser": "Internet Explorer 6",
        "platform": "Win 98+",
        "version": "6",
        "grade": "A"
      },
      {
        "id": 5,
        "engine": "Trident",
        "browser": "Internet Explorer 7",
        "platform": "Win XP SP2+",
        "version": "7",
        "grade": "A"
      }
    ]
  }
}
```

## 表头提示

通过设置列属性`remark`，可为每一列的表头增加提示信息。

```schema: scope="body"
{
  "type": "page",
  "body": {
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
      {
        "type": "table2",
        "source": "$rows",
        "columns": [
          {
            "title": "Engine",
            "name": "engine",
            "remark": "表头提示"
          },
          {
            "title": "Version",
            "name": "version"
          },
          {
            "title": "Browser",
            "name": "browser"
          },
          {
            "title": "Badge",
            "name": "badgeText"
          },
          {
            "title": "Grade",
            "name": "grade"
          },
          {
            "title": "Platform",
            "name": "platform"
          }
        ]
      }
    ]
  }
}
```

## 快速编辑

可以通过给列配置：`"quickEdit": true`，Table 配置：`quickSaveApi`，可以实现表格内快速编辑并批量保存的功能。

```schema: scope="body"
{
  "type": "page",
  "body": {
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
      {
        "type": "table2",
        "source": "$rows",
        "quickSaveApi": {
            "url": "/api/mock2/sample/bulkUpdate",
            "method": "put"
        },
        "columns": [
          {
            "title": "Engine",
            "name": "engine",
            "quickEdit": true
          },
          {
            "title": "Version",
            "name": "version"
          },
          {
            "title": "Browser",
            "name": "browser"
          },
          {
            "title": "Badge",
            "name": "badgeText"
          }
        ]
      }
    ]
  }
}
```

#### 指定编辑表单项类型

`quickEdit`也可以配置对象形式，可以指定编辑表单项的类型，例如`"type": "select"`。

```schema: scope="body"
{
  "type": "page",
  "body": {
        "type": "service",
        "api": "/api/sample?perPage=5",
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "quickSaveApi": {
                    "url": "/api/mock2/sample/bulkUpdate",
                    "method": "put"
                },
                "columns": [
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "grade",
                        "title": "CSS grade",
                        "quickEdit": {
                            "type": "select",
                            "options": [
                                "A",
                                "B",
                                "C",
                                "D",
                                "X"
                            ]
                        }
                    }
                ]
            }
        ]
    }
}
```

#### 快速编辑多个表单项

```schema: scope="body"
{
  "type": "page",
  "body": {
        "type": "service",
        "api": "/api/sample?perPage=5",
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "quickSaveApi": {
                    "url": "/api/mock2/sample/bulkUpdate",
                    "method": "put"
                },
                "columns": [
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "grade",
                        "title": "CSS grade",
                        "quickEdit": {
                            "body": [
                                {
                                    "type": "select",
                                    "name": "grade",
                                    "options": [
                                        "A",
                                        "B",
                                        "C",
                                        "D",
                                        "X"
                                    ]
                                },

                                {
                                    "label": "id",
                                    "type": "input-text",
                                    "name": "id"
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    }
}
```

#### 内联模式

配置`quickEdit`的`mode`为`inline`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。

```schema: scope="body"
{
  "type": "page",
  "body": {
        "type": "service",
        "api": "/api/sample?perPage=5",
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "quickSaveApi": {
                    "url": "/api/mock2/sample/bulkUpdate",
                    "method": "put"
                },
                "columns": [
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "grade",
                        "title": "CSS grade",
                        "quickEdit": {
                            "mode": "inline",
                            "type": "select",
                            "size": "xs",
                            "options": [
                                "A",
                                "B",
                                "C",
                                "D",
                                "X"
                            ]
                        }
                    },
                    {
                        "name": "switch",
                        "title": "switch",
                        "quickEdit": {
                            "mode": "inline",
                            "type": "switch",
                            "onText": "开启",
                            "offText": "关闭"
                        }
                    }
                ]
            }
        ]
    }
}
```

#### 即时保存

如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置 `quickEdit` 中的 `"saveImmediately": true`，然后配置接口`quickSaveItemApi`，可以直接将编辑表单项渲染至表格内操作。

```schema: scope="body"
{
  "type": "page",
  "body": {
        "type": "service",
        "api": "/api/sample?perPage=5",
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "quickSaveItemApi": {
                    "url": "/api/mock2/sample/$id",
                    "method": "put"
                },
                "columns": [
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "grade",
                        "title": "CSS grade",
                        "quickEdit": {
                            "mode": "inline",
                            "type": "select",
                            "size": "xs",
                            "options": [
                                "A",
                                "B",
                                "C",
                                "D",
                                "X"
                            ],
                            "saveImmediately": true
                        }
                    },
                    {
                        "name": "switch",
                        "title": "switch",
                        "quickEdit": {
                            "mode": "inline",
                            "type": "switch",
                            "onText": "开启",
                            "offText": "关闭",
                            "saveImmediately": true
                        }
                    }
                ]
            }
        ]
    }
}
```

你也可以在`saveImmediately`中配置 api，实现即时保存。

```schema: scope="body"
{
  "type": "page",
  "body": {
        "type": "service",
        "api": "/api/sample?perPage=5",
        "body": [
            {
                "type": "table2",
                "source": "$rows",
                "columns": [
                    {
                        "name": "id",
                        "title": "ID"
                    },
                    {
                        "name": "grade",
                        "title": "CSS grade",
                        "quickEdit": {
                            "mode": "inline",
                            "type": "select",
                            "size": "xs",
                            "options": [
                                "A",
                                "B",
                                "C",
                                "D",
                                "X"
                            ],
                            "saveImmediately": {
                                "api": "/api/mock2/sample/$id"
                            }
                        }
                    },
                    {
                        "name": "switch",
                        "title": "switch",
                        "quickEdit": {
                            "mode": "inline",
                            "type": "switch",
                            "onText": "开启",
                            "offText": "关闭",
                            "saveImmediately": {
                                "api": "/api/mock2/sample/$id"
                            }
                        }
                    }
                ]
            }
        ]
    }
}
```

## 列样式

可以通过设置`columns`中的`className`控制整列样式。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version",
                    "className": "text-primary"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

也可以通过`titleClassName`单独控制表头对应单元格的样式。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version",
                    "className": "text-primary",
                    "titleClassName": "font-bold"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

## 单元格样式

可以通过设置`columns`的`classNameExpr`，根据数据动态添加单元格 CSS 类，支持模版语法。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version",
                    "classNameExpr": "<%= data.version > 5 ? 'text-danger' : '' %>"
                },
                {
                    "title": "Browser",
                    "name": "browser"
                },
                {
                    "title": "Operation",
                    "name": "operation",
                    "type": "button",
                    "label": "删除",
                    "size": "sm"
                }
            ]
        }
    ]
}
```

## 行操作按钮

通过设置`itemActions`可以设置鼠标移动到行上出现操作按钮。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=5",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "itemActions": [
                {
                    "label": "编辑",
                    "type": "button",
                    "actionType": "dialog",
                    "dialog": {
                        "title": "编辑",
                        "body": "这是个简单的编辑弹框"
                    }
                },
                {
                    "label": "删除",
                    "type": "button",
                    "actionType": "ajax",
                    "confirmText": "确认要删除？",
                    "api": "/api/mock2/form/saveForm"
                }
            ],
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                }
            ]
        }
    ]
}
```

固定表头情况下，展示行操作按钮。

```schema: scope="body"
{
    "type": "service",
    "api": "/api/sample?perPage=20",
    "body": [
        {
            "type": "table2",
            "source": "$rows",
            "itemActions": [
                {
                    "label": "编辑",
                    "type": "button",
                    "actionType": "dialog",
                    "dialog": {
                        "title": "编辑",
                        "body": "这是个简单的编辑弹框"
                    }
                },
                {
                    "label": "删除",
                    "type": "button",
                    "actionType": "ajax",
                    "confirmText": "确认要删除？",
                    "api": "/api/mock2/form/saveForm"
                }
            ],
            "scroll": {
                "y": 100
            },
            "columns": [
                {
                    "title": "Engine",
                    "name": "engine"
                },
                {
                    "title": "Version",
                    "name": "version"
                }
            ]
        }
    ]
}
```

## 属性表

| 属性名           | 类型                                                     | 默认值                    | 说明                                                                      |
| ---------------- | -------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------- |
| type             | `string`                                                 |                           | `"type"` 指定为 table 渲染器                                              |
| title            | `string`                                                 |                           | 标题                                                                      |
| source           | `string`                                                 | `${items}`                | 数据源, 绑定当前环境变量                                                  |
| sticky           | `boolean`                                                | `false`                   | 是否粘性头部                                                              |
| footer           | `string` \| `Schema`                                     |                           | 表格尾部                                                                  |
| loading          | `boolean`                                                |                           | 表格是否加载中                                                            |
| columnsTogglable | `auto` 或者 `boolean`                                    | `auto`                    | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启                   |
| placeholder      | `string` \| `Schema`                                     | `暂无数据`                | 当没数据的时候的文字提示                                                  |
| rowSelection     | `rowSelection`                                           |                           | 行相关配置                                                                |
| rowClassNameExpr | `string`                                                 |                           | 行 CSS 类名，支持模版语法                                                 |
| expandable       | `Expandable`                                             |                           | 展开行配置                                                                |
| lineHeight       | `large` \| `middle`                                      |                           | 行高设置                                                                  |
| footerClassName  | `string`                                                 | `Action.md-table-footer`  | 底部外层 CSS 类名                                                         |
| toolbarClassName | `string`                                                 | `Action.md-table-toolbar` | 工具栏 CSS 类名                                                           |
| columns          | `Array<Column>`                                          |                           | 用来设置列信息                                                            |
| combineNum       | `number`                                                 |                           | 自动合并单元格                                                            |
| itemActions      | Array<[Action](./action-button)>                         |                           | 悬浮行操作按钮组                                                          |
| itemCheckableOn  | [表达式](../../docs/concepts/expression)                 |                           | 配置当前行是否可勾选的条件，要用 [表达式](../../docs/concepts/expression) |
| itemDraggableOn  | [表达式](../../docs/concepts/expression)                 |                           | 配置当前行是否可拖拽的条件，要用 [表达式](../../docs/concepts/expression) |
| checkOnItemClick | `boolean`                                                | `false`                   | 点击数据行是否可以勾选当前行                                              |
| rowClassName     | `string`                                                 |                           | 给行添加 CSS 类名                                                         |
| rowClassNameExpr | [模板](../../docs/concepts/template)                     |                           | 通过模板给行添加 CSS 类名                                                 |
| prefixRow        | `Array`                                                  |                           | 顶部总结行                                                                |
| affixRow         | `Array`                                                  |                           | 底部总结行                                                                |
| itemBadge        | [`BadgeSchema`](./badge)                                 |                           | 行角标配置                                                                |
| autoFillHeight   | `boolean` 丨 `{height: number}` 丨 `{maxHeight: number}` |                           | 内容区域自适应高度，可选择自适应、固定高度和最大高度                      |

## 行配置属性表

| 属性名              | 类型                               | 默认值     | 说明                                                                                                               |
| ------------------- | ---------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ |
| type                | `checkbox` \| `radio`              | `checkbox` | 指定单选还是多选                                                                                                   |
| fixed               | `boolean`                          |            | 选择列是否固定，只能左侧固定                                                                                       |
| keyField            | `string`                           | `key`      | 对应数据源的 key 值，默认是`key`，可指定为`id`、`shortId`等                                                        |
| disableOn           | `string`                           |            | 当前行是否可选择条件，要用 [表达式](../../docs/concepts/expression)                                                |
| selections          | `selections`                       |            | 自定义筛选菜单，内置`all`（全选）、`invert`（反选）、`none`（取消选择）、`odd`（选择奇数项）、`even`（选择偶数项） |
| selectedRowKeys     | `Array<string>` \| `Array<number>` |            | 已选择项                                                                                                           |
| selectedRowKeysExpr | `string`                           |            | 已选择项正则表达式                                                                                                 |
| columnWidth         | `number`                           |            | 自定义选择列列宽                                                                                                   |
| rowClick            | `boolean`                          |            | 单条任意区域选中                                                                                                   |

### 选择菜单配置属性表

| 属性名 | 类型                                           | 默认值 | 说明                                                       |
| ------ | ---------------------------------------------- | ------ | ---------------------------------------------------------- |
| key    | `all` \| `invert` \| `none` \| `odd` \| `even` | `all`  | 菜单类型，内置全选、反选、取消选择、选择奇数项、选择偶数项 |
| text   | `string`                                       |        | 自定义菜单项文本                                           |

## 展开行配置属性表

| 属性名              | 类型                               | 默认值 | 说明                                                                                                               |
| ------------------- | ---------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------ |
| expandableOn        | `string`                           |        | 指定可展开的行，要用 [表达式](../../docs/concepts/expression)                                                      |
| keyField            | `string`                           | `key`  | 对应数据源的 key 值，默认是`key`，可指定为`id`、`shortId`等                                                        |
| disableOn           | `string`                           |        | 当前行是否可选择条件，要用 [表达式](../../docs/concepts/expression)                                                |
| selections          | `selections`                       |        | 自定义筛选菜单，内置`all`（全选）、`invert`（反选）、`none`（取消选择）、`odd`（选择奇数项）、`even`（选择偶数项） |
| selectedRowKeys     | `Array<string>` \| `Array<number>` |        | 已选择项                                                                                                           |
| selectedRowKeysExpr | `string`                           |        | 已选择项正则表达式                                                                                                 |
| columnWidth         | `number`                           |        | 自定义选择列列宽                                                                                                   |

## 列配置属性表

| 属性名     | 类型                                          | 默认值  | 说明             |
| ---------- | --------------------------------------------- | ------- | ---------------- |
| label      | [模板](../../docs/concepts/template)          |         | 表头文本内容     |
| name       | `string`                                      |         | 通过名称关联数据 |
| fixed      | `left` \| `right` \| `none`                   |         | 是否固定当前列   |
| popOver    |                                               |         | 弹出框           |
| quickEdit  |                                               |         | 快速编辑         |
| copyable   | `boolean` 或 `{icon: string, content:string}` |         | 是否可复制       |
| sortable   | `boolean`                                     | `false` | 是否可排序       |
| searchable | `boolean` \| `Schema`                         | `false` | 是否可快速搜索   |
| width      | `number` \| `string`                          | 列宽    |
| remark     |                                               |         | 提示信息         |