# G3Table

基础表格，基于`Antd`的`Table`的封装，扩展了以下能力

- [x] `props.rowKey`只支持`string`类型，默认为`id`
- [x] 可动态改变列的宽度，`props.resizable`作为全局控制，默认为`true`，`props.columns[x].resizable`可单独控制某一列是否可以改变宽度
- [x] 可动态控制列的显示/隐藏和排序，并缓存在浏览器中，用户刷新不会变化
  - [x] 在最后一列渲染一个`齿轮icon`，点击`icon`出现列的勾选，利用拖拽实现列的排序
  - [x] 缓存列的数据到浏览器，缓存的`key`为组件的`widgetKey`，即只有通过页面设计器拖拽的组件才有缓存功能
- [x] 表格文本是否换行显示，`props.rowBreak`作为全局控制，默认为`false`, `props.columns[x].rowBreak`可单独控制某一列是否可换行显示
- [x] 是否显示序号列，`props.showRowNum`，默认为`true`
- [x] 是否显示可选择列，`props.multiSelect`，默认为`false`
  - [ ] 可获取选中的列的数据
- [x] 列标题文本的`tooltip`提示，`props.columns[x].titleTip`，默认为空
- [x] 列标题文本的对齐方式，`props.columns[x].headAlign`，默认对齐方式与`props.columns[x].align`相同
- [x] 显示合计行，`props.columns[x].enableTotal`，默认为`false`，仅在`props.columns[x].fieldType`为`number`时生效，且暂时只支持求和
- [ ] 操作栏，`props.rowActions`，默认为`[]`
  - [ ] 支持配置为浮动操作栏和`fixed`固定列的操作栏
  - [ ] 支持根据行数据控制显示/隐藏/禁用等状态
  - [x] 支持超过多少个就以下拉菜单的方式显示，`props.maxRowActionCount`，默认为`3`
  - [ ] 支持自定义回调事件
- [ ] 支持列的自定义渲染逻辑
  - [ ] 场景1，行数据中`gender`字段取值`0`和`1`，分别渲染为`男`和`女`
  - [ ] 场景2，行数据中`money`字段大于`5000`显示为红色，小于`1000`时显示为黄色，`1000-5000`之间时显示为绿色
  - [ ] 场景3，该列为超链接，根据行数据配置超链接地址和打开方式，默认当前窗口打开
- [ ] 支持列的排序、在本地进行
  - [ ] 本地仅支持`number`类型的排序
  - [ ] 支持配置列的排序方式，升序、降序、不排序
- [ ] 支持列的筛选，在本地进行
  - [ ] 支持配置筛选条件，通过文本包含关系判断是否符合筛选条件
- [ ] 支持分页可配置，在本地分页
- [ ] 支持列的可复制，点击`icon`即可复制文本
- [ ] 支持配置表头合并
- [ ] 支持配置表格的展现形式，传统表格？卡片表格？

## G3TableProps

继承自`Antd Table`的表格，大部分`Antd Table`的`props`都适用，少量不适用的属性计划将来说明一下

```js
{
  /**
   * 物料key，由设计器提供，供解析器消费
   */
  widgetKey?: string;
  /**
   * 是否可编辑表格
   * @default false
   */
  editable?: boolean;
  /**
   * 是否启用排序, 可编辑表格会用到，但是放到了基础表格里，未来可能调整
   * @default false
   */
  enableRowSort?: boolean;
  /**
   * antd table rowKey
   */
  rowKey?: string;
  /**
   * 是否显示行序号
   * @default true
   */
  showRowNum?: boolean;
  /**
   * 是否启用列宽拖拽
   * @default true
   */
  resizableTitle?: boolean;
  /**
   * 是否折行显示(只控制内容区,表头固定不允许折行)
   * @default false
   */
  rowBreak?: boolean;
  /**
   * 是否启用行编辑，控制列的显隐、排序
   * @default true
   */
  enableColEdit?: true;
  /**
   * 最小列宽
   * @default 100
   */
  minColWidth?: number;
  /**
   * 行操作按钮
   * @default []
   */
  rowActions?: RowAction<RecordType>[];
  /**
   * 行操作最多显示个数，超过则以下拉菜单展示
   * @default 3
   */
  maxRowActionCount?: number; // 行操作最多按钮数
  /**
   * 行操作按钮的显示方式，fixed以固定列的形式显示，float以浮动的形式显示
   * @default fixed
   */
  rowActionPosition?: 'fixed' | 'float';
  /**
   * 行操作以fixed列形式显示时，会以每个按钮2个字的文本宽度来自动计算列宽
   *
   * 计算结果不符合要求时可以通过actionColWidth来自定义列宽
   */
  actionColWidth?: number | undefined;
  /**
   * 列数据
   */
  columns?: MetaTableColumnProps<RecordType>[];
  /**
   * 数据源
   */
  dataSource?: readonly RecordType[];
}
```

## G3TableColumnProps

```js
{
  /**
   * 列宽
   */
  width?: number;
  /**
   * 是否显示
   */
  visible?: boolean;
  /**
   * 是否在列设置中显示
   * @default false
   */
  hideInSetting?: boolean;
  /**
   * 是否必输项
   */
  required?: boolean;
  /**
   * 是否允许列拖拽
   */
  resizable?: boolean;
  /**
   * 列表头提示tooltip
   */
  titleTip?: string;
  /**
   * 列表头的文字对齐方式
   */
  headAlign?: AlignType;
  /**
   * 是否折行显示
   */
  rowBreak?: boolean;
  /**
   * 是否进行合计
   */
  enableTotal?: boolean;
  /**
   * 输入类型，用于field-type-components格式化输出
   */
  fieldType?: G3FieldInputType;
  /**
   * 输入类型对应的属性配置
   * @example 枚举类型可能对应{ 0: '男',1: '女' }
   */
  fieldProps?: Record<string, any>;
  /**
   * 该列显示的key，通过默认的dataIndex获取的值为对象时使用
   */
  displayKey?: string;
  /**
   * 设置该列是否显示在表格搜索栏（Searchbar）
   * 默认为true，即可被搜索
   */
  search?: boolean;
  /**
   * 该列是在表格搜索栏（Searchbar）是否被隐藏，默认为fasle，即不隐藏
   * 通过展开和收起可显示出来
   */
  hideInSearch?: boolean;
  /**
   * 对接field-type-engine, 未来可能修改
   * @param value
   * @param record
   * @param index
   */
  renderText?(value: any, record: RecordType, index: number): string;
  /**
   * 对接field-type-engine, 未来可能修改
   * @param value
   * @param record
   * @param index
   */
  renderStyle?(value: any, record: RecordType, index: number): React.CSSProperties;
}
```

## RowAction

```js
{
  /**
   * 操作按钮文字
   */
  text: string;
  /**
   * 操作按钮是否显示
   * @default true
   */
  visible?: boolean | string;
  /**
   * 操作按钮是否禁用
   * @default false
   */
  disabled?: boolean | string;
  /**
   * 操作按钮是否需要二次确认
   * @default false
   */
  needConfirm?: boolean | undefined;
  /**
   * 操作按钮点击回调, string格式
   * @description (record, index) => void
   */
  onClick: ((record: RecordType, index: number) => void) | string;
}
```