cn-base-table

通用文档

表格 props 概要

这里展示的是 table 的所有 props， 有些注明是配置的，请参考案例的配置详情

export interface TableProps {
  primaryKey: string;
  // 数据为空的时候的内容
  emptyContent?: any;
  dataSource: any[];
  columns: Array<ICnColumn>;
  // 行多选开启  【配置】
  rowSelection?: object;
  // 列拖拽配置 【配置】
  columnResize?: object;
  // 行详情 【配置】
  rowDetail?: object;
  // 树状能力配置 【配置】
  treeConfig?: TreeModeFeatureOptions;
  // 列操作能力 【配置】
  colAttach?: null | attachOptsI;
  // 底部数据配置 【配置】
  footerRule?: footerCalRuleI;
  //  树状开启
  tree?: boolean;
  // 开启十字参考轴
  crossline?: boolean;
  // 加载
  loading?: boolean;
  // 序号列开启
  index?: number;
  // 斑马线开启
  isZebra?: boolean;
  // 行属性
  rowProps?: (rowData: object, rowIndex: number) => expendObj;
  // 单元格属性
  cellProps?: (
    rowIndex: number,
    colIndex: number,
    key: string,
    rowData: object,
  ) => object;
  className?: object;
  // small midum
  size?: string;

  // 排序操作，便捷写发
  onSort?: (code: string, order: string, sort: object) => boolean;
  // 配置写法 【配置】
  sortCustom?: SortHeaderCellProps;
  // 操作列
  operateColumn?: OpreateColumnsOpt;
  style: CSSProperties;
  hasBorder: boolean;
  /** 是否开启虚拟滚动 */
  useVirtual?:
    | VirtualEnum
    | {
        horizontal?: VirtualEnum;
        vertical?: VirtualEnum;
        header?: VirtualEnum;
      };
  // 是否表格置顶
  isStickyHeader?: boolean;
  /** 表格置顶后，距离顶部的距离 */
  stickyTop?: number;
  /** 表格页脚是否置底，默认为 true */
  /** 覆盖表格内部用到的组件 */
  components?: {
    /** 表格加载时，表格内容的父组件 */
    LoadingContentWrapper?: React.ComponentType;
    /** 表格加载时的加载图标 */
    LoadingIcon?: React.ComponentType;
  };
}