@g3-cscec/meta-table v0.13.1

G3Table

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

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

G3TableProps

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

{
  /**
   * 物料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

{
  /**
   * 列宽
   */
  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

{
  /**
   * 操作按钮文字
   */
  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;
}