All files / src/table TableProps.ts

0% Statements 0/0
0% Branches 0/0
0% Functions 0/0
0% Lines 0/0

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
import React from "react";
 
export interface TableProps<Record = any> {
  /**
   * 表格的列配置,必须提供
   */
  columns: TableColumn<Record>[];
 
  /**
   * 表格的数据,可以是任意类型
   */
  records?: Record[];
 
  /**
   * 提供数据的 `key` 字段名,或者提供回调,根据每个数据提供 `key` 值。注意两点:
   *
   *  - 不同的数据不要提供重复的 `key` 值,否则只会渲染一条,与数据不一致
   *  - 如果不提供 `recordKey`,则会用索引位置生成 `key`,在某些场景下,会导致性能问题,所以,总是提供你的 `recordKey`
   */
  recordKey?:
    | (Record extends { [key: string]: any } ? keyof Record : string)
    | ((record: Record, recordIndex: number) => string);
 
  /**
   * 如何判定给定的记录是否禁用(禁用的记录将不可选)
   * */
  rowDisabled?: (record: Record) => boolean;
 
  /**
   *
   * 可以为每一行指定 `className`
   */
  rowClassName?: (record: Record) => string;
 
  /**
   * 表格顶部显示的内容,可以用于显示 `loading`、数据为空等
   */
  topTip?: React.ReactNode;
 
  /**
   * 表格底部显示的内容,可用于显示记录创建等
   * */
  bottomTip?: React.ReactNode;
 
  /**
   * 使用的表格插件列表
   */
  addons?: TableAddon[];
 
  /**
   * 是否带边框
   *
   * - `false` 无边框
   * - `true` 外边框
   * - `"all"` 全边框
   * @default false
   */
  bordered?: boolean | "all";
 
  /**
   * 是否展示为紧凑样式
   * @default false
   */
  compact?: boolean;
 
  /**
   * 禁用 Hover 时高亮
   * @default false
   */
  disableHoverHighlight?: boolean;
 
  /**
   * 禁用默认的文本溢出样式
   *
   * 也可以通过 `columns` 中 `render` 对各列进行更精细的控制
   *
   * @default false
   */
  disableTextOverflow?: boolean;
 
  /**
   * 隐藏表头
   * @default false
   */
  hideHeader?: boolean;
 
  /**
   * 表格内容展示为上对齐,默认居中对齐
   * @default false
   */
  verticalTop?: boolean;
}
 
export interface TableColumn<Record = any> {
  /**
   * 列标识
   */
  key: string;
 
  /**
   * 表头
   * @docType React.ReactNode | ((column: TableColumn<Record>) => React.ReactNode)
   */
  header: React.ReactNode | ((column: TableColumn<Record>) => React.ReactNode);
 
  /**
   * 数据渲染方法
   * 如果不提供渲染方法,会尝试查找数据中 `key` 属性所指向的字段
   *
   * @param record 对应的数据记录
   * @param rowKey 当前渲染行的 `key` 值
   * @param recordIndex 数据记录在记录集中的索引
   * @param column 正在渲染的列
   * @param columnIndex 列索引
   */
  render?: (
    record: Record,
    rowKey: string,
    recordIndex: number,
    column: TableColumn<Record>,
    columnIndex: number
  ) => React.ReactNode;
 
  /**
   * 列宽度,可以指定 CSS 属性或数字 (单位:px)
   */
  width?: string | number;
 
  /**
   * 对齐规则,左中右
   */
  align?: "left" | "center" | "right";
}
 
export interface TableAddon<Record = any> {
  /**
   * 在表格渲染前,可以返回更改的 props
   */
  onInjectProps?: TableMiddleware<TableProps<Record>>;
 
  /**
   * 对于每一行 (`<tr>`) 的渲染结果,返回变更的结果。
   * 变更的结果可以在原结果前后插入新行
   */
  onInjectRow?: TableMiddleware<TableRowRender<Record>>;
 
  /**
   * 对于每一列的渲染结果,返回变更的结果
   */
  onInjectColumn?: TableMiddleware<TableColumnRender<Record>>;
 
  /**
   * 变更 `<tbody>` 的渲染结果
   */
  onInjectBody?: TableMiddleware<TableBodyRender<Record>>;
 
  /**
   * 变更 `<thead>` 的渲染结果
   */
  onInjectHead?: TableMiddleware<(props: TableProps<Record>) => JSX.Element>;
 
  /**
   * 变更 `<table>` 的渲染结果
   */
  onInjectTable?: TableMiddleware<(props: TableProps<Record>) => JSX.Element>;
}
 
export interface TableMiddleware<T> {
  (next: T): T;
}
 
export interface TableBodyRender<Record = any> {
  (
    records: Record[],
    columns: TableColumn<Record>[],
    topTip: React.ReactNode,
    bottomTip: React.ReactNode
  ): JSX.Element;
}
 
export interface TableRowRender<Record = any> {
  (
    record: Record,
    rowKey: string,
    recordIndex: number,
    columns: TableColumn<Record>[]
  ): TableRowRenderResult;
}
 
export interface TableRowRenderResult {
  // should return <tr /> in array
  prepends: JSX.Element[];
  // should return <tr />
  row: JSX.Element;
  // shoud return <tr /> in array
  appends: JSX.Element[];
}
 
export interface TableColumnRender<Record = any> {
  (
    record: Record,
    rowKey: string,
    recordIndex: number,
    column: TableColumn<Record>,
    /**
     * @2.0.10 新增
     */
    columnIndex?: number
  ): TableColumnRenderResult;
}
 
export interface TableColumnRenderResult {
  props: React.TdHTMLAttributes<HTMLTableDataCellElement>;
  children: React.ReactNode;
}
 
export interface RowRenderContext<Record = any> {
  /**
   * 原内容
   */
  children: React.ReactNode;
 
  /**
   * 当前行记录
   */
  record: Record;
 
  /**
   * 当前行 Key
   */
  rowKey: string;
 
  /**
   * 当前行序号
   */
  recordIndex: number;
 
  /**
   * 当前行是否被禁用
   */
  disabled: boolean;
 
  /**
   * 当前行深度
   */
  depth?: number;
}