[], locale: TableLocale) {
- const { prefixCls, dropdownPrefixCls } = this.props;
- const { sortOrder } = this.state;
- return treeMap(columns, (originColumn, i) => {
- let column = { ...originColumn };
- let key = this.getColumnKey(column, i) as string;
- let filterDropdown;
- let sortButton;
- if ((column.filters && column.filters.length > 0) || column.filterDropdown) {
- let colFilters = this.state.filters[key] || [];
- filterDropdown = (
-
- );
- }
- if (column.sorter) {
- let isSortColumn = this.isSortColumn(column);
- if (isSortColumn) {
- column.className = classNames(column.className, {
- [`${prefixCls}-column-sort`]: sortOrder,
- });
- }
- const isAscend = isSortColumn && sortOrder === 'ascend';
- const isDescend = isSortColumn && sortOrder === 'descend';
- sortButton = (
-
- this.toggleSortOrder('ascend', column)}
- >
-
-
- this.toggleSortOrder('descend', column)}
- >
-
-
-
- );
- }
- column.title = (
-
- {column.title}
- {sortButton}
- {filterDropdown}
-
- );
-
- if (sortButton || filterDropdown) {
- column.className = classNames(`${prefixCls}-column-has-filters`, column.className);
- }
-
- return column;
- });
- }
-
- handleShowSizeChange = (current: number, pageSize: number) => {
- const pagination = this.state.pagination;
- pagination.onShowSizeChange!(current, pageSize);
- const nextPagination = {
- ...pagination,
- pageSize,
- current,
- };
- this.setState({ pagination: nextPagination });
-
- const onChange = this.props.onChange;
- if (onChange) {
- onChange.apply(null, this.prepareParamsArguments({
- ...this.state,
- pagination: nextPagination,
- }));
- }
- }
-
- renderPagination() {
- // 强制不需要分页
- if (!this.hasPagination()) {
- return null;
- }
- let size = 'default';
- const { pagination } = this.state;
- if (pagination.size) {
- size = pagination.size;
- } else if (this.props.size as string === 'middle' || this.props.size === 'small') {
- size = 'small';
- }
- let total = pagination.total || this.getLocalData().length;
- return (total > 0) ? (
-
- ) : null;
- }
-
- // Get pagination, filters, sorter
- prepareParamsArguments(state: any): [any, string[], Object] {
- const pagination = { ...state.pagination };
- // remove useless handle function in Table.onChange
- delete pagination.onChange;
- delete pagination.onShowSizeChange;
- const filters = state.filters;
- const sorter: any = {};
- if (state.sortColumn && state.sortOrder) {
- sorter.column = state.sortColumn;
- sorter.order = state.sortOrder;
- sorter.field = state.sortColumn.dataIndex;
- sorter.columnKey = this.getColumnKey(state.sortColumn);
- }
- return [pagination, filters, sorter];
- }
-
- findColumn(myKey: string | number) {
- let column;
- treeMap(this.columns, c => {
- if (this.getColumnKey(c) === myKey) {
- column = c;
- }
- });
- return column;
- }
-
- getCurrentPageData() {
- let data = this.getLocalData();
- let current: number;
- let pageSize: number;
- let state = this.state;
- // 如果没有分页的话，默认全部展示
- if (!this.hasPagination()) {
- pageSize = Number.MAX_VALUE;
- current = 1;
- } else {
- pageSize = state.pagination.pageSize as number;
- current = this.getMaxCurrent(state.pagination.total || data.length) as number;
- }
-
- // 分页
- // ---
- // 当数据量少于等于每页数量时，直接设置数据
- // 否则进行读取分页数据
- if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
- data = data.filter((_, i) => {
- return i >= (current - 1) * pageSize && i < current * pageSize;
- });
- }
- return data;
- }
-
- getFlatData() {
- return flatArray(this.getLocalData());
- }
-
- getFlatCurrentPageData() {
- return flatArray(this.getCurrentPageData());
- }
-
- recursiveSort(data: T[], sorterFn: (a: any, b: any) => number): T[] {
- const { childrenColumnName = 'children' } = this.props;
- return data.sort(sorterFn).map((item: any) => (item[childrenColumnName] ? {
- ...item,
- [childrenColumnName]: this.recursiveSort(item[childrenColumnName], sorterFn),
- } : item));
- }
-
- getLocalData() {
- const state = this.state;
- const { dataSource } = this.props;
- let data = dataSource || [];
- // 优化本地排序
- data = data.slice(0);
- const sorterFn = this.getSorterFn();
- if (sorterFn) {
- data = this.recursiveSort(data, sorterFn);
- }
- // 筛选
- if (state.filters) {
- Object.keys(state.filters).forEach((columnKey) => {
- let col = this.findColumn(columnKey) as any;
- if (!col) {
- return;
- }
- let values = state.filters[columnKey] || [];
- if (values.length === 0) {
- return;
- }
- const onFilter = col.onFilter;
- data = onFilter ? data.filter(record => {
- return values.some(v => onFilter(v, record));
- }) : data;
- });
- }
- return data;
- }
-
- createComponents(components: TableComponents = {}, prevComponents?: TableComponents) {
- const bodyRow = components && components.body && components.body.row;
- const preBodyRow = prevComponents && prevComponents.body && prevComponents.body.row;
- if (!this.components || bodyRow !== preBodyRow) {
- this.components = { ...components };
- this.components.body = {
- ...components.body,
- row: createBodyRow(bodyRow),
- };
- }
- }
-
- renderTable = (contextLocale: TableLocale, loading: SpinProps) => {
- const locale = { ...contextLocale, ...this.props.locale };
- const { style, className, prefixCls, showHeader, ...restProps } = this.props;
- const data = this.getCurrentPageData();
- const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
-
- const classString = classNames({
- [`${prefixCls}-${this.props.size}`]: true,
- [`${prefixCls}-bordered`]: this.props.bordered,
- [`${prefixCls}-empty`]: !data.length,
- [`${prefixCls}-without-column-header`]: !showHeader,
- });
-
- let columns = this.renderRowSelection(locale);
- columns = this.renderColumnsDropdown(columns, locale);
- columns = columns.map((column, i) => {
- const newColumn = { ...column };
- newColumn.key = this.getColumnKey(newColumn, i);
- return newColumn;
- });
- let expandIconColumnIndex = (columns[0] && columns[0].key === 'selection-column') ? 1 : 0;
- if ('expandIconColumnIndex' in restProps) {
- expandIconColumnIndex = restProps.expandIconColumnIndex as number;
- }
-
- return (
-
- );
- }
-
- render() {
- const { style, className, prefixCls } = this.props;
- const data = this.getCurrentPageData();
-
- let loading = this.props.loading as SpinProps;
- if (typeof loading === 'boolean') {
- loading = {
- spinning: loading,
- };
- }
-
- const table = (
-
- {(locale) => this.renderTable(locale, loading)}
-
- );
-
- // if there is no pagination or no data,
- // the height of spin should decrease by half of pagination
- const paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
- ? `${prefixCls}-with-pagination` : `${prefixCls}-without-pagination`;
-
- return (
-
-
- {table}
- {this.renderPagination()}
-
-
- );
- }
-}
diff --git a/components/table/createBodyRow.jsx b/components/table/createBodyRow.jsx
index c3c0dc494..daa106140 100644
--- a/components/table/createBodyRow.jsx
+++ b/components/table/createBodyRow.jsx
@@ -44,7 +44,7 @@ export default function createTableRow (Component = 'tr') {
render () {
const className = {
- [`${this.props.prefixCls}-row-selected`]: this.selected,
+ [`${this.prefixCls}-row-selected`]: this.selected,
}
return (
diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md
new file mode 100644
index 000000000..325d0a2df
--- /dev/null
+++ b/components/table/demo/basic.md
@@ -0,0 +1,59 @@
+
+#### 基本用法
+简单的表格，最后一列是各种操作。
+
+
+
+#### basic Usage
+Simple table with actions.
+
+
+```html
+
+
+
+
+```
diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.jsx
new file mode 100755
index 000000000..3844f62ad
--- /dev/null
+++ b/components/table/filterDropdown.jsx
@@ -0,0 +1,230 @@
+
+import Menu, { SubMenu, Item as MenuItem } from '../vc-menu'
+import closest from 'dom-closest'
+import classNames from 'classnames'
+import Dropdown from '../dropdown'
+import Icon from '../icon'
+import Checkbox from '../checkbox'
+import Radio from '../radio'
+import FilterDropdownMenuWrapper from './FilterDropdownMenuWrapper'
+import { FilterMenuProps } from './interface'
+import { initDefaultProps } from '../_util/props-util'
+import { cloneElement } from '../_util/vnode'
+import BaseMixin from '../_util/BaseMixin'
+
+export default {
+ mixins: [BaseMixin],
+ name: 'FilterMenu',
+ props: initDefaultProps(FilterMenuProps, {
+ handleFilter () {},
+ column: {},
+ }),
+
+ data () {
+ const visible = ('filterDropdownVisible' in this.column)
+ ? this.column.filterDropdownVisible : false
+
+ return {
+ sSelectedKeys: this.selectedKeys,
+ sKeyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
+ sVisible: visible,
+ }
+ },
+
+ mounted () {
+ const { column } = this
+ this.$nextTick(() => {
+ this.setNeverShown(column)
+ })
+ },
+
+ componentWillReceiveProps (nextProps) {
+ const { column } = nextProps
+ this.setNeverShown(column)
+ const newState = {}
+ if ('selectedKeys' in nextProps) {
+ newState.selectedKeys = nextProps.selectedKeys
+ }
+ if ('filterDropdownVisible' in column) {
+ newState.visible = column.filterDropdownVisible
+ }
+ if (Object.keys(newState).length > 0) {
+ this.setState(newState)
+ }
+ },
+ methods: {
+
+ },
+
+ setNeverShown (column) {
+ const rootNode = this.$el
+ const filterBelongToScrollBody = !!closest(rootNode, `.ant-table-scroll`)
+ if (filterBelongToScrollBody) {
+ // When fixed column have filters, there will be two dropdown menus
+ // Filter dropdown menu inside scroll body should never be shown
+ // To fix https://github.com/ant-design/ant-design/issues/5010 and
+ // https://github.com/ant-design/ant-design/issues/7909
+ this.neverShown = !!column.fixed
+ }
+ },
+
+ setSelectedKeys ({ selectedKeys }) {
+ this.setState({ sSelectedKeys: selectedKeys })
+ },
+
+ setVisible (visible) {
+ const { column } = this
+ if (!('filterDropdownVisible' in column)) {
+ this.setState({ sVisible: visible })
+ }
+ if (column.onFilterDropdownVisibleChange) {
+ column.onFilterDropdownVisibleChange(visible)
+ }
+ },
+
+ handleClearFilters () {
+ this.setState({
+ sSelectedKeys: [],
+ }, this.handleConfirm)
+ },
+
+ handleConfirm () {
+ this.setVisible(false)
+ this.confirmFilter()
+ },
+
+ onVisibleChange (visible) {
+ this.setVisible(visible)
+ if (!visible) {
+ this.confirmFilter()
+ }
+ },
+
+ confirmFilter () {
+ if (this.sSelectedKeys !== this.selectedKeys) {
+ this.confirmFilter(this.column, this.sSelectedKeys)
+ }
+ },
+
+ renderMenuItem (item) {
+ const { column } = this
+ const multiple = ('filterMultiple' in column) ? column.filterMultiple : true
+ const input = multiple ? (
+ = 0} />
+ ) : (
+ = 0} />
+ )
+
+ return (
+
+ )
+ },
+
+ hasSubMenu () {
+ const { column: { filters = [] }} = this
+ return filters.some(item => !!(item.children && item.children.length > 0))
+ },
+
+ renderMenus (items) {
+ return items.map(item => {
+ if (item.children && item.children.length > 0) {
+ const { sKeyPathOfSelectedItem } = this
+ const containSelected = Object.keys(sKeyPathOfSelectedItem).some(
+ key => sKeyPathOfSelectedItem[key].indexOf(item.value) >= 0,
+ )
+ const subMenuCls = containSelected ? `${this.dropdownPrefixCls}-submenu-contain-selected` : ''
+ return (
+
+ )
+ }
+ return this.renderMenuItem(item)
+ })
+ },
+
+ handleMenuItemClick (info) {
+ if (info.keyPath.length <= 1) {
+ return
+ }
+ const keyPathOfSelectedItem = this.sKeyPathOfSelectedItem
+ if (this.sSelectedKeys.indexOf(info.key) >= 0) {
+ // deselect SubMenu child
+ delete keyPathOfSelectedItem[info.key]
+ } else {
+ // select SubMenu child
+ keyPathOfSelectedItem[info.key] = info.keyPath
+ }
+ this.setState({ keyPathOfSelectedItem })
+ },
+
+ renderFilterIcon () {
+ const { column, locale, prefixCls } = this
+ const filterIcon = column.filterIcon
+ const dropdownSelectedClass = this.selectedKeys.length > 0 ? `${prefixCls}-selected` : ''
+
+ return filterIcon ? cloneElement(filterIcon, {
+ title: locale.filterTitle,
+ className: classNames(filterIcon.className, {
+ [`${prefixCls}-icon`]: true,
+ }),
+ }) :
+ },
+ render () {
+ const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this
+ // default multiple selection in filter dropdown
+ const multiple = ('filterMultiple' in column) ? column.filterMultiple : true
+ const dropdownMenuClass = classNames({
+ [`${dropdownPrefixCls}-menu-without-submenu`]: !this.hasSubMenu(),
+ })
+ const menus = column.filterDropdown ? (
+
+ {column.filterDropdown}
+
+ ) : (
+
+
+
+
+ )
+
+ return (
+
+ {menus}
+ {this.renderFilterIcon()}
+
+ )
+ },
+}
diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx
deleted file mode 100755
index 5ff8eb0f2..000000000
--- a/components/table/filterDropdown.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
-import closest from 'dom-closest';
-import classNames from 'classnames';
-import Dropdown from '../dropdown';
-import Icon from '../icon';
-import Checkbox from '../checkbox';
-import Radio from '../radio';
-import FilterDropdownMenuWrapper from './FilterDropdownMenuWrapper';
-import { FilterMenuProps, FilterMenuState, ColumnProps, ColumnFilterItem } from './interface';
-
-export default class FilterMenu extends React.Component, FilterMenuState> {
- static defaultProps = {
- handleFilter() {},
- column: {},
- };
-
- neverShown: boolean;
-
- constructor(props: FilterMenuProps) {
- super(props);
-
- const visible = ('filterDropdownVisible' in props.column) ?
- props.column.filterDropdownVisible : false;
-
- this.state = {
- selectedKeys: props.selectedKeys,
- keyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单
- visible,
- };
- }
-
- componentDidMount() {
- const { column } = this.props;
- this.setNeverShown(column);
- }
-
- componentWillReceiveProps(nextProps: FilterMenuProps) {
- const { column } = nextProps;
- this.setNeverShown(column);
- const newState = {} as {
- selectedKeys: string[];
- visible: boolean;
- };
- if ('selectedKeys' in nextProps) {
- newState.selectedKeys = nextProps.selectedKeys;
- }
- if ('filterDropdownVisible' in column) {
- newState.visible = column.filterDropdownVisible as boolean;
- }
- if (Object.keys(newState).length > 0) {
- this.setState(newState);
- }
- }
-
- setNeverShown = (column: ColumnProps) => {
- const rootNode = ReactDOM.findDOMNode(this);
- const filterBelongToScrollBody = !!closest(rootNode, `.ant-table-scroll`);
- if (filterBelongToScrollBody) {
- // When fixed column have filters, there will be two dropdown menus
- // Filter dropdown menu inside scroll body should never be shown
- // To fix https://github.com/ant-design/ant-design/issues/5010 and
- // https://github.com/ant-design/ant-design/issues/7909
- this.neverShown = !!column.fixed;
- }
- }
-
- setSelectedKeys = ({ selectedKeys }: { selectedKeys: string[] }) => {
- this.setState({ selectedKeys });
- }
-
- setVisible(visible: boolean) {
- const { column } = this.props;
- if (!('filterDropdownVisible' in column)) {
- this.setState({ visible });
- }
- if (column.onFilterDropdownVisibleChange) {
- column.onFilterDropdownVisibleChange(visible);
- }
- }
-
- handleClearFilters = () => {
- this.setState({
- selectedKeys: [],
- }, this.handleConfirm);
- }
-
- handleConfirm = () => {
- this.setVisible(false);
- this.confirmFilter();
- }
-
- onVisibleChange = (visible: boolean) => {
- this.setVisible(visible);
- if (!visible) {
- this.confirmFilter();
- }
- }
-
- confirmFilter() {
- if (this.state.selectedKeys !== this.props.selectedKeys) {
- this.props.confirmFilter(this.props.column, this.state.selectedKeys);
- }
- }
-
- renderMenuItem(item: ColumnFilterItem) {
- const { column } = this.props;
- const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
- const input = multiple ? (
- = 0} />
- ) : (
- = 0} />
- );
-
- return (
-
- );
- }
-
- hasSubMenu() {
- const { column: { filters = [] } } = this.props;
- return filters.some(item => !!(item.children && item.children.length > 0));
- }
-
- renderMenus(items: ColumnFilterItem[]): React.ReactElement[] {
- return items.map(item => {
- if (item.children && item.children.length > 0) {
- const { keyPathOfSelectedItem } = this.state;
- const containSelected = Object.keys(keyPathOfSelectedItem).some(
- key => keyPathOfSelectedItem[key].indexOf(item.value) >= 0,
- );
- const subMenuCls = containSelected ? `${this.props.dropdownPrefixCls}-submenu-contain-selected` : '';
- return (
-
- {this.renderMenus(item.children)}
-
- );
- }
- return this.renderMenuItem(item);
- });
- }
-
- handleMenuItemClick = (info: { keyPath: string, key: string }) => {
- if (info.keyPath.length <= 1) {
- return;
- }
- const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem;
- if (this.state.selectedKeys.indexOf(info.key) >= 0) {
- // deselect SubMenu child
- delete keyPathOfSelectedItem[info.key];
- } else {
- // select SubMenu child
- keyPathOfSelectedItem[info.key] = info.keyPath;
- }
- this.setState({ keyPathOfSelectedItem });
- }
-
- renderFilterIcon = () => {
- const { column, locale, prefixCls } = this.props;
- const filterIcon = column.filterIcon as any;
- const dropdownSelectedClass = this.props.selectedKeys.length > 0 ? `${prefixCls}-selected` : '';
-
- return filterIcon ? React.cloneElement(filterIcon as any, {
- title: locale.filterTitle,
- className: classNames(filterIcon.className, {
- [`${prefixCls}-icon`]: true,
- }),
- }) : ;
- }
- render() {
- const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this.props;
- // default multiple selection in filter dropdown
- const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
- const dropdownMenuClass = classNames({
- [`${dropdownPrefixCls}-menu-without-submenu`]: !this.hasSubMenu(),
- });
- const menus = column.filterDropdown ? (
-
- {column.filterDropdown}
-
- ) : (
-
-
-
-
- );
-
- return (
-
- {this.renderFilterIcon()}
-
- );
- }
-}
diff --git a/components/table/interface.js b/components/table/interface.js
index 707897ad0..55693f9ae 100644
--- a/components/table/interface.js
+++ b/components/table/interface.js
@@ -28,7 +28,7 @@ export const ColumnProps = {
defaultSortOrder: PropTypes.oneOf(['ascend', 'descend']),
colSpan: PropTypes.number,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- // className: string,
+ className: PropTypes.string,
fixed: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['left', 'right'])]),
filterIcon: PropTypes.any,
filteredValue: PropTypes.array,
@@ -81,9 +81,9 @@ export const TableRowSelection = {
export const TableProps = {
prefixCls: PropTypes.string,
dropdownPrefixCls: PropTypes.string,
- rowSelection: PropTypes.shape(TableRowSelection).loose,
+ rowSelection: PropTypes.oneOfType([PropTypes.shape(TableRowSelection).loose, null]),
pagination: PropTypes.oneOfType([PropTypes.shape(PaginationProps).loose, PropTypes.bool]),
- size: PropTypes.oneOf(['default', 'middle', 'small']),
+ size: PropTypes.oneOf(['default', 'middle', 'small', 'large']),
dataSource: PropTypes.array,
components: PropTypes.object,
columns: PropTypes.array,
@@ -103,7 +103,8 @@ export const TableProps = {
locale: PropTypes.object,
indentSize: PropTypes.number,
// onRowClick?: (record: T, index: number, event: Event) => any;
- // onRow?: (record: T, index: number) => any;
+ customRow: PropTypes.func,
+ customHeaderRow: PropTypes.func,
useFixedHeader: PropTypes.bool,
bordered: PropTypes.bool,
showHeader: PropTypes.bool,
@@ -177,6 +178,7 @@ export const FilterMenuProps = {
prefixCls: PropTypes.string,
dropdownPrefixCls: PropTypes.string,
getPopupContainer: PropTypes.func,
+ handleFilter: PropTypes.func,
}
// export interface FilterMenuState {
diff --git a/components/vc-table/demo/column-resize.js b/components/vc-table/demo/column-resize.js
index b5a95d37a..04fbf6026 100644
--- a/components/vc-table/demo/column-resize.js
+++ b/components/vc-table/demo/column-resize.js
@@ -59,7 +59,7 @@ export default {
render () {
const columns = this.columns.map((col, index) => ({
...col,
- onHeaderCell: (column) => ({
+ customHeaderCell: (column) => ({
width: column.width,
onResize: this.handleResize(index),
}),
diff --git a/components/vc-table/demo/rowAndCellClick.js b/components/vc-table/demo/rowAndCellClick.js
index fd8878b88..dfe244527 100644
--- a/components/vc-table/demo/rowAndCellClick.js
+++ b/components/vc-table/demo/rowAndCellClick.js
@@ -10,8 +10,8 @@ const onRowClick = (record, index, event) => {
}
}
-const onRowDoubleClick = (record, index) => {
- console.log(`Double click nth(${index}) row of parent, record.name: ${record.name}`)
+const onRowDoubleClick = (record, index, e) => {
+ console.log(`Double click nth(${index}) row of parent, record.name: ${record.name}`, e)
}
const columns = [{
@@ -98,7 +98,7 @@ export default {
({
+ customRow={(record, index) => ({
on: {
click: onRowClick.bind(null, record, index),
dblclick: onRowDoubleClick.bind(null, record, index),
diff --git a/components/vc-table/src/BaseTable.jsx b/components/vc-table/src/BaseTable.jsx
index 5095223e4..a5b18002a 100644
--- a/components/vc-table/src/BaseTable.jsx
+++ b/components/vc-table/src/BaseTable.jsx
@@ -46,8 +46,8 @@ const BaseTable = {
rowContextmenu: onRowContextMenu = noop,
rowMouseenter: onRowMouseEnter = noop,
rowMouseleave: onRowMouseLeave = noop,
- row: onRow = noop,
},
+ customRow = noop,
} = this.table
const { getRowKey, fixed, expander, isAnyColumnsFixed } = this
@@ -106,9 +106,9 @@ const BaseTable = {
ancestorKeys,
components,
isAnyColumnsFixed,
+ customRow,
},
on: {
- row: onRow,
rowDoubleclick: onRowDoubleClick,
rowContextmenu: onRowContextMenu,
rowMouseenter: onRowMouseEnter,
diff --git a/components/vc-table/src/Column.jsx b/components/vc-table/src/Column.jsx
index 8ad12648c..1b7022130 100644
--- a/components/vc-table/src/Column.jsx
+++ b/components/vc-table/src/Column.jsx
@@ -16,8 +16,9 @@ export default {
'right',
]),
render: PropTypes.func,
+ className: PropTypes.string,
// onCellClick: PropTypes.func,
// onCell: PropTypes.func,
- // onHeaderCell: PropTypes.func,
+ customHeaderCell: PropTypes.func,
},
}
diff --git a/components/vc-table/src/Table.jsx b/components/vc-table/src/Table.jsx
index b20b7f453..0f7651d9e 100644
--- a/components/vc-table/src/Table.jsx
+++ b/components/vc-table/src/Table.jsx
@@ -25,8 +25,8 @@ export default {
bodyStyle: PropTypes.object,
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
- // onRow: PropTypes.func,
- // onHeaderRow: PropTypes.func,
+ customRow: PropTypes.func,
+ customHeaderRow: PropTypes.func,
// onRowClick: PropTypes.func,
// onRowDoubleClick: PropTypes.func,
// onRowContextMenu: PropTypes.func,
@@ -74,6 +74,7 @@ export default {
scroll: {},
rowRef: () => null,
emptyText: () => 'No Data',
+ customHeaderRow: () => {},
}),
// static childContextTypes = {
@@ -91,7 +92,7 @@ export default {
].forEach(name => {
warningOnce(
this.$listeners[name] === undefined,
- `${name} is deprecated, please use onRow instead.`,
+ `${name} is deprecated, please use customRow instead.`,
)
})
diff --git a/components/vc-table/src/TableCell.jsx b/components/vc-table/src/TableCell.jsx
index 73662cf18..831a8dac2 100644
--- a/components/vc-table/src/TableCell.jsx
+++ b/components/vc-table/src/TableCell.jsx
@@ -41,7 +41,7 @@ export default {
component: BodyCell,
} = this
const { dataIndex, render, className = '' } = column
- const cls = column.class || className
+ const cls = className || column.class
// We should return undefined if no dataIndex is specified, but in order to
// be compatible with object-path's behavior, we return the record object instead.
let text
diff --git a/components/vc-table/src/TableHeader.jsx b/components/vc-table/src/TableHeader.jsx
index 9e6271b8e..2a1471158 100644
--- a/components/vc-table/src/TableHeader.jsx
+++ b/components/vc-table/src/TableHeader.jsx
@@ -13,7 +13,7 @@ function getHeaderRows (columns, currentRow = 0, rows) {
}
const cell = {
key: column.key,
- className: column.className || '',
+ className: column.className || column.class || '',
children: column.title,
column,
}
@@ -44,15 +44,10 @@ export default {
inject: {
table: { default: {}},
},
- methods: {
- onHeaderRow () {
- this.table.__emit('headerRow', ...arguments)
- },
- },
render () {
- const { sComponents: components, prefixCls, showHeader } = this.table
- const { expander, columns, fixed, onHeaderRow } = this
+ const { sComponents: components, prefixCls, showHeader, customHeaderRow } = this.table
+ const { expander, columns, fixed } = this
if (!showHeader) {
return null
@@ -76,7 +71,7 @@ export default {
rows={rows}
row={row}
components={components}
- onHeaderRow={onHeaderRow}
+ customHeaderRow={customHeaderRow}
/>
))
}
diff --git a/components/vc-table/src/TableHeaderRow.jsx b/components/vc-table/src/TableHeaderRow.jsx
index bfc0f538f..618bae948 100644
--- a/components/vc-table/src/TableHeaderRow.jsx
+++ b/components/vc-table/src/TableHeaderRow.jsx
@@ -11,14 +11,14 @@ const TableHeaderRow = {
row: PropTypes.array,
components: PropTypes.object,
height: PropTypes.any,
+ customHeaderRow: PropTypes.func,
},
name: 'TableHeaderRow',
render (h) {
- const { row, index, height, components, $listeners = {}} = this
- const onHeaderRow = $listeners.headerRow
+ const { row, index, height, components, customHeaderRow } = this
const HeaderRow = components.header.row
const HeaderCell = components.header.cell
- const rowProps = onHeaderRow(row.map(cell => cell.column), index)
+ const rowProps = customHeaderRow(row.map(cell => cell.column), index)
const customStyle = rowProps ? rowProps.style : {}
const style = { height, ...customStyle }
@@ -27,7 +27,7 @@ const TableHeaderRow = {
{row.map((cell, i) => {
const { column, children, className, ...cellProps } = cell
const cls = cell.class || className
- const customProps = column.onHeaderCell ? column.onHeaderCell(column) : {}
+ const customProps = column.customHeaderCell ? column.customHeaderCell(column) : {}
if (column.align) {
cellProps.style = { textAlign: column.align }
}
diff --git a/components/vc-table/src/TableRow.jsx b/components/vc-table/src/TableRow.jsx
index 3ccf1c67e..5ee9e8265 100644
--- a/components/vc-table/src/TableRow.jsx
+++ b/components/vc-table/src/TableRow.jsx
@@ -9,7 +9,7 @@ const TableRow = {
name: 'TableRow',
mixins: [BaseMixin],
props: initDefaultProps({
- // onRow: PropTypes.func,
+ customRow: PropTypes.func,
// onRowClick: PropTypes.func,
// onRowDoubleClick: PropTypes.func,
// onRowContextMenu: PropTypes.func,
@@ -175,7 +175,7 @@ const TableRow = {
columns,
record,
index,
- // onRow,
+ customRow = noop,
indent,
indentSize,
hovered,
@@ -185,9 +185,7 @@ const TableRow = {
hasExpandIcon,
renderExpandIcon,
renderExpandIconCell,
- $listeners,
} = this
- const { row: onRow = noop } = $listeners
const BodyRow = components.body.row
const BodyCell = components.body.cell
@@ -227,7 +225,7 @@ const TableRow = {
const rowClassName =
`${prefixCls} ${className} ${prefixCls}-level-${indent}`.trim()
- const rowProps = onRow(record, index)
+ const rowProps = customRow(record, index)
const customStyle = rowProps ? rowProps.style : {}
let style = { height: typeof height === 'number' ? `${height}px` : height }
diff --git a/package-lock.json b/package-lock.json
index b2cdd9e77..e1b9b05d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3424,6 +3424,14 @@
"resolved": "https://registry.npm.taobao.org/dom-align/download/dom-align-1.6.7.tgz",
"integrity": "sha1-aFgTjvtrd0Bc6ZFG0L5eT3KCgT8="
},
+ "dom-closest": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/dom-closest/-/dom-closest-0.2.0.tgz",
+ "integrity": "sha1-69n5HRvyLo1vR3h2u80+yQIWwM8=",
+ "requires": {
+ "dom-matches": "2.0.0"
+ }
+ },
"dom-converter": {
"version": "0.1.4",
"resolved": "http://r.cnpmjs.org/dom-converter/download/dom-converter-0.1.4.tgz",
@@ -3441,6 +3449,11 @@
}
}
},
+ "dom-matches": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/dom-matches/-/dom-matches-2.0.0.tgz",
+ "integrity": "sha1-0nKLQWqHUzmA6wibhI0lPPI6dYw="
+ },
"dom-scroll-into-view": {
"version": "1.2.1",
"resolved": "https://registry.npm.taobao.org/dom-scroll-into-view/download/dom-scroll-into-view-1.2.1.tgz",
diff --git a/package.json b/package.json
index 80b0c5fae..81d5ce805 100644
--- a/package.json
+++ b/package.json
@@ -131,6 +131,7 @@
"component-classes": "^1.2.6",
"css-animation": "^1.4.1",
"dom-align": "^1.6.7",
+ "dom-closest": "^0.2.0",
"dom-scroll-into-view": "^1.2.1",
"enquire.js": "^2.1.6",
"eslint-plugin-vue": "^3.13.0",