diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 599d21aa6..3324daedb 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -36,48 +36,60 @@ const columns = [{ | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | bordered | Whether to show all table borders | boolean | `false` | -| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - | +| columns | Columns of table | array | - | | components | Override default table elements | object | - | | dataSource | Data record array to be displayed | any\[] | - | | defaultExpandAllRows | Expand all rows initially | boolean | `false` | | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | | expandedRowKeys | Current expanded row keys | string\[] | - | -| expandedRowRender | Expanded container render for each row | Function(record):ReactNode | - | +| expandedRowRender | Expanded container render for each row | Function(record):VNode\|slot-scope | - | | expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` | -| footer | Table footer renderer | Function(currentPageData) | | +| footer | Table footer renderer | Function(currentPageData)\|slot-scope | | | indentSize | Indent size in pixels of tree data | number | 15 | -| loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` | -| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data'
[Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | -| pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | | +| loading | Loading status of table | boolean\|[object](https://vuecomponent.github.io/ant-design/#/us/components/spin) | `false` | +| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data' | +| pagination | Pagination [config](https://vuecomponent.github.io/ant-design/#/us/components/pagination), hide it by setting it to `false` | object | | | rowClassName | Row's className | Function(record, index):string | - | | rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | | rowSelection | Row selection [config](#rowSelection) | object | null | | scroll | Whether table can be scrolled in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object | - | | showHeader | Whether to show table header | boolean | `true` | | size | Size of table | `default` \| `middle` \| `small` | `default` | -| title | Table title renderer | Function(currentPageData) | | -| onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) | | -| onExpand | Callback executed when the row expand icon is clicked | Function(expanded, record) | | -| onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | | -| onHeaderRow | Set props on per header row | Function(column, index) | - | -| onRow | Set props on per row | Function(record, index) | - | +| title | Table title renderer | Function(currentPageData)\|slot-scope | | +| customHeaderRow | Set props on per header row | Function(column, index) | - | +| customRow | Set props on per row | Function(record, index) | - | -#### onRow usage +### Events +| Events Name | Description | Arguments | +| --- | --- | --- | +| change | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) | | +| expand | Callback executed when the row expand icon is clicked | Function(expanded, record) | | +| expandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | | -Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell` +#### customRow usage + +Same as `customRow` `customHeaderRow` `customCell` `customHeaderCell`. +Follow [Vue jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) syntax。 ```jsx { + customRow={(record) => { return { - onClick: () => {}, // click row - onMouseEnter: () => {}, // mouse enter row - onXxxx... + props: { + xxx... + }, + on: { + click: () => {}, // click row + mouseenter: () => {}, // mouse enter row + xxxx... + }, }; )} - onHeaderRow={(column) => { + customHeaderRow={(column) => { return { - onClick: () => {}, // click header row + on: { + click: () => {}, // click header row + }, }; )} /> @@ -93,30 +105,34 @@ One of the Table `columns` prop for describing the table's columns, Column has t | colSpan | Span of this column's title | number | | | dataIndex | Display field of the data record, could be set like `a.b.c` | string | - | | defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - | -| filterDropdown | Customized filter overlay | ReactNode | - | +| filterDropdown | Customized filter overlay | slot | - | | filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | | filtered | Whether the `dataSource` is filtered | boolean | `false` | | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | -| filterIcon | Customized filter icon | ReactNode | `false` | +| filterIcon | Customized filter icon | slot | `false` | | filterMultiple | Whether multiple filters can be selected | boolean | `true` | | filters | Filter menu config | object\[] | - | | fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` | | key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | -| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - | +| customRender | Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config | Function(text, record, index) {}\|slot-scope | - | | sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - | | sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - | -| title | Title of this column | string\|ReactNode | - | +| title | Title of this column | string\|slot | - | | width | Width of this column | string\|number | - | -| onCell | Set props on per cell | Function(record) | - | -| onFilter | Callback executed when the confirm filter button is clicked | Function | - | -| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | -| onHeaderCell | Set props on per header cell | Function(column) | - | +| customCell | Set props on per cell | Function(record) | - | +| customHeaderCell | Set props on per header cell | Function(column) | - | +| onFilter | Callback executed when the confirm filter button is clicked, Use as a `filter` event when using template or jsx | Function | - | +| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisible` event when using template or jsx | function(visible) {} | - | +| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { filterIcon: 'XXX'}` | object | - | +| scopedSlots | When using columns, you can use this property to configure the properties that support the slot-scope, such as `scopedSlots: { customRender: 'XXX'}` | object | - | + ### ColumnGroup | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | -| title | Title of the column group | string\|ReactNode | - | +| title | Title of the column group | string\|slot | - | +| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { title: 'XXX'}` | object | - | ### rowSelection @@ -140,7 +156,7 @@ Properties for row selection. | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | key | Unique key of this selection | string | - | -| text | Display text of this selection | string\|React.ReactNode | - | +| text | Display text of this selection | string\|VNode | - | | onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - | diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index f7bf04e39..0c3fdf121 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -35,51 +35,64 @@ const columns = [{ | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| className | 列的 className | string | - | | bordered | 是否展示外边框和列边框 | boolean | false | -| columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - | +| columns | 表格列的配置描述，具体项见下表 | array | - | | components | 覆盖默认的 table 元素 | object | - | | dataSource | 数据数组 | any\[] | | | defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | | defaultExpandedRowKeys | 默认展开的行 | string\[] | - | | expandedRowKeys | 展开的行，控制属性 | string\[] | - | -| expandedRowRender | 额外的展开行 | Function(record):ReactNode | - | +| expandedRowRender | 额外的展开行 | Function(record):VNode\|slot-scope| - | | expandRowByClick | 通过点击行来展开子行 | boolean | `false` | -| footer | 表格尾部 | Function(currentPageData) | | +| footer | 表格尾部 | Function(currentPageData)\|slot-scope | | | indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | -| loading | 页面是否加载中 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | -| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定'
filterReset: '重置'
emptyText: '暂无数据'
[默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | -| pagination | 分页器，配置项参考 [pagination](/components/pagination/)，设为 false 时不展示和进行分页 | object | | +| loading | 页面是否加载中 | boolean\|[object](https://vuecomponent.github.io/ant-design/#/cn/components/spin) | false | +| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定'
filterReset: '重置'
emptyText: '暂无数据' | +| pagination | 分页器，配置项参考 [pagination](https://vuecomponent.github.io/ant-design/#/cn/components/pagination)，设为 false 时不展示和进行分页 | object | | | rowClassName | 表格行的类名 | Function(record, index):string | - | | rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string\|Function(record):string | 'key' | | rowSelection | 列表项是否可选择，[配置项](#rowSelection) | object | null | | scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | object | - | | showHeader | 是否显示表头 | boolean | true | | size | 正常或迷你类型，`default` or `small` | string | default | -| title | 表格标题 | Function(currentPageData) | | -| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | | -| onExpand | 点击展开图标时触发 | Function(expanded, record) | | -| onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | | -| onHeaderRow | 设置头部行属性 | Function(column, index) | - | -| onRow | 设置行属性 | Function(record, index) | - | +| title | 表格标题 | Function(currentPageData)\|slot-scope | | +| customHeaderRow | 设置头部行属性 | Function(column, index) | - | +| customRow | 设置行属性 | Function(record, index) | - | +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| expandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | +| change | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | +| expand | 点击展开图标时触发 | Function(expanded, record) | -#### onRow 用法 -适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。 -遵循Vue [jsx语法](https://github.com/vuejs/babel-plugin-transform-vue-jsx) +#### customRow 用法 + +适用于 `customRow` `customHeaderRow` `customCell` `customHeaderCell`。 +遵循[Vue jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx)语法。 ```jsx
{ + customRow={(record) => { return { - onClick: () => {}, // 点击行 - onMouseEnter: () => {}, // 鼠标移入行 - onXxxx... + props: { + xxx... //属性 + }, + on: { // 事件 + click: () => {}, // 点击行 + mouseenter: () => {}, // 鼠标移入行 + xxxx... + }, + }; )} - onHeaderRow={(column) => { + customHeaderRow={(column) => { return { - onClick: () => {}, // 点击表头行 + on: { + click: () => {}, // 点击表头行 + } }; )} /> @@ -101,23 +114,25 @@ const columns = [{ | filterMultiple | 是否多选 | boolean | true | | filters | 表头的筛选菜单项 | object\[] | - | | fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false | -| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - | -| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并,可参考demo 表格行/列合并 | Function(text, record, index) {} | - | +| key | Vue 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - | +| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格行/列合并,可参考demo 表格行/列合并 | Function(text, record, index) {}\|slot-scope | - | | sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - | | title | 列头显示文字 | string\|slot | - | | width | 列宽度 | string\|number | - | -| onCell | 设置单元格属性 | Function(record) | - | +| customCell | 设置单元格属性 | Function(record) | - | | customHeaderCell | 设置头部单元格属性 | Function(column) | - | | onFilter | 本地模式下，确定筛选的运行函数, 使用template或jsx时作为`filter`事件使用 | Function | - | -| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用template或jsx时作为`filter`事件使用 | function(visible) {} | - | - +| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用template或jsx时作为`filterDropdownVisibleChange`事件使用 | function(visible) {} | - | +| slots | 使用columns时，可以通过该属性配置支持slot的属性，如 `slots: { filterIcon: 'XXX'}` | object | - | +| scopedSlots | 使用columns时，可以通过该属性配置支持slot-scope的属性，如 `scopedSlots: { customRender: 'XXX'}` | object | - | ### ColumnGroup | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | title | 列头显示文字 | string\|slot | - | +| slots | 使用columns时，可以通过该属性配置支持slot的属性，如 `slots: { title: 'XXX'}` | object | - | ### rowSelection diff --git a/components/table/interface.js b/components/table/interface.js index 9b08d45e1..249af7997 100644 --- a/components/table/interface.js +++ b/components/table/interface.js @@ -18,6 +18,8 @@ export const ColumnProps = { // key?: React.Key; dataIndex: PropTypes.string, customRender: PropTypes.func, + customCell: PropTypes.func, + customHeaderCell: PropTypes.func, filters: PropTypes.arrayOf(ColumnFilterItem), // onFilter: (value: any, record: T) => PropTypes.bool, filterMultiple: PropTypes.bool, diff --git a/components/vc-table/demo/rowAndCellClick.js b/components/vc-table/demo/rowAndCellClick.js index dfe244527..66654c6ec 100644 --- a/components/vc-table/demo/rowAndCellClick.js +++ b/components/vc-table/demo/rowAndCellClick.js @@ -14,33 +14,6 @@ const onRowDoubleClick = (record, index, e) => { console.log(`Double click nth(${index}) row of parent, record.name: ${record.name}`, e) } -const columns = [{ - title: 'Name', - dataIndex: 'name', - key: 'name', - width: 400, -}, { - title: 'Age', - dataIndex: 'age', - key: 'age', - width: 100, - render: (h, text) => ( - {text} (Trigger Cell Click) - ), - onCell: (record) => ({ - on: { - click (e) { - console.log('Click cell', record, e.target) - }, - }, - }), -}, { - title: 'Address', - dataIndex: 'address', - key: 'address', - width: 200, -}] - const data = [{ key: 1, name: 'a', @@ -94,6 +67,32 @@ const data = [{ export default { render () { + const columns = [{ + title: 'Name', + dataIndex: 'name', + key: 'name', + width: 400, + }, { + title: 'Age', + dataIndex: 'age', + key: 'age', + width: 100, + customRender: (text) => ( + {text} (Trigger Cell Click) + ), + customCell: (record) => ({ + on: { + click (e) { + console.log('Click cell', record, e.target) + }, + }, + }), + }, { + title: 'Address', + dataIndex: 'address', + key: 'address', + width: 200, + }] return (