ColumnDefs

DataTable的columns属性接受一个ColumnDef类型对象的数组. 通过列定义可以自定义列的很多方面. 比如:

1. 定义分组列头

2. 决定列是数据列、计算列、还是显示列。

   • 数据列

     必须对应到数据源字段, 在列定义中由accessorKey指定

   • 计算列

     根据数据源字段计算得到, 在列定义中由accessorFn指定

   • 显示列

     不跟数据源相关,如选择列等. 在列定义中既没有指定accessorKey, 也没有指定accessorFn的即为显示列

   数据列和计算列支持排序,过滤,分组等数据处理, 显示列不支持数据处理操作.

3. 单元格的自定义显示内容
   可以定义单元格的显示组件和编辑组件。可以是任意的React组件。

4. 列头/列脚的显示名
   甚至可以完全自定义显示内容。可以是任意的React组件。

5. 单元格的对齐方式

6. 单独控制列级别的功能：是否可冻结，是否可过滤，是否可排序，是否可隐藏，是否可分组(分组的统计公式，分组单元格的显示内容)，是否可调整宽度(控制最小/默认/最大列宽)

ColumnDef 接口定义

interface ColumnDef {
  /** 基本属性: */
  id: string; // 列唯一标识, 如果不指定则会从accessorKey或header中自动设置
  accessorKey?: string; // 指定数据源中的字段名
  accessorFn?: (originalRow: TData, index: number) => any; //自定义获取数据的函数
  columns?: ColumnDef<TData>[]; // 分组列的孩子列定义
  header?:
    | string
    | ((props: {
        table: Table<TData>;
        header: Header<TData>;
        column: Column<TData>;
      }) => unknown); // 列头的显示组件, 不指定时则为id属性的值或accessorKey属性的值
  footer?:
    | string
    | ((props: {
        table: Table<TData>;
        header: Header<TData>;
        column: Column<TData>;
      }) => unknown); // 页脚的显示组件. 不指定则不显示
  cell?: (props: {
    table: Table<TData>;
    row: Row<TData>;
    column: Column<TData>;
    cell: Cell<TData>;
    getValue: () => any;
    renderValue: () => any;
  }) => unknown; // 单元格的显示或编辑组件

  /** 列的额外元数据 */
  meta?: { align?: "right" | "center"; showFilterList?: boolean };

  /** Pinning功能: */
  enablePinning?: boolean; // 列是否可以置顶并冻结, 默认true

  /** Resize功能: */
  enableResizing?: boolean; // 列是否可以调整列宽, 默认true
  minSize?: nubmer; // 最小列宽, 默认20,
  size?: nubmer; // 初始列宽, 默认150,
  maxSize?: nubmer; // 最大列宽, 默认Number.MAX_SAFE_INTEGER

  /** Visibility功能: */
  enableHiding?: boolean; // 列是否可以隐藏/显示, 默认true

  /** Filter功能: */
  enableColumnFilter?: boolean; // 列是否可以过滤, 默认为true
  enableGlobalFilter?: boolean; // 列是否可以被全局过滤, 默认为true
  // 使用的过滤函数, 默认为"auto", "auto"会根据列的数据类型决定:
  // - string     "includesString"
  // - number     "inNumberRange"
  // - boolean    "equals"
  // - array      "arrIncludes"
  // - 非null对象  "equals"
  // - 其它        "weakEquals"
  // 内置的过滤函数名:
  // - "includesString"
  // - "includesStringSensitive"
  // - "equalsString",
  // - "equalsStringSensitive"
  // - "arrIncludes"
  // - "arrIncludesAll"
  // - "equals" (===),
  // - "weakEquals" (==)
  // - "inNumberRange"
  filterFn?: "auto" | FilterFn | BuiltInFilterFns;

  /** Sorting功能: */
  enableSorting?: boolean; // 列是否可以排序, 默认为true
  // 使用排序函数, 默认为"auto". "auto"会根据列的数据类型决定:
  // - Date               "datetime",
  // - 包含数字的string    "alphanumeric",
  // - 不包含数字的string  "text"
  // - 其它               "basic"
  // 内置的排序函数:
  // - "alphanumeric"(速度慢,但包含数字可以精确排序)
  // - "alphanumericCaseSensitive"(类似于alphanumeric除了大小写敏感)
  // - "text"(速度快,但包含数字会不精确)
  // - "datetime"(专用于Date类型)
  // - "basic" js默认排序
  sortingFn?: "auto" | SortingFn | BuiltInSortingFns;

  /** Grouping功能: */
  enableGrouping?: boolean; // 列是否可以分组, 默认为true
  // 使用的汇聚函数, 默认为"auto", "auto"会根据列的数据类型决定:
  // - number "sum",
  // - 其它    undefined
  // 内置的汇聚函数:
  // - "sum"
  // - "min"
  // - "max"
  // - "count"
  // - "extent"(范围),
  // - "mean"(算术平均),
  // - "median"(中值),
  // - "unique",
  // - "uniqueCount"
  aggregationFn?: "auto" | AggregationFn | BuiltInAggregationFns;
  aggregatedCell?: (props: {
    table: Table<TData>;
    row: Row<TData>;
    column: Column<TData>;
    cell: Cell<TData>;
    getValue: () => any; // 聚合后的值
    renderValue: () => any;
  }) => unknown; // 分组行上的单元格的显示组件.
}

列定义中关于id字段的说明

id字段定义了列的唯一标识, 会在很多地方用到, 比如作为列的显示/隐藏下拉列表中的显示名.

如果没有手动指定id字段, 如果有指定accessorKey则取accessorKey的值, 否则如果header是文本值则取header的文本. 也就是说accessorKey优先级比header高. 这就是即便在header中指定了中文, 在其它地方却没有显示中文的原因.

tip: 最简单的记忆方式: 不管什么情况下都手动指定id字段和header字段. 即使它们是相同的.

列定义的例子