diff --git a/db/TDesign.db b/db/TDesign.db index 74909f8b5..430e0a5e1 100644 Binary files a/db/TDesign.db and b/db/TDesign.db differ diff --git a/packages/products/tdesign-mobile-react/src/table/defaultProps.ts b/packages/products/tdesign-mobile-react/src/table/defaultProps.ts index 28ec7b851..f300705a3 100644 --- a/packages/products/tdesign-mobile-react/src/table/defaultProps.ts +++ b/packages/products/tdesign-mobile-react/src/table/defaultProps.ts @@ -2,7 +2,7 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ -import { TdBaseTableProps } from './type'; +import { TdBaseTableProps, TdPrimaryTableProps } from './type'; export const baseTableDefaultProps: TdBaseTableProps = { bordered: false, @@ -16,3 +16,24 @@ export const baseTableDefaultProps: TdBaseTableProps = { tableLayout: 'fixed', verticalAlign: 'middle', }; + +export const primaryTableDefaultProps: Pick< + TdPrimaryTableProps, + | 'columns' + | 'expandIcon' + | 'defaultExpandedRowKeys' + | 'loadingMode' + | 'multipleSort' + | 'reserveSelectedRowOnPaginate' + | 'defaultSelectedRowKeys' + | 'showSortColumnBgColor' +> = { + columns: [], + expandIcon: true, + defaultExpandedRowKeys: [], + loadingMode: 'pull-refresh', + multipleSort: false, + reserveSelectedRowOnPaginate: true, + defaultSelectedRowKeys: [], + showSortColumnBgColor: false, +}; diff --git a/packages/products/tdesign-mobile-react/src/table/table.en-US.md b/packages/products/tdesign-mobile-react/src/table/table.en-US.md index 83afd292f..316bcf292 100644 --- a/packages/products/tdesign-mobile-react/src/table/table.en-US.md +++ b/packages/products/tdesign-mobile-react/src/table/table.en-US.md @@ -19,17 +19,18 @@ height | String / Number | - | table height | N loading | TNode | undefined | loading state table。Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N loadingProps | Object | - | Typescript: `Partial`,[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N maxHeight | String / Number | - | table max height | N +pagination | Object | - | you can use all props of pagination component with paginationProps。Typescript: `PaginationProps`,[Pagination API Documents](./pagination?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N rowAttributes | Object / Array / Function | - | `0.17.0`。`tr` attributes。Typescript: `TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N rowClassName | String / Object / Array / Function | - | `0.17.0`。table `th` classname。Typescript: `ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; rowKey?: string; type?: 'body' \| 'foot' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N rowKey | String | 'id' | required。unique key for each row data | Y -rowspanAndColspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +rowspanAndColspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N showHeader | Boolean | true | show table header | N stripe | Boolean | false | show stripe style | N tableContentWidth | String | - | \- | N tableLayout | String | fixed | table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please。options: auto/fixed | N verticalAlign | String | middle | vertical align。options: top/middle/bottom | N -onCellClick | Function | | Typescript: `(context: BaseTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N -onRowClick | Function | | Typescript: `(context: RowEventContext) => void`
trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N +onCellClick | Function | | Typescript: `(context: BaseTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onRowClick | Function | | Typescript: `(context: RowEventContext) => void`
trigger on row click。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N onScroll | Function | | Typescript: `(params: { e: UIEvent }) => void`
trigger on table content scroll | N ### BaseTableInstanceFunctions 组件实例方法 @@ -46,7 +47,7 @@ name | type | default | description | required -- | -- | -- | -- | -- align | String | left | align type。options: left/right/center | N cell | String / Function | - | use cell to render table cell。Typescript: `string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N -className | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +className | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N colKey | String | - | unique key for column | N ellipsis | TNode | false | ellipsis cell content。Typescript: `boolean \| TNode>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N ellipsisTitle | TNode | - | ellipsis title content。Typescript: `boolean \| TNode>` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N @@ -55,3 +56,83 @@ minWidth | String / Number | - | add CSS property `min-width` to HTML Element `< render | Function | - | `0.21.1`。render function can be used to render cell or head。Typescript: `TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' \| 'title'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N title | String / Function | - | th content。Typescript: `string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N width | String / Number | - | column width | N + + +### PrimaryTable Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N +columns | Array | [] | table column configs。Typescript: `Array>` | N +displayColumns | Array | - | Typescript: `CheckboxGroupValue` | N +defaultDisplayColumns | Array | - | uncontrolled property。Typescript: `CheckboxGroupValue` | N +dragSort | String | - | dag sort。options: row/row-handler/col/row-handler-col/drag-col | N +dragSortOptions | Object | - | drag sort params。Typescript: `SortableOptions` | N +expandIcon | TNode | true | to show expand icon. expand icon is set in first column。Typescript: `boolean \| TNode>` `interface ExpandArrowRenderParams { row: T; index: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +expandOnRowClick | Boolean | - | expand row on click | N +expandedRow | TNode | - | table expanded row, to show more detail information。Typescript: `TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] \| BaseTableCol[] }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +expandedRowKeys | Array | [] | expanded row keys, row key value is from data[rowKey]。Typescript: `Array` | N +defaultExpandedRowKeys | Array | [] | expanded row keys, row key value is from data[rowKey]。uncontrolled property。Typescript: `Array` | N +filterIcon | TElement | - | filter icon。Typescript: `TNode<{ col: PrimaryTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +filterRow | TNode | - | filter value。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +filterValue | Object | - | filter value。Typescript: `FilterValue` `type FilterValue = { [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +defaultFilterValue | Object | - | filter value。uncontrolled property。Typescript: `FilterValue` `type FilterValue = { [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +hideSortTips | Boolean | - | hide sort tips | N +indeterminateSelectedRowKeys | Array | - | indeterminate selected row keys, row key is from data[rowKey]。Typescript: `Array` | N +loadingMode | String | pull-refresh | Data Loading Mode。options: pull-refresh/pagination | N +multipleSort | Boolean | false | support multiple column fields sort | N +reserveSelectedRowOnPaginate | Boolean | true | Controls whether selected rows are retained across pagination. When enabled, selections persist across all pages, allowing batch operations on multi-page data. If set to `false`, selections are confined to the current page and do not extend to other pages. | N +selectOnRowClick | Boolean | - | select row data on row click | N +selectedRowKeys | Array | [] | selected row keys, row key is from data[rowKey]。Typescript: `Array` | N +defaultSelectedRowKeys | Array | [] | selected row keys, row key is from data[rowKey]。uncontrolled property。Typescript: `Array` | N +showSortColumnBgColor | Boolean | false | column shows sort bg color | N +sort | Object / Array | - | sort configs。Typescript: `TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +defaultSort | Object / Array | - | sort configs。uncontrolled property。Typescript: `TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +sortIcon | TElement | - | sort icon。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +`Omit, 'columns' \| 'onCellClick'>` | \- | - | extends `Omit, 'columns' \| 'onCellClick'>` | N +onCellClick | Function | | Typescript: `(context: PrimaryTableCellEventContext) => void`
trigger on cell clicked。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onChange | Function | | Typescript: `(data: TableChangeData, context: TableChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' \| 'sorter' \| 'pagination'`
| N +onColumnChange | Function | | Typescript: `(context: PrimaryTableColumnChange) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' \| 'uncheck'; e?: ChangeEvent }`
| N +onDataChange | Function | | Typescript: `(data: Array, context: TableDataChangeContext) => void`
trigger on data changing。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N +onDisplayColumnsChange | Function | | Typescript: `(value: CheckboxGroupValue) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N +onDragSort | Function | | Typescript: `(context: DragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N +onExpandChange | Function | | Typescript: `(expandedRowKeys: Array, options: ExpandOptions) => void`
trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N +onFilterChange | Function | | Typescript: `(filterValue: FilterValue, context: TableFilterChangeContext) => void`
trigger on filter value changing。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N +onSelectChange | Function | | Typescript: `(selectedRowKeys: Array, options: SelectOptions) => void`
trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N +onSortChange | Function | | Typescript: `(sort: TableSort, options: SortOptions) => void`
trigger on sort changing。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
| N + +### PrimaryTableCol + +name | type | default | description | required +-- | -- | -- | -- | -- +cell | String / Function | - | to render table cell。Typescript: `string \| TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +checkProps | Object / Function | - | checkbox or radio component properties。Typescript: `CheckProps` `type CheckProps = CheckboxProps \| RadioProps \| ((options: { row: T; rowIndex: number }) => CheckboxProps \| RadioProps)` `import { CheckboxProps } from '@Checkbox'`,[Radio API Documents](./radio?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +children | Array | - | grouping table head。Typescript: `Array>` | N +colKey | String | - | unique key for column | N +disabled | Function | - | disable table select action。Typescript: `(options: {row: T; rowIndex: number }) => boolean` | N +filter | Object | - | filter rules config。Typescript: `TableColumnFilter` | N +render | Function | - | to render cell or head。Typescript: `TNode>` `interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +sortType | String | all | sort options。options: desc/asc/all。Typescript: `SortType` `type SortType = 'desc' \| 'asc' \| 'all'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +sorter | Boolean / Function | false | sort configs。Typescript: `boolean \| SorterFun` `type SorterFun = (a: T, b: T) => number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +title | String / Function | - | to render table head。Typescript: `string \| TNode<{ col: PrimaryTableCol; colIndex: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +type | String | single | row select type。options: single/multiple | N +`Omit` | \- | - | extends `Omit` | N + +### TableColumnFilter + +name | type | default | description | required +-- | -- | -- | -- | -- +attrs | Object | - | html attributes of component。Typescript: `HTMLElementAttributes`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +classNames | String | - | component class names。Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +component | TElement | - | Typescript: `ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +confirmEvents | Array | - | Typescript: `string[]` | N +label | String / Function | - | filter column title text, used to be showed in filter row。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +list | Array | - | Typescript: `Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +listFilterConfig | Object | false | config of `filter.list`, used to filter `list`. `listFilterConfig=true` means default filter function used. `listFilterConfig.filterMethod` used to custom filter rules。Typescript: `boolean \| ListFilterConfig` `interface ListFilterConfig { filterMethod?: (item: OptionData, keyword: string) => boolean; props?: InputProps; className?: string; style?: Styles; slots?: { [key: string]: () => JSX.Element }}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +props | Object | - | Typescript: `FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +resetValue | \- | - | Typescript: `any` | N +showConfirmAndReset | Boolean | false | \- | N +style | Object | - | styles of component。Typescript: `Styles`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +type | String | - | Typescript: `FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N diff --git a/packages/products/tdesign-mobile-react/src/table/table.md b/packages/products/tdesign-mobile-react/src/table/table.md index f5b8a332b..1694919e1 100644 --- a/packages/products/tdesign-mobile-react/src/table/table.md +++ b/packages/products/tdesign-mobile-react/src/table/table.md @@ -19,17 +19,18 @@ height | String / Number | - | 表格高度,超出后会出现滚动条。示 loading | TNode | undefined | 加载中状态。值为 `true` 会显示默认加载中样式,可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N loadingProps | Object | - | 透传加载组件全部属性。TS 类型:`Partial`,[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N maxHeight | String / Number | - | 表格最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px | N +pagination | Object | - | 分页配置,值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时,会自动对本地数据 `data` 进行排序,如果不希望对于 `data` 进行排序,可以设置 `disableDataPage = true`。TS 类型:`PaginationProps`,[Pagination API Documents](./pagination?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N rowAttributes | Object / Array / Function | - | `0.17.0`。HTML 标签 `tr` 的属性。类型为 Function 时,参数说明:`params.row` 表示行数据;`params.rowIndex` 表示行下标;`params.type=body` 表示属性作用于 `tbody` 中的元素;`params.type=foot` 表示属性作用于 `tfoot` 中的元素。
示例一:{ draggable: true },
示例二:[{ draggable: true }, { title: '超出省略显示' }]。
示例三:() => [{ draggable: true }]。TS 类型:`TableRowAttributes` `type TableRowAttributes = HTMLElementAttributes \| ((params: { row: T; rowIndex: number; type: 'body' \| 'foot' }) => HTMLElementAttributes) \| Array>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N rowClassName | String / Object / Array / Function | - | `0.17.0`。行类名,泛型 T 指表格数据类型。`params.row` 表示行数据;`params.rowIndex` 表示行下标;`params.type=body` 表示类名作用于 `tbody` 中的元素;`params.type= tfoot` 表示类名作用于 `tfoot` 中的元素。TS 类型:`ClassName \| ((params: RowClassNameParams) => ClassName)` `interface RowClassNameParams { row: T; rowIndex: number; rowKey?: string; type?: 'body' \| 'foot' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N rowKey | String | 'id' | 必需。唯一标识一行数据的字段名,来源于 `data` 中的字段。如果是字段嵌套多层,可以设置形如 `item.a.id` 的方法 | Y -rowspanAndColspan | Function | - | 用于自定义合并单元格,泛型 T 指表格数据类型。示例:`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型:`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +rowspanAndColspan | Function | - | 用于自定义合并单元格,泛型 T 指表格数据类型。示例:`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型:`TableRowspanAndColspanFunc` `type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N showHeader | Boolean | true | 是否显示表头 | N stripe | Boolean | false | 是否显示斑马纹 | N tableContentWidth | String | - | 表格内容的总宽度,注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N tableLayout | String | fixed | 表格布局方式。可选项:auto/fixed | N verticalAlign | String | middle | 行内容上下方向对齐。可选项:top/middle/bottom | N -onCellClick | Function | | TS 类型:`(context: BaseTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N -onRowClick | Function | | TS 类型:`(context: RowEventContext) => void`
行点击时触发,泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N +onCellClick | Function | | TS 类型:`(context: BaseTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface BaseTableCellEventContext { row: T; col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onRowClick | Function | | TS 类型:`(context: RowEventContext) => void`
行点击时触发,泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface RowEventContext { row: T; index: number; e: MouseEvent }`
| N onScroll | Function | | TS 类型:`(params: { e: UIEvent }) => void`
表格内容滚动时触发 | N ### BaseTableInstanceFunctions 组件实例方法 @@ -46,7 +47,7 @@ refreshTable | \- | \- | 必需。全部重新渲染表格 -- | -- | -- | -- | -- align | String | left | 列横向对齐方式。可选项:left/right/center | N cell | String / Function | - | 自定义单元格渲染,优先级高于 `render`。泛型 T 指表格数据类型。TS 类型:`string \| TNode>` `interface BaseTableCellParams { row: T; rowIndex: number; col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N -className | String / Object / Array / Function | - | 列类名,值类型是 Function 使用返回值作为列类名;值类型不为 Function 时,值用于整列类名(含表头)。泛型 T 指表格数据类型。TS 类型:`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +className | String / Object / Array / Function | - | 列类名,值类型是 Function 使用返回值作为列类名;值类型不为 Function 时,值用于整列类名(含表头)。泛型 T 指表格数据类型。TS 类型:`TableColumnClassName \| TableColumnClassName[]` `type TableColumnClassName = ClassName \| ((context: CellData) => ClassName)` `interface CellData extends BaseTableCellParams { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N colKey | String | - | 渲染列所需字段,值为 `serial-number` 表示当前列为「序号」列 | N ellipsis | TNode | false | 单元格和表头内容超出时,是否显示省略号。如果仅希望单元格超出省略,可设置 `ellipsisTitle = false`。
值为 `true`,则超出省略浮层默认显示单元格内容;
值类型为 `Function` 则自定义超出省略浮中层显示的内容。
请注意单元格超出省略的两个基本点:1. 内容元素是内联元素或样式(自定义单元格内容时需特别注意);2. 内容超出父元素。TS 类型:`boolean \| TNode>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N ellipsisTitle | TNode | - | 表头内容超出时,是否显示省略号。优先级高于 `ellipsis`。
值为 `true`,则超出省略的浮层默认显示表头全部内容;
值类型为 `Function` 用于自定义超出省略浮层显示的表头内容。TS 类型:`boolean \| TNode>` `interface BaseTableColParams { col: BaseTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N @@ -55,3 +56,83 @@ minWidth | String / Number | - | 透传 CSS 属性 `min-width` 到 `` 元 render | Function | - | `0.21.1`。自定义表头或单元格,泛型 T 指表格数据类型。TS 类型:`TNode>` `interface BaseTableRenderParams extends BaseTableCellParams { type: RenderType }` `type RenderType = 'cell' \| 'title'`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N title | String / Function | - | 自定义表头渲染,优先级高于 render。TS 类型:`string \| TNode \| TNode<{ col: BaseTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N width | String / Number | - | 列宽,可以作为最小宽度使用。当列宽总和小于 `table` 元素时,浏览器根据宽度设置情况自动分配宽度;当列宽总和大于 `table` 元素,表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N + + +### PrimaryTable Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式,TS 类型:`React.CSSProperties` | N +columns | Array | [] | 列配置,泛型 T 指表格数据类型。TS 类型:`Array>` | N +displayColumns | Array | - | 列配置功能中,当前显示的列。TS 类型:`CheckboxGroupValue` | N +defaultDisplayColumns | Array | - | 列配置功能中,当前显示的列。非受控属性。TS 类型:`CheckboxGroupValue` | N +dragSort | String | - | 拖拽排序方式,值为 `row` 表示行拖拽排序,这种方式无法进行文本复制,慎用。值为`row-handler` 表示通过拖拽手柄进行行拖拽排序。值为 `col` 表示列顺序拖拽。值为 `row-handler-col` 表示同时支持行拖拽和列拖拽。⚠️`drag-col` 已废弃,请勿使用。可选项:row/row-handler/col/row-handler-col/drag-col | N +dragSortOptions | Object | - | 拖拽排序扩展参数,具体参数见 [Sortable](https://github.com/SortableJS/Sortable)。TS 类型:`SortableOptions` | N +expandIcon | TNode | true | 用于控制是否显示「展开图标列」,值为 `false` 则不会显示。可以精确到某一行是否显示,还可以自定义展开图标内容。`expandedRow` 存在时,该参数有效。支持全局配置 `GlobalConfigProvider`。TS 类型:`boolean \| TNode>` `interface ExpandArrowRenderParams { row: T; index: number }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +expandOnRowClick | Boolean | - | 是否允许点击行展开 | N +expandedRow | TNode | - | 展开行内容,泛型 T 指表格数据类型。TS 类型:`TNode>` `interface TableExpandedRowParams { row: T; index: number; columns: PrimaryTableCol[] \| BaseTableCol[] }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +expandedRowKeys | Array | [] | 展开行。TS 类型:`Array` | N +defaultExpandedRowKeys | Array | [] | 展开行。非受控属性。TS 类型:`Array` | N +filterIcon | TElement | - | 自定义过滤图标,支持全局配置 `GlobalConfigProvider`。TS 类型:`TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +filterRow | TNode | - | 自定义过滤状态行及清空筛选等。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +filterValue | Object | - | 过滤数据的值。TS 类型:`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +defaultFilterValue | Object | - | 过滤数据的值。非受控属性。TS 类型:`FilterValue` `type FilterValue = { [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +hideSortTips | Boolean | - | 隐藏排序文本提示,支持全局配置 `GlobalConfigProvider`,默认全局配置值为 `false` | N +indeterminateSelectedRowKeys | Array | - | 半选状态行。选中行请更为使用 `selectedRowKeys` 控制。TS 类型:`Array` | N +loadingMode | String | pull-refresh | 数据加载模式。可选项:pull-refresh/pagination | N +multipleSort | Boolean | false | 是否支持多列排序 | N +reserveSelectedRowOnPaginate | Boolean | true | 行选中功能,是否在分页时保留上一页选中结果不清空。分页场景下,会全选所有页数据,保留跨分页数据。值为 `false` 则表示全部选中操作停留在当前页,不跨分页。 | N +selectOnRowClick | Boolean | - | 是否在点击整行时选中 | N +selectedRowKeys | Array | [] | 选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制。TS 类型:`Array` | N +defaultSelectedRowKeys | Array | [] | 选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制。非受控属性。TS 类型:`Array` | N +showSortColumnBgColor | Boolean | false | 当前排序列是否显示背景色 | N +sort | Object / Array | - | 排序控制。sortBy 排序字段;descending 是否进行降序排列。值为数组时,表示正进行多字段排序。TS 类型:`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +defaultSort | Object / Array | - | 排序控制。sortBy 排序字段;descending 是否进行降序排列。值为数组时,表示正进行多字段排序。非受控属性。TS 类型:`TableSort` `type TableSort = SortInfo \| Array` `interface SortInfo { sortBy: string; descending: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +sortIcon | TElement | - | 自定义排序图标,支持全局配置 `GlobalConfigProvider`。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +`Omit, 'columns' \| 'onCellClick'>` | \- | - | 继承 `Omit, 'columns' \| 'onCellClick'>` 中的全部属性 | N +onCellClick | Function | | TS 类型:`(context: PrimaryTableCellEventContext) => void`
单元格点击时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface PrimaryTableCellEventContext { row: T; col: PrimaryTableCol; rowIndex: number; colIndex: number; e: MouseEvent }`
| N +onChange | Function | | TS 类型:`(data: TableChangeData, context: TableChangeContext) => void`
分页、排序、过滤等内容变化时触发,泛型 T 指表格数据类型,`currentData` 表示变化后的数据。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface TableChangeData { sorter?: TableSort; filter?: FilterValue; pagination?: PaginationProps }`

`interface TableChangeContext { trigger: TableChangeTrigger; currentData?: T[] }`

`type TableChangeTrigger = 'filter' \| 'sorter' \| 'pagination'`
| N +onColumnChange | Function | | TS 类型:`(context: PrimaryTableColumnChange) => void`
确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列;`context.currentColumn` 表示本次变化操作的列,值不存在表示全选操作;`context.type` 表示当前操作属于选中列或是取消列。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface PrimaryTableColumnChange { columns?: CheckboxGroupValue; currentColumn?: PrimaryTableCol; type?: 'check' \| 'uncheck'; e?: ChangeEvent }`
| N +onDataChange | Function | | TS 类型:`(data: Array, context: TableDataChangeContext) => void`
本地数据排序导致 `data` 变化时触发,第一个参数指变化后的数据,第二个参数 `context.trigger` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface TableDataChangeContext { trigger: 'sort' }`
| N +onDisplayColumnsChange | Function | | TS 类型:`(value: CheckboxGroupValue) => void`
确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N +onDragSort | Function | | TS 类型:`(context: DragSortContext) => void`
拖拽排序时触发,`data` 表示排序前的数据,`newData` 表示拖拽排序结束后的新数据,`sort=row` 表示行拖拽事件触发,`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`

`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N +onExpandChange | Function | | TS 类型:`(expandedRowKeys: Array, options: ExpandOptions) => void`
展开行发生变化时触发,泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N +onFilterChange | Function | | TS 类型:`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
过滤参数发生变化时触发,泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N +onSelectChange | Function | | TS 类型:`(selectedRowKeys: Array, options: SelectOptions) => void`
选中行发生变化时触发,泛型 T 指表格数据类型。两个参数,第一个参数为选中行 keys,第二个参数为更多参数,具体如下:`type = uncheck` 表示当前行操作为「取消行选中」;`type = check` 表示当前行操作为「行选中」; `currentRowKey` 表示当前操作行的 rowKey 值; `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N +onSortChange | Function | | TS 类型:`(sort: TableSort, options: SortOptions) => void`
排序发生变化时触发。其中 sortBy 表示当前排序的字段,sortType 表示排序的方式,currentDataSource 表示 sorter 排序后的结果,col 表示列配置。sort 值类型为数组时表示多字段排序。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts)。
`interface SortOptions { currentDataSource?: Array; col: PrimaryTableCol }`
| N + +### PrimaryTableCol + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +cell | String / Function | - | 自定义单元格渲染,优先级高于 render。泛型 T 指表格数据类型。TS 类型:`string \| TNode>` `interface PrimaryTableCellParams { row: T; rowIndex: number; col: PrimaryTableCol; colIndex: number }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +checkProps | Object / Function | - | 透传参数,`colKey` 值为 `row-select` 时,配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型。TS 类型:`CheckProps` `type CheckProps = CheckboxProps \| RadioProps \| ((options: { row: T; rowIndex: number }) => CheckboxProps \| RadioProps)` `import { CheckboxProps } from '@Checkbox'`,[Radio API Documents](./radio?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +children | Array | - | 用于多级表头,泛型 T 指表格数据类型。TS 类型:`Array>` | N +colKey | String | - | 渲染列所需字段,必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列。值为 `serial-number` 表示当前列为「序号」列 | N +disabled | Function | - | 是否禁用行选中,`colKey` 值为 `row-select` 时,配置有效。TS 类型:`(options: {row: T; rowIndex: number }) => boolean` | N +filter | Object | - | 过滤规则,支持多选(multiple)、单选(single)、输入框(input) 等三种形式。想要自定义过滤组件,可通过 `filter.component` 实现,自定义过滤组件需要包含参数 value 和事件 change。更多信息请查看当前页面中 `TableColumnFilter` 的详细文档。TS 类型:`TableColumnFilter` | N +render | Function | - | 自定义表头或单元格,泛型 T 指表格数据类型。TS 类型:`TNode>` `interface PrimaryTableRenderParams extends PrimaryTableCellParams { type: RenderType }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +sortType | String | all | 当前列支持排序的方式,desc 表示当前列只能进行降序排列;asc 表示当前列只能进行升序排列;all 表示当前列既可升序排列,又可以降序排列。可选项:desc/asc/all。TS 类型:`SortType` `type SortType = 'desc' \| 'asc' \| 'all'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +sorter | Boolean / Function | false | 该列是否支持排序。值为 true 表示该列支持排序;值类型为函数,表示对本地数据 `data` 进行排序,返回值参考 [MDN Array.sort](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。泛型 T 指表格数据类型。TS 类型:`boolean \| SorterFun` `type SorterFun = (a: T, b: T) => number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +title | String / Function | - | 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染,插槽名称为 title 的值。优先级高于 render。TS 类型:`string \| TNode<{ col: PrimaryTableCol; colIndex: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +type | String | single | `colKey` 值为 `row-select` 时表示行选中列,有两种模式:单选和多选。 `type=single` 表示单选,`type=multiple` 表示多选。可选项:single/multiple | N +`Omit` | \- | - | 继承 `Omit` 中的全部属性 | N + +### TableColumnFilter + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +attrs | Object | - | 用于透传筛选器属性到自定义组件 `component`,HTML 原生属性。TS 类型:`HTMLElementAttributes`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +classNames | String | - | 透传类名到自定义组件 `component`。TS 类型:`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +component | TElement | - | 用于自定义筛选器,只要保证自定义筛选器包含 value 属性 和 change 事件,即可像内置筛选器一样正常使用。示例:`component: DatePicker`。TS 类型:`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +confirmEvents | Array | - | 哪些事件触发后会进行过滤搜索(确认按钮无需配置,会默认触发搜索)。输入框组件示例:`confirmEvents: ['onEnter']`。TS 类型:`string[]` | N +label | String / Function | - | 过滤项标题文本,显示在“过滤结果行”中的列标题描述。一般用于表头标题和过滤文本行中的列标题不一样的场景。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +list | Array | - | 用于配置当前筛选器可选值有哪些,仅当 `filter.type` 等于 `single` 或 `multiple` 时有效。TS 类型:`Array`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +listFilterConfig | Object | false | 选项过滤功能配置,`listFilterConfig=true` 表示使用默认过滤功能和组件风格,`listFilterConfig.filterMethod` 用于自定义过滤方法,其中 `props/className/style` 分别表示透传属性、类名、样式到输入框组件。TS 类型:`boolean \| ListFilterConfig` `interface ListFilterConfig { filterMethod?: (item: OptionData, keyword: string) => boolean; props?: InputProps; className?: string; style?: Styles; slots?: { [key: string]: () => JSX.Element }}`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +popupProps | Object | - | 透传 Popup 组件全部属性到筛选器浮层。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +props | Object | - | 用于透传筛选器属性到自定义组件 `component`,可以对筛选器进行任何原组件支持的属性配置。TS 类型:`FilterProps` `type FilterProps = RadioProps \| CheckboxProps \| InputProps \| { [key: string]: any }`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N +resetValue | \- | - | 重置时设置的值,示例:'' 或 []。TS 类型:`any` | N +showConfirmAndReset | Boolean | false | 是否显示重置和确认。值为真,过滤事件(filter-change)会在确定时触发;值为假,则数据变化时会立即触发过滤事件 | N +style | Object | - | 透传内联样式到自定义组件 `component`。TS 类型:`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +type | String | - | 用于设置筛选器类型:单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件,请更为使用 `component` 自定义任意组件。TS 类型:`FilterType` `type FilterType = 'input' \| 'single' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/table/type.ts) | N diff --git a/packages/products/tdesign-mobile-react/src/table/type.ts b/packages/products/tdesign-mobile-react/src/table/type.ts index 2d54e2770..8d5456587 100644 --- a/packages/products/tdesign-mobile-react/src/table/type.ts +++ b/packages/products/tdesign-mobile-react/src/table/type.ts @@ -5,8 +5,15 @@ * */ import { LoadingProps } from '../loading'; -import type { TNode, ClassName, HTMLElementAttributes } from '../common'; -import type { MouseEvent, UIEvent } from 'react'; +import { PaginationProps, PageInfo } from '../pagination'; +import { CheckboxGroupValue } from '../checkbox'; +import { SortableEvent, SortableOptions } from 'sortablejs'; +import { CheckboxProps } from '../checkbox'; +import { RadioProps } from '../radio'; +import { PopupProps } from '../popup'; +import { InputProps } from '../input'; +import type { TNode, TElement, OptionData, ClassName, Styles, HTMLElementAttributes, ComponentType } from '../common'; +import type { MouseEvent, ChangeEvent, UIEvent } from 'react'; export interface TdBaseTableProps { /** @@ -57,6 +64,10 @@ export interface TdBaseTableProps { * 表格最大高度,超出后会出现滚动条。示例:100, '30%', '300'。值为数字类型,会自动加上单位 px */ maxHeight?: string | number; + /** + * 分页配置,值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时,会自动对本地数据 `data` 进行排序,如果不希望对于 `data` 进行排序,可以设置 `disableDataPage = true` + */ + pagination?: PaginationProps; /** * HTML 标签 `tr` 的属性。类型为 Function 时,参数说明:`params.row` 表示行数据;`params.rowIndex` 表示行下标;`params.type=body` 表示属性作用于 `tbody` 中的元素;`params.type=foot` 表示属性作用于 `tfoot` 中的元素。
示例一:{ draggable: true },
示例二:[{ draggable: true }, { title: '超出省略显示' }]。
示例三:() => [{ draggable: true }] */ @@ -172,6 +183,275 @@ export interface BaseTableCol { width?: string | number; } +export interface TdPrimaryTableProps + extends Omit, 'columns' | 'onCellClick'> { + /** + * 列配置,泛型 T 指表格数据类型 + * @default [] + */ + columns?: Array>; + /** + * 列配置功能中,当前显示的列 + */ + displayColumns?: CheckboxGroupValue; + /** + * 列配置功能中,当前显示的列,非受控属性 + */ + defaultDisplayColumns?: CheckboxGroupValue; + /** + * 拖拽排序方式,值为 `row` 表示行拖拽排序,这种方式无法进行文本复制,慎用。值为`row-handler` 表示通过拖拽手柄进行行拖拽排序。值为 `col` 表示列顺序拖拽。值为 `row-handler-col` 表示同时支持行拖拽和列拖拽。⚠️`drag-col` 已废弃,请勿使用 + */ + dragSort?: 'row' | 'row-handler' | 'col' | 'row-handler-col' | 'drag-col'; + /** + * 拖拽排序扩展参数,具体参数见 [Sortable](https://github.com/SortableJS/Sortable) + */ + dragSortOptions?: SortableOptions; + /** + * 用于控制是否显示「展开图标列」,值为 `false` 则不会显示。可以精确到某一行是否显示,还可以自定义展开图标内容。`expandedRow` 存在时,该参数有效。支持全局配置 `GlobalConfigProvider` + * @default true + */ + expandIcon?: boolean | TNode>; + /** + * 是否允许点击行展开 + */ + expandOnRowClick?: boolean; + /** + * 展开行内容,泛型 T 指表格数据类型 + */ + expandedRow?: TNode>; + /** + * 展开行 + * @default [] + */ + expandedRowKeys?: Array; + /** + * 展开行,非受控属性 + * @default [] + */ + defaultExpandedRowKeys?: Array; + /** + * 自定义过滤图标,支持全局配置 `GlobalConfigProvider` + */ + filterIcon?: TNode<{ col: PrimaryTableCol; colIndex: number }>; + /** + * 自定义过滤状态行及清空筛选等 + */ + filterRow?: TNode; + /** + * 过滤数据的值 + */ + filterValue?: FilterValue; + /** + * 过滤数据的值,非受控属性 + */ + defaultFilterValue?: FilterValue; + /** + * 隐藏排序文本提示,支持全局配置 `GlobalConfigProvider`,默认全局配置值为 `false` + */ + hideSortTips?: boolean; + /** + * 半选状态行。选中行请更为使用 `selectedRowKeys` 控制 + */ + indeterminateSelectedRowKeys?: Array; + /** + * 数据加载模式 + * @default pull-refresh + */ + loadingMode?: 'pull-refresh' | 'pagination'; + /** + * 是否支持多列排序 + * @default false + */ + multipleSort?: boolean; + /** + * 行选中功能,是否在分页时保留上一页选中结果不清空。分页场景下,会全选所有页数据,保留跨分页数据。值为 `false` 则表示全部选中操作停留在当前页,不跨分页。 + * @default true + */ + reserveSelectedRowOnPaginate?: boolean; + /** + * 是否在点击整行时选中 + */ + selectOnRowClick?: boolean; + /** + * 选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制 + * @default [] + */ + selectedRowKeys?: Array; + /** + * 选中行。半选状态行请更为使用 `indeterminateSelectedRowKeys` 控制,非受控属性 + * @default [] + */ + defaultSelectedRowKeys?: Array; + /** + * 当前排序列是否显示背景色 + * @default false + */ + showSortColumnBgColor?: boolean; + /** + * 排序控制。sortBy 排序字段;descending 是否进行降序排列。值为数组时,表示正进行多字段排序 + */ + sort?: TableSort; + /** + * 排序控制。sortBy 排序字段;descending 是否进行降序排列。值为数组时,表示正进行多字段排序,非受控属性 + */ + defaultSort?: TableSort; + /** + * 自定义排序图标,支持全局配置 `GlobalConfigProvider` + */ + sortIcon?: TElement; + /** + * 单元格点击时触发 + */ + onCellClick?: (context: PrimaryTableCellEventContext) => void; + /** + * 分页、排序、过滤等内容变化时触发,泛型 T 指表格数据类型,`currentData` 表示变化后的数据 + */ + onChange?: (data: TableChangeData, context: TableChangeContext) => void; + /** + * 确认操作之前列配置发生变化时触发。`context.columns` 表示已选中的列;`context.currentColumn` 表示本次变化操作的列,值不存在表示全选操作;`context.type` 表示当前操作属于选中列或是取消列 + */ + onColumnChange?: (context: PrimaryTableColumnChange) => void; + /** + * 本地数据排序导致 `data` 变化时触发,第一个参数指变化后的数据,第二个参数 `context.trigger` 表示触发本次变化的来源 + */ + onDataChange?: (data: Array, context: TableDataChangeContext) => void; + /** + * 确认列配置时触发 + */ + onDisplayColumnsChange?: (value: CheckboxGroupValue) => void; + /** + * 拖拽排序时触发,`data` 表示排序前的数据,`newData` 表示拖拽排序结束后的新数据,`sort=row` 表示行拖拽事件触发,`sort=col` 表示列拖拽事件触发 + */ + onDragSort?: (context: DragSortContext) => void; + /** + * 展开行发生变化时触发,泛型 T 指表格数据类型 + */ + onExpandChange?: (expandedRowKeys: Array, options: ExpandOptions) => void; + /** + * 过滤参数发生变化时触发,泛型 T 指表格数据类型 + */ + onFilterChange?: (filterValue: FilterValue, context: TableFilterChangeContext) => void; + /** + * 选中行发生变化时触发,泛型 T 指表格数据类型。两个参数,第一个参数为选中行 keys,第二个参数为更多参数,具体如下:`type = uncheck` 表示当前行操作为「取消行选中」;`type = check` 表示当前行操作为「行选中」; `currentRowKey` 表示当前操作行的 rowKey 值; `currentRowData` 表示当前操作行的行数据 + */ + onSelectChange?: (selectedRowKeys: Array, options: SelectOptions) => void; + /** + * 排序发生变化时触发。其中 sortBy 表示当前排序的字段,sortType 表示排序的方式,currentDataSource 表示 sorter 排序后的结果,col 表示列配置。sort 值类型为数组时表示多字段排序 + */ + onSortChange?: (sort: TableSort, options: SortOptions) => void; +} + +export interface PrimaryTableCol + extends Omit { + /** + * 自定义单元格渲染,优先级高于 render。泛型 T 指表格数据类型 + */ + cell?: string | TNode>; + /** + * 透传参数,`colKey` 值为 `row-select` 时,配置有效。具体定义参考 Checkbox 组件 和 Radio 组件。泛型 T 指表格数据类型 + */ + checkProps?: CheckProps; + /** + * 用于多级表头,泛型 T 指表格数据类型 + */ + children?: Array>; + /** + * 渲染列所需字段,必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列。值为 `serial-number` 表示当前列为「序号」列 + * @default '' + */ + colKey?: string; + /** + * 是否禁用行选中,`colKey` 值为 `row-select` 时,配置有效 + */ + disabled?: (options: { row: T; rowIndex: number }) => boolean; + /** + * 过滤规则,支持多选(multiple)、单选(single)、输入框(input) 等三种形式。想要自定义过滤组件,可通过 `filter.component` 实现,自定义过滤组件需要包含参数 value 和事件 change。更多信息请查看当前页面中 `TableColumnFilter` 的详细文档 + */ + filter?: TableColumnFilter; + /** + * 自定义表头或单元格,泛型 T 指表格数据类型 + */ + render?: TNode>; + /** + * 当前列支持排序的方式,desc 表示当前列只能进行降序排列;asc 表示当前列只能进行升序排列;all 表示当前列既可升序排列,又可以降序排列 + * @default all + */ + sortType?: SortType; + /** + * 该列是否支持排序。值为 true 表示该列支持排序;值类型为函数,表示对本地数据 `data` 进行排序,返回值参考 [MDN Array.sort](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。泛型 T 指表格数据类型 + * @default false + */ + sorter?: boolean | SorterFun; + /** + * 自定义表头渲染。值类型为 Function 表示以函数形式渲染表头。值类型为 string 表示使用插槽渲染,插槽名称为 title 的值。优先级高于 render + */ + title?: string | TNode<{ col: PrimaryTableCol; colIndex: number }>; + /** + * `colKey` 值为 `row-select` 时表示行选中列,有两种模式:单选和多选。 `type=single` 表示单选,`type=multiple` 表示多选 + * @default single + */ + type?: 'single' | 'multiple'; +} + +export interface TableColumnFilter { + /** + * 用于透传筛选器属性到自定义组件 `component`,HTML 原生属性 + */ + attrs?: HTMLElementAttributes; + /** + * 透传类名到自定义组件 `component` + * @default '' + */ + classNames?: ClassName; + /** + * 用于自定义筛选器,只要保证自定义筛选器包含 value 属性 和 change 事件,即可像内置筛选器一样正常使用。示例:`component: DatePicker` + */ + component?: ComponentType; + /** + * 哪些事件触发后会进行过滤搜索(确认按钮无需配置,会默认触发搜索)。输入框组件示例:`confirmEvents: ['onEnter']` + */ + confirmEvents?: string[]; + /** + * 过滤项标题文本,显示在“过滤结果行”中的列标题描述。一般用于表头标题和过滤文本行中的列标题不一样的场景 + */ + label?: string | TNode; + /** + * 用于配置当前筛选器可选值有哪些,仅当 `filter.type` 等于 `single` 或 `multiple` 时有效 + */ + list?: Array; + /** + * 选项过滤功能配置,`listFilterConfig=true` 表示使用默认过滤功能和组件风格,`listFilterConfig.filterMethod` 用于自定义过滤方法,其中 `props/className/style` 分别表示透传属性、类名、样式到输入框组件 + * @default false + */ + listFilterConfig?: boolean | ListFilterConfig; + /** + * 透传 Popup 组件全部属性到筛选器浮层 + */ + popupProps?: PopupProps; + /** + * 用于透传筛选器属性到自定义组件 `component`,可以对筛选器进行任何原组件支持的属性配置 + */ + props?: FilterProps; + /** + * 重置时设置的值,示例:'' 或 [] + */ + resetValue?: any; + /** + * 是否显示重置和确认。值为真,过滤事件(filter-change)会在确定时触发;值为假,则数据变化时会立即触发过滤事件 + * @default false + */ + showConfirmAndReset?: boolean; + /** + * 透传内联样式到自定义组件 `component` + */ + style?: Styles; + /** + * 用于设置筛选器类型:单选按钮筛选器、复选框筛选器、输入框筛选器。更多复杂组件,请更为使用 `component` 自定义任意组件 + * @default '' + */ + type?: FilterType; +} + export type TableRowAttributes = | HTMLElementAttributes | ((params: { row: T; rowIndex: number; type: 'body' | 'foot' }) => HTMLElementAttributes) @@ -184,22 +464,24 @@ export interface RowClassNameParams { type?: 'body' | 'foot'; } -export type TableRowspanAndColspanFunc = (params: BaseTableCellParams) => RowspanColspan; +export type TableRowspanAndColspanFunc = ( + params: BaseTableCellParams, +) => RowspanColspan; export interface RowspanColspan { colspan?: number; rowspan?: number; } -export interface BaseTableCellEventContext { +export interface BaseTableCellEventContext { row: T; - col: BaseTableCol; + col: BaseTableCol; rowIndex: number; colIndex: number; e: MouseEvent; } -export interface RowEventContext { +export interface RowEventContext { row: T; index: number; e: MouseEvent; @@ -217,9 +499,11 @@ export interface BaseTableCellParams { colIndex: number; } -export type TableColumnClassName = ClassName | ((context: CellData) => ClassName); +export type TableColumnClassName = + | ClassName + | ((context: CellData) => ClassName); -export interface CellData extends BaseTableCellParams { +export interface CellData extends BaseTableCellParams { type: 'th' | 'td'; } @@ -235,3 +519,121 @@ export interface BaseTableRenderParams extends BaseTableCellParams { export type RenderType = 'cell' | 'title'; export type DataType = TableRowData; + +export interface ExpandArrowRenderParams { + row: T; + index: number; +} + +export interface TableExpandedRowParams { + row: T; + index: number; + columns: PrimaryTableCol[] | BaseTableCol[]; +} + +export type FilterValue = { [key: string]: any }; + +export type TableSort = SortInfo | Array; + +export interface SortInfo { + sortBy: string; + descending: boolean; +} + +export interface PrimaryTableCellEventContext { + row: T; + col: PrimaryTableCol; + rowIndex: number; + colIndex: number; + e: MouseEvent; +} + +export interface TableChangeData { + sorter?: TableSort; + filter?: FilterValue; + pagination?: PaginationProps; +} + +export interface TableChangeContext { + trigger: TableChangeTrigger; + currentData?: T[]; +} + +export type TableChangeTrigger = 'filter' | 'sorter' | 'pagination'; + +export interface PrimaryTableColumnChange { + columns?: CheckboxGroupValue; + currentColumn?: PrimaryTableCol; + type?: 'check' | 'uncheck'; + e?: ChangeEvent; +} + +export interface TableDataChangeContext { + trigger: 'sort'; +} + +export interface DragSortContext { + currentIndex: number; + current: T; + targetIndex: number; + target: T; + data: T[]; + newData: T[]; + currentData?: T[]; + e: SortableEvent; + sort: 'row' | 'col'; +} + +export interface ExpandOptions { + expandedRowData: Array; + currentRowData: T; +} + +export interface TableFilterChangeContext { + col?: PrimaryTableCol; + trigger: 'filter-change' | 'confirm' | 'reset' | 'clear'; +} + +export interface SelectOptions { + selectedRowData: Array; + type: 'uncheck' | 'check'; + currentRowKey?: string; + currentRowData?: T; +} + +export interface SortOptions { + currentDataSource?: Array; + col: PrimaryTableCol; +} + +export interface PrimaryTableCellParams { + row: T; + rowIndex: number; + col: PrimaryTableCol; + colIndex: number; +} + +export type CheckProps = + | CheckboxProps + | RadioProps + | ((options: { row: T; rowIndex: number }) => CheckboxProps | RadioProps); + +export interface PrimaryTableRenderParams extends PrimaryTableCellParams { + type: RenderType; +} + +export type SortType = 'desc' | 'asc' | 'all'; + +export type SorterFun = (a: T, b: T) => number; + +export interface ListFilterConfig { + filterMethod?: (item: OptionData, keyword: string) => boolean; + props?: InputProps; + className?: string; + style?: Styles; + slots?: { [key: string]: () => JSX.Element }; +} + +export type FilterProps = RadioProps | CheckboxProps | InputProps | { [key: string]: any }; + +export type FilterType = 'input' | 'single' | 'multiple'; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index d5ee34980..cc32b3212 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -11375,7 +11375,8 @@ "id": 331, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "BaseTable", "field_category": 1, @@ -11404,7 +11405,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -98172,7 +98174,8 @@ "id": 593, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98201,7 +98204,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -98211,7 +98215,8 @@ "id": 2491, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98240,7 +98245,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -98250,7 +98256,8 @@ "id": 2349, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98279,7 +98286,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -98289,7 +98297,8 @@ "id": 2589, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98318,7 +98327,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -98406,7 +98416,8 @@ "id": 1240, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98436,7 +98447,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean", @@ -98447,7 +98459,8 @@ "id": 1219, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98476,7 +98489,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -98486,7 +98500,8 @@ "id": 809, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98516,7 +98531,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -98527,7 +98543,8 @@ "id": 335, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98556,7 +98573,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -98566,7 +98584,8 @@ "id": 830, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98595,7 +98614,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "TNode" @@ -98605,7 +98625,8 @@ "id": 2063, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98635,7 +98656,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -98646,7 +98668,8 @@ "id": 836, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98675,7 +98698,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -98685,7 +98709,8 @@ "id": 2675, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98714,7 +98739,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -98724,7 +98750,8 @@ "id": 2799, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98753,17 +98780,56 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" ] }, + { + "id": 1779355008, + "platform_framework": [ + "16" + ], + "component": "PrimaryTable", + "field_category": 1, + "field_name": "loadingMode", + "field_type": [ + "1" + ], + "field_default_value": "pull-refresh", + "field_enum": "pull-refresh/pagination", + "field_desc_zh": "数据加载模式", + "field_desc_en": "Data Loading Mode", + "field_required": 0, + "event_input": "", + "create_time": "2026-05-21 09:16:48", + "update_time": "2026-05-21 09:16:48", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "React(Mobile)" + ], + "field_type_text": [ + "String" + ] + }, { "id": 985, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98792,7 +98858,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -98802,7 +98869,8 @@ "id": 3201, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98831,7 +98899,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -98919,7 +98988,8 @@ "id": 3209, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98948,7 +99018,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -98958,7 +99029,8 @@ "id": 337, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98987,7 +99059,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -98997,7 +99070,8 @@ "id": 3011, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99026,7 +99100,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -99036,7 +99111,8 @@ "id": 834, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99066,7 +99142,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object", @@ -99077,7 +99154,8 @@ "id": 2379, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99106,7 +99184,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "TNode" @@ -99190,7 +99269,8 @@ "id": 2197, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99217,7 +99297,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99225,7 +99306,8 @@ "id": 1270, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99252,7 +99334,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99292,7 +99375,8 @@ { "id": 2555, "platform_framework": [ - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99318,7 +99402,8 @@ "support_default_value": 0, "field_category_text": "Events", "platform_framework_text": [ - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99361,7 +99446,8 @@ "id": 1447, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99388,7 +99474,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99396,7 +99483,8 @@ "id": 2492, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99423,7 +99511,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99431,7 +99520,8 @@ "id": 1496, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99458,7 +99548,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99466,7 +99557,8 @@ "id": 353, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99493,7 +99585,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99501,7 +99594,8 @@ "id": 829, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99528,7 +99622,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99606,7 +99701,8 @@ "id": 338, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99633,7 +99729,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99641,7 +99738,8 @@ "id": 339, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99668,7 +99766,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99851,7 +99950,8 @@ "id": 596, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 16, @@ -99878,7 +99978,8 @@ "field_category_text": "Extends", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99886,7 +99987,8 @@ "id": 595, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 64, @@ -99913,7 +100015,8 @@ "field_category_text": "", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99959,7 +100062,8 @@ { "id": 2019, "platform_framework": [ - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -99988,7 +100092,8 @@ "support_default_value": 0, "field_category_text": "Props", "platform_framework_text": [ - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -99999,7 +100104,8 @@ "id": 347, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100029,7 +100135,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object", @@ -100040,7 +100147,8 @@ "id": 2554, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100069,7 +100177,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -100079,7 +100188,8 @@ "id": 2391, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100108,7 +100218,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -100118,7 +100229,8 @@ "id": 348, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100147,7 +100259,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Function" @@ -100196,7 +100309,8 @@ "id": 828, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100225,7 +100339,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -100235,7 +100350,8 @@ "id": 995, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100264,7 +100380,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Function" @@ -100274,7 +100391,8 @@ "id": 831, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100303,7 +100421,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -100313,7 +100432,8 @@ "id": 833, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100343,7 +100463,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean", @@ -100354,7 +100475,8 @@ "id": 994, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100384,7 +100506,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -100395,7 +100518,8 @@ "id": 592, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100424,7 +100548,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -100434,7 +100559,8 @@ "id": 991, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 16, @@ -100461,7 +100587,8 @@ "field_category_text": "Extends", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -100469,7 +100596,8 @@ "id": 814, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 64, @@ -100496,7 +100624,8 @@ "field_category_text": "", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -129431,7 +129560,8 @@ "id": 1690444114, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129460,7 +129590,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -129470,7 +129601,8 @@ "id": 1690445477, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129499,7 +129631,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -129509,7 +129642,8 @@ "id": 2060, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129538,7 +129672,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "TNode" @@ -129548,7 +129683,8 @@ "id": 2730, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129577,7 +129713,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -129587,7 +129724,8 @@ "id": 1693805055, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129617,7 +129755,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -129628,7 +129767,8 @@ "id": 2058, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129657,7 +129797,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -129667,7 +129808,8 @@ "id": 1709366584, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129696,7 +129838,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -129706,7 +129849,8 @@ "id": 3208, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129735,7 +129879,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -129745,7 +129890,8 @@ "id": 2059, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129774,7 +129920,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -129784,7 +129931,8 @@ "id": 2062, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129811,7 +129959,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -129819,7 +129968,8 @@ "id": 2061, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129848,7 +129998,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -129858,7 +130009,8 @@ "id": 1690445626, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129887,7 +130039,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -129897,7 +130050,8 @@ "id": 2057, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129926,7 +130080,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String"