diff --git a/db/TDesign.db b/db/TDesign.db index 97cade16e..fb1dbb061 100644 Binary files a/db/TDesign.db and b/db/TDesign.db differ diff --git a/packages/products/tdesign-mobile-react/src/config-provider/config-provider.en-US.md b/packages/products/tdesign-mobile-react/src/config-provider/config-provider.en-US.md index f5a404256..7cdbb4003 100644 --- a/packages/products/tdesign-mobile-react/src/config-provider/config-provider.en-US.md +++ b/packages/products/tdesign-mobile-react/src/config-provider/config-provider.en-US.md @@ -6,27 +6,28 @@ name | type | default | description | required -- | -- | -- | -- | -- -globalConfig | Object | - | global config。Typescript：`GlobalConfigProvider` | N +globalConfig | Object | - | global config。Typescript: `GlobalConfigProvider` | N ### GlobalConfigProvider name | type | default | description | required -- | -- | -- | -- | -- -actionSheet | Object | - | ActionSheet global configs。Typescript：`ActionSheetConfig` | N -calendar | Object | - | Calendar global configs。Typescript：`CalendarConfig` | N -cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` | N +actionSheet | Object | - | ActionSheet global configs。Typescript: `ActionSheetConfig` | N +calendar | Object | - | Calendar global configs。Typescript: `CalendarConfig` | N +cascader | Object | - | Cascader global configs。Typescript: `CascaderConfig` | N classPrefix | String | t | \- | N -dateTimePicker | Object | - | DateTimePicker global configs。Typescript：`DateTimePickerConfig` | N -dropdownMenu | Object | - | DropdownMenu global configs。Typescript：`DropdownMenuConfig` | N -guide | Object | - | Guide global configs。Typescript：`GuideConfig` | N -list | Object | - | List global configs。Typescript：`ListConfig` | N -picker | Object | - | Picker global configs。Typescript：`PickerConfig` | N -pullDownRefresh | Object | - | PullDownRefresh global configs。Typescript：`PullDownRefreshConfig` | N -qrcode | Object | - | QRCode global configs。Typescript：`QRCodeConfig` | N -rate | Object | - | Rate global configs。Typescript：`RateConfig` | N -tabBar | Object | - | TabBar global configs。Typescript：`TabBarConfig` | N -table | Object | - | Table global configs。Typescript：`TableConfig` | N -upload | Object | - | Upload global configs。Typescript：`UploadConfig` | N +dateTimePicker | Object | - | DateTimePicker global configs。Typescript: `DateTimePickerConfig` | N +dropdownMenu | Object | - | DropdownMenu global configs。Typescript: `DropdownMenuConfig` | N +form | Object | - | Form global configs。Typescript: `FormConfig` | N +guide | Object | - | Guide global configs。Typescript: `GuideConfig` | N +list | Object | - | List global configs。Typescript: `ListConfig` | N +picker | Object | - | Picker global configs。Typescript: `PickerConfig` | N +pullDownRefresh | Object | - | PullDownRefresh global configs。Typescript: `PullDownRefreshConfig` | N +qrcode | Object | - | QRCode global configs。Typescript: `QRCodeConfig` | N +rate | Object | - | Rate global configs。Typescript: `RateConfig` | N +tabBar | Object | - | TabBar global configs。Typescript: `TabBarConfig` | N +table | Object | - | Table global configs。Typescript: `TableConfig` | N +upload | Object | - | Upload global configs。Typescript: `UploadConfig` | N ### ActionSheetConfig @@ -40,9 +41,9 @@ name | type | default | description | required -- | -- | -- | -- | -- confirm | String | - | confirm text | N monthTitle | String | - | \- | N -months | Array | - | Typescript：`string[]` | N +months | Array | - | Typescript: `string[]` | N title | String | - | \- | N -weekdays | Array | - | Typescript：`string[]` | N +weekdays | Array | - | Typescript: `string[]` | N ### CascaderConfig @@ -78,7 +79,7 @@ reset | String | - | reset text | N name | type | default | description | required -- | -- | -- | -- | -- colonText | String | - | colon on the right of label ":" | N -errorMessage | Object | - | Typescript：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/config-provider/type.ts) | N +errorMessage | Object | - | Typescript: `FormErrorMessage`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/config-provider/type.ts) | N requiredMark | Boolean | true | \- | N requiredMarkPosition | String | left | Display position of required symbols。options: left/right | N @@ -97,7 +98,7 @@ name | type | default | description | required -- | -- | -- | -- | -- errorText | String | - | loading text, default value is "Error" | N loadingText | String | - | loading text, default value is "loading" | N -replaceImageSrc | Function | - | replace all `src` attribute of images。Typescript：`(params: ImageProps) => string`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/config-provider/type.ts) | N +replaceImageSrc | Function | - | replace all `src` attribute of images。Typescript: `(params: ImageProps) => string`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/config-provider/type.ts) | N ### InputConfig @@ -126,7 +127,7 @@ confirm | String | - | confirm text | N name | type | default | description | required -- | -- | -- | -- | -- -loadingTexts | Array | - | Typescript：`string[]` | N +loadingTexts | Array | - | Typescript: `string[]` | N ### QRCodeConfig @@ -156,13 +157,19 @@ newsAriaLabel | String | - | \- | N name | type | default | description | required -- | -- | -- | -- | -- -empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +clearFilterResultButtonText | String | - | \- | N +confirmText | String | - | \- | N +empty | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +filterIcon | TElement | undefined | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +hideSortTips | Boolean | false | hide sort tips | N +resetText | String | - | \- | N +searchResultText | String | - | \- | N ### UploadConfig name | type | default | description | required -- | -- | -- | -- | -- -progress | Object | - | Typescript：`UploadConfigProgress` | N +progress | Object | - | Typescript: `UploadConfigProgress` | N ### UploadConfigProgress diff --git a/packages/products/tdesign-mobile-react/src/config-provider/config-provider.md b/packages/products/tdesign-mobile-react/src/config-provider/config-provider.md index 502e020a2..d73b045d1 100644 --- a/packages/products/tdesign-mobile-react/src/config-provider/config-provider.md +++ b/packages/products/tdesign-mobile-react/src/config-provider/config-provider.md @@ -18,6 +18,7 @@ cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfi classPrefix | String | t | CSS 类名前缀 | N dateTimePicker | Object | - | 时间选择器全局配置。TS 类型：`DateTimePickerConfig` | N dropdownMenu | Object | - | 下拉菜单全局配置。TS 类型：`DropdownMenuConfig` | N +form | Object | - | 表单组件全局配置。TS 类型：`FormConfig` | N guide | Object | - | 引导全局配置。TS 类型：`GuideConfig` | N list | Object | - | 列表组件全局配置。TS 类型：`ListConfig` | N picker | Object | - | 选择器全局配置。TS 类型：`PickerConfig` | N @@ -156,7 +157,13 @@ newsAriaLabel | String | - | 语言配置，“有新的消息”描述文本 | 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +clearFilterResultButtonText | String | - | 语言配置，过滤功能中，“清空筛选” 描述文本 | N +confirmText | String | - | 语言配置，“确认” 描述文本 | N empty | TNode | - | 语言配置，“暂无数据” 描述文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +filterIcon | TElement | undefined | 过滤图标，如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +hideSortTips | Boolean | false | 隐藏排序文本提示 | N +resetText | String | - | 语言配置，“重置” 描述文本 | N +searchResultText | String | - | 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果' | N ### UploadConfig diff --git a/packages/products/tdesign-mobile-react/src/config-provider/type.ts b/packages/products/tdesign-mobile-react/src/config-provider/type.ts index f2ccca453..996ff0f68 100644 --- a/packages/products/tdesign-mobile-react/src/config-provider/type.ts +++ b/packages/products/tdesign-mobile-react/src/config-provider/type.ts @@ -6,7 +6,7 @@ import { FormErrorMessage } from '../form'; import { ImageProps } from '../image'; -import { TNode } from '../common'; +import type { TNode, TElement } from '../common'; export interface TdConfigProviderProps { /** @@ -41,6 +41,10 @@ export interface GlobalConfigProvider { * 下拉菜单全局配置 */ dropdownMenu?: DropdownMenuConfig; + /** + * 表单组件全局配置 + */ + form?: FormConfig; /** * 引导全局配置 */ @@ -365,10 +369,39 @@ export interface TabBarConfig { } export interface TableConfig { + /** + * 语言配置，过滤功能中，“清空筛选” 描述文本 + * @default '' + */ + clearFilterResultButtonText?: string; + /** + * 语言配置，“确认” 描述文本 + * @default '' + */ + confirmText?: string; /** * 语言配置，“暂无数据” 描述文本 */ empty?: TNode; + /** + * 过滤图标，如果没有配置，会使用组件内置的默认图标 + */ + filterIcon?: TElement; + /** + * 隐藏排序文本提示 + * @default false + */ + hideSortTips?: boolean; + /** + * 语言配置，“重置” 描述文本 + * @default '' + */ + resetText?: string; + /** + * 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果' + * @default '' + */ + searchResultText?: string; } export interface UploadConfig { diff --git a/packages/products/tdesign-mobile-react/src/table/defaultProps.ts b/packages/products/tdesign-mobile-react/src/table/defaultProps.ts index 28ec7b851..d3f417f59 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, @@ -10,9 +10,29 @@ export const baseTableDefaultProps: TdBaseTableProps = { data: [], empty: '', loading: undefined, + loadingMode: 'pull-refresh', rowKey: 'id', showHeader: true, stripe: false, tableLayout: 'fixed', verticalAlign: 'middle', }; + +export const primaryTableDefaultProps: Pick< + TdPrimaryTableProps, + | 'columns' + | 'expandIcon' + | 'defaultExpandedRowKeys' + | 'multipleSort' + | 'reserveSelectedRowOnPaginate' + | 'defaultSelectedRowKeys' + | 'showSortColumnBgColor' +> = { + columns: [], + expandIcon: true, + defaultExpandedRowKeys: [], + 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..18c0d8614 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 @@ -17,19 +17,22 @@ fixedRows | Array | - | `0.16.0`。Typescript: `Array` | N footerSummary | TNode | - | footer summary content。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N 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 +loadingMode | String | pull-refresh | Data Loading Mode。options: pull-refresh/pagination | 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` `interface PaginationProps { current?: number; defaultCurrent?: number; disabled?: boolean; foldedMaxPageBtn?: number; maxPageBtn?: number; pageEllipsisMode?: 'mid' \| 'both-ends'; pageSize?: number; defaultPageSize?: number; pageSizeOptions?: Array; showFirstAndLastPageBtn?: boolean; showJumper?: boolean; showPageNumber?: boolean; showPageSize?: boolean; showPreviousAndNextBtn?: boolean; size?: 'small' \| 'medium'; theme?: 'default' \| 'simple'; total?: number; totalContent?: TNode; onChange?: (pageInfo: PageInfo) => void; onCurrentChange?: (current: number, pageInfo: PageInfo) => void; onPageSizeChange?: (pageSize: number, pageInfo: PageInfo) => void; }` `interface PageInfo { current: number; previous: number; pageSize: 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 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 +onPageChange | Function | | Typescript: `(pageInfo: PageInfo, newDataSource: Array) => void`
trigger on pagination changing | 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 +49,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 +58,82 @@ 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 +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..0d33ce54a 100644 --- a/packages/products/tdesign-mobile-react/src/table/table.md +++ b/packages/products/tdesign-mobile-react/src/table/table.md @@ -17,19 +17,22 @@ fixedRows | Array | - | `0.16.0`。固定行（冻结行），示例：[M, N]， footerSummary | TNode | - | 表尾总结行。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N loading | TNode | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +loadingMode | String | pull-refresh | 数据加载模式。可选项：pull-refresh/pagination | 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` `interface PaginationProps { current?: number; defaultCurrent?: number; disabled?: boolean; foldedMaxPageBtn?: number; maxPageBtn?: number; pageEllipsisMode?: 'mid' \| 'both-ends'; pageSize?: number; defaultPageSize?: number; pageSizeOptions?: Array; showFirstAndLastPageBtn?: boolean; showJumper?: boolean; showPageNumber?: boolean; showPageSize?: boolean; showPreviousAndNextBtn?: boolean; size?: 'small' \| 'medium'; theme?: 'default' \| 'simple'; total?: number; totalContent?: TNode; onChange?: (pageInfo: PageInfo) => void; onCurrentChange?: (current: number, pageInfo: PageInfo) => void; onPageSizeChange?: (pageSize: number, pageInfo: PageInfo) => void; }` `interface PageInfo { current: number; previous: number; pageSize: 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 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 +onPageChange | Function | | TS 类型：`(pageInfo: PageInfo, newDataSource: Array) => void`
分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 | 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 +49,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 +58,82 @@ 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 +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..4bb68af19 100644 --- a/packages/products/tdesign-mobile-react/src/table/type.ts +++ b/packages/products/tdesign-mobile-react/src/table/type.ts @@ -5,8 +5,14 @@ * */ import { LoadingProps } from '../loading'; -import type { TNode, ClassName, HTMLElementAttributes } from '../common'; -import type { MouseEvent, UIEvent } from 'react'; +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 { /** @@ -49,6 +55,11 @@ export interface TdBaseTableProps { * 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 */ loading?: TNode; + /** + * 数据加载模式 + * @default pull-refresh + */ + loadingMode?: 'pull-refresh' | 'pagination'; /** * 透传加载组件全部属性 */ @@ -57,6 +68,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 }] */ @@ -103,6 +118,10 @@ export interface TdBaseTableProps { * 单元格点击时触发 */ onCellClick?: (context: BaseTableCellEventContext) => void; + /** + * 分页发生变化时触发。参数 newDataSource 表示分页后的数据。本地数据进行分页时，newDataSource 和源数据 data 会不一样。泛型 T 指表格数据类型 + */ + onPageChange?: (pageInfo: PageInfo, newDataSource: Array) => void; /** * 行点击时触发，泛型 T 指表格数据类型 */ @@ -172,6 +191,300 @@ 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 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 interface PaginationProps { + current?: number; + defaultCurrent?: number; + disabled?: boolean; + foldedMaxPageBtn?: number; + maxPageBtn?: number; + pageEllipsisMode?: 'mid' | 'both-ends'; + pageSize?: number; + defaultPageSize?: number; + pageSizeOptions?: Array; + showFirstAndLastPageBtn?: boolean; + showJumper?: boolean; + showPageNumber?: boolean; + showPageSize?: boolean; + showPreviousAndNextBtn?: boolean; + size?: 'small' | 'medium'; + theme?: 'default' | 'simple'; + total?: number; + totalContent?: TNode; + onChange?: (pageInfo: PageInfo) => void; + onCurrentChange?: (current: number, pageInfo: PageInfo) => void; + onPageSizeChange?: (pageSize: number, pageInfo: PageInfo) => void; +} + +export interface PageInfo { + current: number; + previous: number; + pageSize: number; +} + export type TableRowAttributes = | HTMLElementAttributes | ((params: { row: T; rowIndex: number; type: 'body' | 'foot' }) => HTMLElementAttributes) @@ -184,22 +497,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 +532,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 +552,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 3469b3f7c..478b346d7 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -11273,6 +11273,43 @@ "TNode" ] }, + { + "id": 1779355008, + "platform_framework": [ + "16" + ], + "component": "BaseTable", + "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": 2278, "platform_framework": [ @@ -11482,6 +11519,43 @@ "Object" ] }, + { + "id": 1779870947, + "platform_framework": [ + "16" + ], + "component": "BaseTable", + "field_category": 1, + "field_name": "pagination", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`", + "field_desc_en": "you can use all props of pagination component with paginationProps", + "field_required": 0, + "event_input": "", + "create_time": "2026-05-27 08:35:48", + "update_time": "2026-05-27 08:35:48", + "event_output": null, + "custom_field_type": "PaginationProps【interface PaginationProps { current?: number; defaultCurrent?: number; disabled?: boolean; foldedMaxPageBtn?: number; maxPageBtn?: number; pageEllipsisMode?: 'mid' | 'both-ends'; pageSize?: number; defaultPageSize?: number; pageSizeOptions?: Array; showFirstAndLastPageBtn?: boolean; showJumper?: boolean; showPageNumber?: boolean; showPageSize?: boolean; showPreviousAndNextBtn?: boolean; size?: 'small' | 'medium'; theme?: 'default' | 'simple'; total?: number; totalContent?: TNode; onChange?: (pageInfo: PageInfo) => void; onCurrentChange?: (current: number, pageInfo: PageInfo) => void; onPageSizeChange?: (pageSize: number, pageInfo: PageInfo) => void; }】【interface PageInfo { current: number; previous: number; pageSize: number }】", + "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": [ + "Object" + ] + }, { "id": 2762, "platform_framework": [ @@ -12332,7 +12406,8 @@ "id": 1111, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "BaseTable", "field_category": 2, @@ -12359,7 +12434,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -98430,7 +98506,8 @@ "id": 593, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98459,7 +98536,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -98469,7 +98547,8 @@ "id": 2491, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98498,7 +98577,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -98508,7 +98588,8 @@ "id": 2349, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98537,7 +98618,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -98547,7 +98629,8 @@ "id": 2589, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98576,7 +98659,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -98664,7 +98748,8 @@ "id": 1240, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98694,7 +98779,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean", @@ -98705,7 +98791,8 @@ "id": 1219, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98734,7 +98821,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -98744,7 +98832,8 @@ "id": 809, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98774,7 +98863,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -98785,7 +98875,8 @@ "id": 335, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98814,7 +98905,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -98824,7 +98916,8 @@ "id": 830, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98853,7 +98946,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "TNode" @@ -98863,7 +98957,8 @@ "id": 2063, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98893,7 +98988,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -98904,7 +99000,8 @@ "id": 836, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98933,7 +99030,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -98943,7 +99041,8 @@ "id": 2675, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -98972,7 +99071,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -98982,7 +99082,8 @@ "id": 2799, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99011,7 +99112,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -99021,7 +99123,8 @@ "id": 985, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99050,7 +99153,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -99060,7 +99164,8 @@ "id": 3201, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99089,7 +99194,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -99177,7 +99283,8 @@ "id": 3209, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99206,7 +99313,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -99216,7 +99324,8 @@ "id": 337, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99245,7 +99354,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -99255,7 +99365,8 @@ "id": 3011, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99284,7 +99395,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -99294,7 +99406,8 @@ "id": 834, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99324,7 +99437,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object", @@ -99335,7 +99449,8 @@ "id": 2379, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 1, @@ -99364,7 +99479,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "TNode" @@ -99448,7 +99564,8 @@ "id": 2197, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99475,7 +99592,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99483,7 +99601,8 @@ "id": 1270, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99510,7 +99629,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99550,7 +99670,8 @@ { "id": 2555, "platform_framework": [ - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99576,7 +99697,8 @@ "support_default_value": 0, "field_category_text": "Events", "platform_framework_text": [ - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99619,7 +99741,8 @@ "id": 1447, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99646,7 +99769,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99654,7 +99778,8 @@ "id": 2492, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99681,7 +99806,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99689,7 +99815,8 @@ "id": 1496, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99716,7 +99843,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99724,7 +99852,8 @@ "id": 353, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99751,7 +99880,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99759,7 +99889,8 @@ "id": 829, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99786,7 +99917,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99864,7 +99996,8 @@ "id": 338, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99891,7 +100024,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -99899,7 +100033,8 @@ "id": 339, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 2, @@ -99926,7 +100061,8 @@ "field_category_text": "Events", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -100109,7 +100245,8 @@ "id": 596, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 16, @@ -100136,7 +100273,8 @@ "field_category_text": "Extends", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -100144,7 +100282,8 @@ "id": 595, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTable", "field_category": 64, @@ -100171,7 +100310,8 @@ "field_category_text": "", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -100217,7 +100357,8 @@ { "id": 2019, "platform_framework": [ - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100246,7 +100387,8 @@ "support_default_value": 0, "field_category_text": "Props", "platform_framework_text": [ - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -100257,7 +100399,8 @@ "id": 347, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100287,7 +100430,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object", @@ -100298,7 +100442,8 @@ "id": 2554, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100327,7 +100472,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -100337,7 +100483,8 @@ "id": 2391, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100366,7 +100513,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -100376,7 +100524,8 @@ "id": 348, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100405,7 +100554,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Function" @@ -100454,7 +100604,8 @@ "id": 828, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100483,7 +100634,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -100493,7 +100645,8 @@ "id": 995, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100522,7 +100675,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Function" @@ -100532,7 +100686,8 @@ "id": 831, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100561,7 +100716,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -100571,7 +100727,8 @@ "id": 833, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100601,7 +100758,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean", @@ -100612,7 +100770,8 @@ "id": 994, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100642,7 +100801,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -100653,7 +100813,8 @@ "id": 592, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 1, @@ -100682,7 +100843,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -100692,7 +100854,8 @@ "id": 991, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 16, @@ -100719,7 +100882,8 @@ "field_category_text": "Extends", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -100727,7 +100891,8 @@ "id": 814, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "PrimaryTableCol", "field_category": 64, @@ -100754,7 +100919,8 @@ "field_category_text": "", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -129689,7 +129855,8 @@ "id": 1690444114, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129718,7 +129885,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -129728,7 +129896,8 @@ "id": 1690445477, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129757,7 +129926,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -129767,7 +129937,8 @@ "id": 2060, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129796,7 +129967,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "TNode" @@ -129806,7 +129978,8 @@ "id": 2730, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129835,7 +130008,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -129845,7 +130019,8 @@ "id": 1693805055, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129875,7 +130050,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String", @@ -129886,7 +130062,8 @@ "id": 2058, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129915,7 +130092,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Array" @@ -129925,7 +130103,8 @@ "id": 1709366584, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129954,7 +130133,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -129964,7 +130144,8 @@ "id": 3208, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -129993,7 +130174,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -130003,7 +130185,8 @@ "id": 2059, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -130032,7 +130215,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -130042,7 +130226,8 @@ "id": 2062, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -130069,7 +130254,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [] }, @@ -130077,7 +130263,8 @@ "id": 2061, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -130106,7 +130293,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -130116,7 +130304,8 @@ "id": 1690445626, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -130145,7 +130334,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Object" @@ -130155,7 +130345,8 @@ "id": 2057, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableColumnFilter", "field_category": 1, @@ -130184,7 +130375,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -130233,7 +130425,8 @@ "id": 2514, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableConfig", "field_category": 1, @@ -130262,7 +130455,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -130389,7 +130583,8 @@ "id": 2512, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableConfig", "field_category": 1, @@ -130418,7 +130613,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -130512,7 +130708,8 @@ "id": 2378, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableConfig", "field_category": 1, @@ -130541,7 +130738,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "TNode" @@ -130551,7 +130749,8 @@ "id": 2676, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableConfig", "field_category": 1, @@ -130580,7 +130779,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "Boolean" @@ -130668,7 +130868,8 @@ "id": 2511, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableConfig", "field_category": 1, @@ -130697,7 +130898,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String" @@ -130707,7 +130909,8 @@ "id": 2515, "platform_framework": [ "1", - "2" + "2", + "16" ], "component": "TableConfig", "field_category": 1, @@ -130736,7 +130939,8 @@ "field_category_text": "Props", "platform_framework_text": [ "Vue(PC)", - "React(PC)" + "React(PC)", + "React(Mobile)" ], "field_type_text": [ "String"