Title: {currentData.length} items
}
+ footer={currentData => Footer: {currentData.length} items
}
+ />
+ ,
+ document.getElementById('__react-content')
+);
diff --git a/components/vc-table/index.js b/components/vc-table/index.js
new file mode 100644
index 000000000..c4a842cdc
--- /dev/null
+++ b/components/vc-table/index.js
@@ -0,0 +1,9 @@
+import Table from './src/Table'
+import Column from './src/Column'
+import ColumnGroup from './src/ColumnGroup'
+
+Table.Column = Column
+Table.ColumnGroup = ColumnGroup
+
+export default Table
+export { Column, ColumnGroup }
diff --git a/components/vc-table/src/BaseTable.jsx b/components/vc-table/src/BaseTable.jsx
new file mode 100644
index 000000000..c2d0811eb
--- /dev/null
+++ b/components/vc-table/src/BaseTable.jsx
@@ -0,0 +1,189 @@
+
+import PropTypes from '../../_util/vue-types'
+import ColGroup from './ColGroup'
+import TableHeader from './TableHeader'
+import TableRow from './TableRow'
+import ExpandableRow from './ExpandableRow'
+import { mergeProps } from '../../_util/props-util'
+
+const BaseTable = {
+ name: 'BaseTable',
+ props: {
+ fixed: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.bool,
+ ]),
+ columns: PropTypes.array.isRequired,
+ tableClassName: PropTypes.string.isRequired,
+ hasHead: PropTypes.bool.isRequired,
+ hasBody: PropTypes.bool.isRequired,
+ store: PropTypes.object.isRequired,
+ expander: PropTypes.object.isRequired,
+ getRowKey: PropTypes.func,
+ isAnyColumnsFixed: PropTypes.bool,
+ },
+ inject: {
+ table: { default: {}},
+ },
+ methods: {
+ handleRowHover (isHover, key) {
+ this.props.store.setState({
+ currentHoverKey: isHover ? key : null,
+ })
+ },
+
+ renderRows (renderData, indent, ancestorKeys = []) {
+ const {
+ columnManager, components,
+ prefixCls,
+ childrenColumnName,
+ rowClassName,
+ // rowRef,
+ $listeners: {
+ rowClick: onRowClick,
+ rowDoubleclick: onRowDoubleClick,
+ rowContextmenu: onRowContextMenu,
+ rowMouseenter: onRowMouseEnter,
+ rowMouseleave: onRowMouseLeave,
+ row: onRow,
+ },
+ } = this.table
+ const { getRowKey, fixed, expander, isAnyColumnsFixed } = this
+
+ const rows = []
+
+ for (let i = 0; i < renderData.length; i++) {
+ const record = renderData[i]
+ const key = getRowKey(record, i)
+ const className = typeof rowClassName === 'string'
+ ? rowClassName
+ : rowClassName(record, i, indent)
+
+ const onHoverProps = {}
+ if (columnManager.isAnyColumnsFixed()) {
+ onHoverProps.hover = this.handleRowHover
+ }
+
+ let leafColumns
+ if (fixed === 'left') {
+ leafColumns = columnManager.leftLeafColumns()
+ } else if (fixed === 'right') {
+ leafColumns = columnManager.rightLeafColumns()
+ } else {
+ leafColumns = columnManager.leafColumns()
+ }
+
+ const rowPrefixCls = `${prefixCls}-row`
+ const expandableRowProps = {
+ props: {
+ ...expander.props,
+ fixed,
+ index: i,
+ prefixCls: rowPrefixCls,
+ record,
+ rowKey: key,
+ needIndentSpaced: expander.needIndentSpaced,
+ },
+ key,
+ on: {
+ rowClick: onRowClick,
+ expandedChange: expander.handleExpandChange,
+ },
+ scopedSlots: {
+ default: (expandableRow) => {
+ const tableRowProps = mergeProps({
+ props: {
+ fixed,
+ indent,
+ record,
+ index: i,
+ prefixCls: rowPrefixCls,
+ childrenColumnName: childrenColumnName,
+ columns: leafColumns,
+ rowKey: key,
+ ancestorKeys,
+ components,
+ isAnyColumnsFixed,
+ },
+ on: {
+ row: onRow,
+ rowDoubleclick: onRowDoubleClick,
+ rowContextmenu: onRowContextMenu,
+ rowMouseenter: onRowMouseEnter,
+ rowMouseleave: onRowMouseLeave,
+ ...onHoverProps,
+ },
+ class: className,
+ ref: `row_${i}_${indent}`,
+ }, expandableRow)
+ return (
+
+ )
+ },
+ },
+ }
+ const row = (
+
+ )
+
+ rows.push(row)
+
+ expander.renderRows(
+ this.renderRows,
+ rows,
+ record,
+ i,
+ indent,
+ fixed,
+ key,
+ ancestorKeys
+ )
+ }
+ return rows
+ },
+ },
+
+ render () {
+ const { components, prefixCls, scroll, data, getBodyWrapper } = this.table
+ const { expander, tableClassName, hasHead, hasBody, fixed, columns } = this
+ const tableStyle = {}
+
+ if (!fixed && scroll.x) {
+ // not set width, then use content fixed width
+ if (scroll.x === true) {
+ tableStyle.tableLayout = 'fixed'
+ } else {
+ tableStyle.width = scroll.x
+ }
+ }
+
+ const Table = hasBody ? components.table : 'table'
+ const BodyWrapper = components.body.wrapper
+
+ let body
+ if (hasBody) {
+ body = (
+
+ {this.renderRows(data, 0)}
+
+ )
+ if (getBodyWrapper) {
+ body = getBodyWrapper(body)
+ }
+ }
+
+ return (
+
+
+ {hasHead && }
+ {body}
+
+ )
+ },
+}
+
+export default BaseTable
diff --git a/components/vc-table/src/BodyTable.jsx b/components/vc-table/src/BodyTable.jsx
new file mode 100644
index 000000000..6cb8d69be
--- /dev/null
+++ b/components/vc-table/src/BodyTable.jsx
@@ -0,0 +1,117 @@
+import PropTypes from '../../_util/vue-types'
+import { measureScrollbar } from './utils'
+import BaseTable from './BaseTable'
+
+export default {
+ name: 'BodyTable',
+ props: {
+ fixed: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.bool,
+ ]),
+ columns: PropTypes.array.isRequired,
+ tableClassName: PropTypes.string.isRequired,
+ handleBodyScroll: PropTypes.func.isRequired,
+ getRowKey: PropTypes.func.isRequired,
+ expander: PropTypes.object.isRequired,
+ isAnyColumnsFixed: PropTypes.bool,
+ },
+ inject: {
+ table: { default: {}},
+ },
+ render () {
+ const { prefixCls, scroll } = this.table
+ const {
+ columns,
+ fixed,
+ tableClassName,
+ getRowKey,
+ handleBodyScroll,
+ expander,
+ isAnyColumnsFixed,
+ } = this
+ let { useFixedHeader } = this.table
+ const bodyStyle = { ...this.table.bodyStyle }
+ const innerBodyStyle = {}
+
+ if (scroll.x || fixed) {
+ bodyStyle.overflowX = bodyStyle.overflowX || 'auto'
+ // Fix weired webkit render bug
+ // https://github.com/ant-design/ant-design/issues/7783
+ bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)'
+ }
+
+ if (scroll.y) {
+ // maxHeight will make fixed-Table scrolling not working
+ // so we only set maxHeight to body-Table here
+ if (fixed) {
+ innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y
+ innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll'
+ } else {
+ bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y
+ }
+ bodyStyle.overflowY = bodyStyle.overflowY || 'scroll'
+ useFixedHeader = true
+
+ // Add negative margin bottom for scroll bar overflow bug
+ const scrollbarWidth = measureScrollbar()
+ if (scrollbarWidth > 0 && fixed) {
+ bodyStyle.marginBottom = `-${scrollbarWidth}px`
+ bodyStyle.paddingBottom = '0px'
+ }
+ }
+
+ const baseTable = (
+
+ )
+
+ if (fixed && columns.length) {
+ let refName
+ if (columns[0].fixed === 'left' || columns[0].fixed === true) {
+ refName = 'fixedColumnsBodyLeft'
+ } else if (columns[0].fixed === 'right') {
+ refName = 'fixedColumnsBodyRight'
+ }
+ delete bodyStyle.overflowX
+ delete bodyStyle.overflowY
+ return (
+
+ )
+ }
+ return (
+
+ {baseTable}
+
+ )
+ },
+
+}
+
diff --git a/components/vc-table/src/ColGroup.jsx b/components/vc-table/src/ColGroup.jsx
new file mode 100644
index 000000000..0df1afe27
--- /dev/null
+++ b/components/vc-table/src/ColGroup.jsx
@@ -0,0 +1,53 @@
+import PropTypes from '../../_util/vue-types'
+
+export default {
+ name: 'ColGroup',
+ props: {
+ fixed: PropTypes.string,
+ },
+ inject: {
+ table: { default: {}},
+ },
+ render () {
+ const { fixed, table } = this
+ const { prefixCls, expandIconAsCell } = table
+
+ let cols = []
+
+ if (expandIconAsCell && fixed !== 'right') {
+ cols.push(
+
+ )
+ }
+
+ let leafColumns
+
+ if (fixed === 'left') {
+ leafColumns = table.columnManager.leftLeafColumns()
+ } else if (fixed === 'right') {
+ leafColumns = table.columnManager.rightLeafColumns()
+ } else {
+ leafColumns = table.columnManager.leafColumns()
+ }
+ cols = cols.concat(
+ leafColumns.map(c => {
+ return (
+
+ )
+ })
+ )
+ return (
+
+ {cols}
+
+ )
+ },
+
+}
+
diff --git a/components/vc-table/src/Column.jsx b/components/vc-table/src/Column.jsx
new file mode 100644
index 000000000..8ad12648c
--- /dev/null
+++ b/components/vc-table/src/Column.jsx
@@ -0,0 +1,23 @@
+import PropTypes from '../../_util/vue-types'
+
+export default {
+ name: 'Column',
+ props: {
+ colSpan: PropTypes.number,
+ title: PropTypes.any,
+ dataIndex: PropTypes.string,
+ width: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.string,
+ ]),
+ fixed: PropTypes.oneOf([
+ true,
+ 'left',
+ 'right',
+ ]),
+ render: PropTypes.func,
+ // onCellClick: PropTypes.func,
+ // onCell: PropTypes.func,
+ // onHeaderCell: PropTypes.func,
+ },
+}
diff --git a/components/vc-table/src/ColumnGroup.jsx b/components/vc-table/src/ColumnGroup.jsx
new file mode 100644
index 000000000..ad329cd15
--- /dev/null
+++ b/components/vc-table/src/ColumnGroup.jsx
@@ -0,0 +1,9 @@
+import PropTypes from '../../_util/vue-types'
+
+export default {
+ name: 'ColumnGroup',
+ props: {
+ title: PropTypes.any,
+ },
+ isTableColumnGroup: true,
+}
diff --git a/components/vc-table/src/ColumnManager.js b/components/vc-table/src/ColumnManager.js
new file mode 100644
index 000000000..a90756c14
--- /dev/null
+++ b/components/vc-table/src/ColumnManager.js
@@ -0,0 +1,150 @@
+export default class ColumnManager {
+ _cached = {}
+
+ constructor (columns, elements) {
+ this.columns = columns || this.normalize(elements)
+ }
+
+ isAnyColumnsFixed () {
+ return this._cache('isAnyColumnsFixed', () => {
+ return this.columns.some(column => !!column.fixed)
+ })
+ }
+
+ isAnyColumnsLeftFixed () {
+ return this._cache('isAnyColumnsLeftFixed', () => {
+ return this.columns.some(
+ column => column.fixed === 'left' || column.fixed === true
+ )
+ })
+ }
+
+ isAnyColumnsRightFixed () {
+ return this._cache('isAnyColumnsRightFixed', () => {
+ return this.columns.some(
+ column => column.fixed === 'right'
+ )
+ })
+ }
+
+ leftColumns () {
+ return this._cache('leftColumns', () => {
+ return this.groupedColumns().filter(
+ column => column.fixed === 'left' || column.fixed === true
+ )
+ })
+ }
+
+ rightColumns () {
+ return this._cache('rightColumns', () => {
+ return this.groupedColumns().filter(
+ column => column.fixed === 'right'
+ )
+ })
+ }
+
+ leafColumns () {
+ return this._cache('leafColumns', () =>
+ this._leafColumns(this.columns)
+ )
+ }
+
+ leftLeafColumns () {
+ return this._cache('leftLeafColumns', () =>
+ this._leafColumns(this.leftColumns())
+ )
+ }
+
+ rightLeafColumns () {
+ return this._cache('rightLeafColumns', () =>
+ this._leafColumns(this.rightColumns())
+ )
+ }
+
+ // add appropriate rowspan and colspan to column
+ groupedColumns () {
+ return this._cache('groupedColumns', () => {
+ const _groupColumns = (columns, currentRow = 0, parentColumn = {}, rows = []) => {
+ // track how many rows we got
+ rows[currentRow] = rows[currentRow] || []
+ const grouped = []
+ const setRowSpan = column => {
+ const rowSpan = rows.length - currentRow
+ if (column &&
+ !column.children && // parent columns are supposed to be one row
+ rowSpan > 1 &&
+ (!column.rowSpan || column.rowSpan < rowSpan)
+ ) {
+ column.rowSpan = rowSpan
+ }
+ }
+ columns.forEach((column, index) => {
+ const newColumn = { ...column }
+ rows[currentRow].push(newColumn)
+ parentColumn.colSpan = parentColumn.colSpan || 0
+ if (newColumn.children && newColumn.children.length > 0) {
+ newColumn.children = _groupColumns(newColumn.children, currentRow + 1, newColumn, rows)
+ parentColumn.colSpan = parentColumn.colSpan + newColumn.colSpan
+ } else {
+ parentColumn.colSpan++
+ }
+ // update rowspan to all same row columns
+ for (let i = 0; i < rows[currentRow].length - 1; ++i) {
+ setRowSpan(rows[currentRow][i])
+ }
+ // last column, update rowspan immediately
+ if (index + 1 === columns.length) {
+ setRowSpan(newColumn)
+ }
+ grouped.push(newColumn)
+ })
+ return grouped
+ }
+ return _groupColumns(this.columns)
+ })
+ }
+
+ normalize (elements) {
+ const columns = []
+ elements.forEach(element => {
+ if (!element.tag) {
+ return
+ }
+ debugger
+ const column = { ...element.props }
+ if (element.key) {
+ column.key = element.key
+ }
+ if (element.type.isTableColumnGroup) {
+ column.children = this.normalize(column.children)
+ }
+ columns.push(column)
+ })
+ return columns
+ }
+
+ reset (columns, elements) {
+ this.columns = columns || this.normalize(elements)
+ this._cached = {}
+ }
+
+ _cache (name, fn) {
+ if (name in this._cached) {
+ return this._cached[name]
+ }
+ this._cached[name] = fn()
+ return this._cached[name]
+ }
+
+ _leafColumns (columns) {
+ const leafColumns = []
+ columns.forEach(column => {
+ if (!column.children) {
+ leafColumns.push(column)
+ } else {
+ leafColumns.push(...this._leafColumns(column.children))
+ }
+ })
+ return leafColumns
+ }
+}
diff --git a/components/vc-table/src/ExpandIcon.jsx b/components/vc-table/src/ExpandIcon.jsx
new file mode 100644
index 000000000..490386d43
--- /dev/null
+++ b/components/vc-table/src/ExpandIcon.jsx
@@ -0,0 +1,34 @@
+import PropTypes from '../../_util/vue-types'
+import BaseMixin from '../../_util/BaseMixin'
+export default {
+ mixins: [BaseMixin],
+ name: 'ExpandIcon',
+ props: {
+ record: PropTypes.object,
+ prefixCls: PropTypes.string,
+ expandable: PropTypes.any,
+ expanded: PropTypes.bool,
+ needIndentSpaced: PropTypes.bool,
+ },
+ methods: {
+ onExpand (e) {
+ this.__emit('expand', this.record, e)
+ },
+ },
+
+ render () {
+ const { expandable, prefixCls, onExpand, needIndentSpaced, expanded } = this
+ if (expandable) {
+ const expandClassName = expanded ? 'expanded' : 'collapsed'
+ return (
+
+ )
+ } else if (needIndentSpaced) {
+ return
+ }
+ return null
+ },
+}
diff --git a/components/vc-table/src/ExpandableRow.js b/components/vc-table/src/ExpandableRow.js
new file mode 100644
index 000000000..895cd886c
--- /dev/null
+++ b/components/vc-table/src/ExpandableRow.js
@@ -0,0 +1,126 @@
+import PropTypes from '../../_util/vue-types'
+import ExpandIcon from './ExpandIcon'
+import BaseMixin from '../../_util/BaseMixin'
+
+const ExpandableRow = {
+ mixins: [BaseMixin],
+ name: 'ExpandableRow',
+ props: {
+ prefixCls: PropTypes.string.isRequired,
+ rowKey: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ ]).isRequired,
+ fixed: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.bool,
+ ]),
+ record: PropTypes.object.isRequired,
+ indentSize: PropTypes.number,
+ needIndentSpaced: PropTypes.bool.isRequired,
+ expandRowByClick: PropTypes.bool,
+ expanded: PropTypes.bool.isRequired,
+ expandIconAsCell: PropTypes.bool,
+ expandIconColumnIndex: PropTypes.number,
+ childrenColumnName: PropTypes.string,
+ expandedRowRender: PropTypes.func,
+ // onExpandedChange: PropTypes.func.isRequired,
+ // onRowClick: PropTypes.func,
+ // children: PropTypes.func.isRequired,
+ },
+
+ beforeDestroy () {
+ this.handleDestroy()
+ },
+
+ hasExpandIcon (columnIndex) {
+ const { expandRowByClick } = this
+ return !this.expandIconAsCell &&
+ !expandRowByClick &&
+ columnIndex === this.expandIconColumnIndex
+ },
+
+ handleExpandChange (record, event) {
+ const { expanded, rowKey } = this
+ this.__emit('expandedChange', !expanded, record, event, rowKey)
+ },
+
+ handleDestroy () {
+ const { rowKey, record } = this
+ this.__emit('expandedChange', false, record, null, rowKey, true)
+ },
+
+ handleRowClick (record, index, event) {
+ const { expandRowByClick } = this
+ if (expandRowByClick) {
+ this.handleExpandChange(record, event)
+ }
+ this.__emit('rowClick', record, index, event)
+ },
+
+ renderExpandIcon () {
+ const { prefixCls, expanded, record, needIndentSpaced } = this
+
+ return (
+
+ )
+ },
+
+ renderExpandIconCell (cells) {
+ if (!this.expandIconAsCell) {
+ return
+ }
+ const { prefixCls } = this
+
+ cells.push(
+
+ {this.renderExpandIcon()}
+ |
+ )
+ },
+
+ render () {
+ const {
+ childrenColumnName,
+ expandedRowRender,
+ indentSize,
+ record,
+ fixed,
+ $scopedSlots,
+ } = this
+
+ this.expandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false
+ this.expandIconColumnIndex = fixed !== 'right' ? this.expandIconColumnIndex : -1
+ const childrenData = record[childrenColumnName]
+ this.expandable = !!(childrenData || expandedRowRender)
+
+ const expandableRowProps = {
+ props: {
+ indentSize,
+ hasExpandIcon: this.hasExpandIcon,
+ renderExpandIcon: this.renderExpandIcon,
+ renderExpandIconCell: this.renderExpandIconCell,
+ },
+ on: {
+ rowClick: this.handleRowClick,
+ },
+
+ }
+
+ return $scopedSlots.default && $scopedSlots.default(expandableRowProps)
+ },
+}
+
+export default connect(({ expandedRowKeys }, { rowKey }) => ({
+ expanded: !!~expandedRowKeys.indexOf(rowKey),
+}))(ExpandableRow)
diff --git a/components/vc-table/src/ExpandableTable.js b/components/vc-table/src/ExpandableTable.js
new file mode 100644
index 000000000..025a59872
--- /dev/null
+++ b/components/vc-table/src/ExpandableTable.js
@@ -0,0 +1,223 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'mini-store'
+import TableRow from './TableRow'
+import { remove } from './utils'
+
+class ExpandableTable extends React.Component {
+ static propTypes = {
+ expandIconAsCell: PropTypes.bool,
+ expandedRowKeys: PropTypes.array,
+ expandedRowClassName: PropTypes.func,
+ defaultExpandAllRows: PropTypes.bool,
+ defaultExpandedRowKeys: PropTypes.array,
+ expandIconColumnIndex: PropTypes.number,
+ expandedRowRender: PropTypes.func,
+ childrenColumnName: PropTypes.string,
+ indentSize: PropTypes.number,
+ onExpand: PropTypes.func,
+ onExpandedRowsChange: PropTypes.func,
+ columnManager: PropTypes.object.isRequired,
+ store: PropTypes.object.isRequired,
+ prefixCls: PropTypes.string.isRequired,
+ data: PropTypes.array,
+ children: PropTypes.func.isRequired,
+ }
+
+ static defaultProps = {
+ expandIconAsCell: false,
+ expandedRowClassName: () => '',
+ expandIconColumnIndex: 0,
+ defaultExpandAllRows: false,
+ defaultExpandedRowKeys: [],
+ childrenColumnName: 'children',
+ indentSize: 15,
+ onExpand () {},
+ onExpandedRowsChange () {},
+ }
+
+ constructor (props) {
+ super(props)
+
+ const {
+ data,
+ childrenColumnName,
+ defaultExpandAllRows,
+ expandedRowKeys,
+ defaultExpandedRowKeys,
+ getRowKey,
+ } = props
+
+ let finnalExpandedRowKeys = []
+ let rows = [...data]
+
+ if (defaultExpandAllRows) {
+ for (let i = 0; i < rows.length; i++) {
+ const row = rows[i]
+ finnalExpandedRowKeys.push(getRowKey(row, i))
+ rows = rows.concat(row[childrenColumnName] || [])
+ }
+ } else {
+ finnalExpandedRowKeys = expandedRowKeys || defaultExpandedRowKeys
+ }
+
+ this.columnManager = props.columnManager
+ this.store = props.store
+
+ this.store.setState({
+ expandedRowsHeight: {},
+ expandedRowKeys: finnalExpandedRowKeys,
+ })
+ }
+
+ componentWillReceiveProps (nextProps) {
+ if ('expandedRowKeys' in nextProps) {
+ this.store.setState({
+ expandedRowKeys: nextProps.expandedRowKeys,
+ })
+ }
+ }
+
+ handleExpandChange = (expanded, record, event, rowKey, destroy = false) => {
+ if (event) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+
+ const { onExpandedRowsChange, onExpand } = this.props
+ let { expandedRowKeys } = this.store.getState()
+
+ if (expanded) {
+ // row was expaned
+ expandedRowKeys = [...expandedRowKeys, rowKey]
+ } else {
+ // row was collapse
+ const expandedRowIndex = expandedRowKeys.indexOf(rowKey)
+ if (expandedRowIndex !== -1) {
+ expandedRowKeys = remove(expandedRowKeys, rowKey)
+ }
+ }
+
+ if (!this.props.expandedRowKeys) {
+ this.store.setState({ expandedRowKeys })
+ }
+
+ onExpandedRowsChange(expandedRowKeys)
+ if (!destroy) {
+ onExpand(expanded, record)
+ }
+ }
+
+ renderExpandIndentCell = (rows, fixed) => {
+ const { prefixCls, expandIconAsCell } = this.props
+ if (!expandIconAsCell || fixed === 'right' || !rows.length) {
+ return
+ }
+
+ const iconColumn = {
+ key: 'rc-table-expand-icon-cell',
+ className: `${prefixCls}-expand-icon-th`,
+ title: '',
+ rowSpan: rows.length,
+ }
+
+ rows[0].unshift({ ...iconColumn, column: iconColumn })
+ }
+
+ renderExpandedRow (record, index, render, className, ancestorKeys, indent, fixed) {
+ const { prefixCls, expandIconAsCell, indentSize } = this.props
+ let colCount
+ if (fixed === 'left') {
+ colCount = this.columnManager.leftLeafColumns().length
+ } else if (fixed === 'right') {
+ colCount = this.columnManager.rightLeafColumns().length
+ } else {
+ colCount = this.columnManager.leafColumns().length
+ }
+ const columns = [{
+ key: 'extra-row',
+ render: () => ({
+ props: {
+ colSpan: colCount,
+ },
+ children: fixed !== 'right' ? render(record, index, indent) : ' ',
+ }),
+ }]
+ if (expandIconAsCell && fixed !== 'right') {
+ columns.unshift({
+ key: 'expand-icon-placeholder',
+ render: () => null,
+ })
+ }
+ const parentKey = ancestorKeys[ancestorKeys.length - 1]
+ const rowKey = `${parentKey}-extra-row`
+ const components = {
+ body: {
+ row: 'tr',
+ cell: 'td',
+ },
+ }
+
+ return (
+
+ )
+ }
+
+ renderRows = (renderRows, rows, record, index, indent, fixed, parentKey, ancestorKeys) => {
+ const { expandedRowClassName, expandedRowRender, childrenColumnName } = this.props
+ const childrenData = record[childrenColumnName]
+ const nextAncestorKeys = [...ancestorKeys, parentKey]
+ const nextIndent = indent + 1
+
+ if (expandedRowRender) {
+ rows.push(
+ this.renderExpandedRow(
+ record,
+ index,
+ expandedRowRender,
+ expandedRowClassName(record, index, indent),
+ nextAncestorKeys,
+ nextIndent,
+ fixed,
+ ),
+ )
+ }
+
+ if (childrenData) {
+ rows.push(
+ ...renderRows(
+ childrenData,
+ nextIndent,
+ nextAncestorKeys,
+ )
+ )
+ }
+ }
+
+ render () {
+ const { data, childrenColumnName, children } = this.props
+ const needIndentSpaced = data.some(record => record[childrenColumnName])
+
+ return children({
+ props: this.props,
+ needIndentSpaced,
+ renderRows: this.renderRows,
+ handleExpandChange: this.handleExpandChange,
+ renderExpandIndentCell: this.renderExpandIndentCell,
+ })
+ }
+}
+
+export default connect()(ExpandableTable)
diff --git a/components/vc-table/src/HeadTable.jsx b/components/vc-table/src/HeadTable.jsx
new file mode 100644
index 000000000..e2095b364
--- /dev/null
+++ b/components/vc-table/src/HeadTable.jsx
@@ -0,0 +1,56 @@
+import PropTypes from '../../_util/vue-types'
+import { measureScrollbar } from './utils'
+import BaseTable from './BaseTable'
+
+export default {
+ name: 'HeadTable',
+ props: {
+ fixed: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.bool,
+ ]),
+ columns: PropTypes.array.isRequired,
+ tableClassName: PropTypes.string.isRequired,
+ handleBodyScrollLeft: PropTypes.func.isRequired,
+ expander: PropTypes.object.isRequired,
+ },
+ render () {
+ const { columns, fixed, tableClassName, handleBodyScrollLeft, expander, table } = this
+ const { prefixCls, scroll, showHeader } = table
+ let { useFixedHeader } = table
+ const headStyle = {}
+
+ if (scroll.y) {
+ useFixedHeader = true
+ // Add negative margin bottom for scroll bar overflow bug
+ const scrollbarWidth = measureScrollbar('horizontal')
+ if (scrollbarWidth > 0 && !fixed) {
+ headStyle.marginBottom = `-${scrollbarWidth}px`
+ headStyle.paddingBottom = '0px'
+ }
+ }
+
+ if (!useFixedHeader || !showHeader) {
+ return null
+ }
+ return (
+
+ )
+ },
+
+}
diff --git a/components/vc-table/src/Table.js b/components/vc-table/src/Table.js
new file mode 100644
index 000000000..566e522de
--- /dev/null
+++ b/components/vc-table/src/Table.js
@@ -0,0 +1,475 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { debounce, warningOnce } from './utils'
+import shallowequal from 'shallowequal'
+import addEventListener from 'rc-util/lib/Dom/addEventListener'
+import { Provider, create } from 'mini-store'
+import merge from 'lodash/merge'
+import ColumnManager from './ColumnManager'
+import classes from 'component-classes'
+import HeadTable from './HeadTable'
+import BodyTable from './BodyTable'
+import ExpandableTable from './ExpandableTable'
+
+export default class Table extends React.Component {
+ static propTypes = {
+ data: PropTypes.array,
+ useFixedHeader: PropTypes.bool,
+ columns: PropTypes.array,
+ prefixCls: PropTypes.string,
+ bodyStyle: PropTypes.object,
+ style: PropTypes.object,
+ rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ onRow: PropTypes.func,
+ onHeaderRow: PropTypes.func,
+ onRowClick: PropTypes.func,
+ onRowDoubleClick: PropTypes.func,
+ onRowContextMenu: PropTypes.func,
+ onRowMouseEnter: PropTypes.func,
+ onRowMouseLeave: PropTypes.func,
+ showHeader: PropTypes.bool,
+ title: PropTypes.func,
+ id: PropTypes.string,
+ footer: PropTypes.func,
+ emptyText: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+ scroll: PropTypes.object,
+ rowRef: PropTypes.func,
+ getBodyWrapper: PropTypes.func,
+ children: PropTypes.node,
+ components: PropTypes.shape({
+ table: PropTypes.any,
+ header: PropTypes.shape({
+ wrapper: PropTypes.any,
+ row: PropTypes.any,
+ cell: PropTypes.any,
+ }),
+ body: PropTypes.shape({
+ wrapper: PropTypes.any,
+ row: PropTypes.any,
+ cell: PropTypes.any,
+ }),
+ }),
+ ...ExpandableTable.PropTypes,
+ }
+
+ static childContextTypes = {
+ table: PropTypes.any,
+ components: PropTypes.any,
+ }
+
+ static defaultProps = {
+ data: [],
+ useFixedHeader: false,
+ rowKey: 'key',
+ rowClassName: () => '',
+ onRow () {},
+ onHeaderRow () {},
+ prefixCls: 'rc-table',
+ bodyStyle: {},
+ style: {},
+ showHeader: true,
+ scroll: {},
+ rowRef: () => null,
+ emptyText: () => 'No Data',
+ }
+
+ constructor (props) {
+ super(props);
+
+ [
+ 'onRowClick',
+ 'onRowDoubleClick',
+ 'onRowContextMenu',
+ 'onRowMouseEnter',
+ 'onRowMouseLeave',
+ ].forEach(name => {
+ warningOnce(
+ props[name] === undefined,
+ `${name} is deprecated, please use onRow instead.`,
+ )
+ })
+
+ warningOnce(
+ props.getBodyWrapper === undefined,
+ 'getBodyWrapper is deprecated, please use custom components instead.',
+ )
+
+ this.columnManager = new ColumnManager(props.columns, props.children)
+
+ this.store = create({
+ currentHoverKey: null,
+ fixedColumnsHeadRowsHeight: [],
+ fixedColumnsBodyRowsHeight: [],
+ })
+
+ this.setScrollPosition('left')
+
+ this.debouncedWindowResize = debounce(this.handleWindowResize, 150)
+ }
+
+ getChildContext () {
+ return {
+ table: {
+ props: this.props,
+ columnManager: this.columnManager,
+ saveRef: this.saveRef,
+ components: merge({
+ table: 'table',
+ header: {
+ wrapper: 'thead',
+ row: 'tr',
+ cell: 'th',
+ },
+ body: {
+ wrapper: 'tbody',
+ row: 'tr',
+ cell: 'td',
+ },
+ }, this.props.components),
+ },
+ }
+ }
+
+ componentDidMount () {
+ if (this.columnManager.isAnyColumnsFixed()) {
+ this.handleWindowResize()
+ this.resizeEvent = addEventListener(
+ window, 'resize', this.debouncedWindowResize
+ )
+ }
+ }
+
+ componentWillReceiveProps (nextProps) {
+ if (nextProps.columns && nextProps.columns !== this.props.columns) {
+ this.columnManager.reset(nextProps.columns)
+ } else if (nextProps.children !== this.props.children) {
+ this.columnManager.reset(null, nextProps.children)
+ }
+ }
+
+ componentDidUpdate (prevProps) {
+ if (this.columnManager.isAnyColumnsFixed()) {
+ this.handleWindowResize()
+ if (!this.resizeEvent) {
+ this.resizeEvent = addEventListener(
+ window, 'resize', this.debouncedWindowResize
+ )
+ }
+ }
+ // when table changes to empty, reset scrollLeft
+ if (prevProps.data.length > 0 && this.props.data.length === 0 && this.hasScrollX()) {
+ this.resetScrollX()
+ }
+ }
+
+ componentWillUnmount () {
+ if (this.resizeEvent) {
+ this.resizeEvent.remove()
+ }
+ if (this.debouncedWindowResize) {
+ this.debouncedWindowResize.cancel()
+ }
+ }
+
+ getRowKey = (record, index) => {
+ const rowKey = this.props.rowKey
+ const key = (typeof rowKey === 'function')
+ ? rowKey(record, index) : record[rowKey]
+ warningOnce(
+ key !== undefined,
+ 'Each record in table should have a unique `key` prop,' +
+ 'or set `rowKey` to an unique primary key.'
+ )
+ return key === undefined ? index : key
+ }
+
+ setScrollPosition (position) {
+ this.scrollPosition = position
+ if (this.tableNode) {
+ const { prefixCls } = this.props
+ if (position === 'both') {
+ classes(this.tableNode)
+ .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
+ .add(`${prefixCls}-scroll-position-left`)
+ .add(`${prefixCls}-scroll-position-right`)
+ } else {
+ classes(this.tableNode)
+ .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
+ .add(`${prefixCls}-scroll-position-${position}`)
+ }
+ }
+ }
+
+ setScrollPositionClassName () {
+ const node = this.bodyTable
+ const scrollToLeft = node.scrollLeft === 0
+ const scrollToRight = node.scrollLeft + 1 >=
+ node.children[0].getBoundingClientRect().width -
+ node.getBoundingClientRect().width
+ if (scrollToLeft && scrollToRight) {
+ this.setScrollPosition('both')
+ } else if (scrollToLeft) {
+ this.setScrollPosition('left')
+ } else if (scrollToRight) {
+ this.setScrollPosition('right')
+ } else if (this.scrollPosition !== 'middle') {
+ this.setScrollPosition('middle')
+ }
+ }
+
+ handleWindowResize = () => {
+ this.syncFixedTableRowHeight()
+ this.setScrollPositionClassName()
+ }
+
+ syncFixedTableRowHeight = () => {
+ const tableRect = this.tableNode.getBoundingClientRect()
+ // If tableNode's height less than 0, suppose it is hidden and don't recalculate rowHeight.
+ // see: https://github.com/ant-design/ant-design/issues/4836
+ if (tableRect.height !== undefined && tableRect.height <= 0) {
+ return
+ }
+ const { prefixCls } = this.props
+ const headRows = this.headTable
+ ? this.headTable.querySelectorAll('thead')
+ : this.bodyTable.querySelectorAll('thead')
+ const bodyRows = this.bodyTable.querySelectorAll(`.${prefixCls}-row`) || []
+ const fixedColumnsHeadRowsHeight = [].map.call(
+ headRows, row => row.getBoundingClientRect().height || 'auto'
+ )
+ const fixedColumnsBodyRowsHeight = [].map.call(
+ bodyRows, row => row.getBoundingClientRect().height || 'auto'
+ )
+ const state = this.store.getState()
+ if (shallowequal(state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
+ shallowequal(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
+ return
+ }
+
+ this.store.setState({
+ fixedColumnsHeadRowsHeight,
+ fixedColumnsBodyRowsHeight,
+ })
+ }
+
+ resetScrollX () {
+ if (this.headTable) {
+ this.headTable.scrollLeft = 0
+ }
+ if (this.bodyTable) {
+ this.bodyTable.scrollLeft = 0
+ }
+ }
+
+ hasScrollX () {
+ const { scroll = {}} = this.props
+ return 'x' in scroll
+ }
+
+ handleBodyScrollLeft = (e) => {
+ // Fix https://github.com/ant-design/ant-design/issues/7635
+ if (e.currentTarget !== e.target) {
+ return
+ }
+ const target = e.target
+ const { scroll = {}} = this.props
+ const { headTable, bodyTable } = this
+ if (target.scrollLeft !== this.lastScrollLeft && scroll.x) {
+ if (target === bodyTable && headTable) {
+ headTable.scrollLeft = target.scrollLeft
+ } else if (target === headTable && bodyTable) {
+ bodyTable.scrollLeft = target.scrollLeft
+ }
+ this.setScrollPositionClassName()
+ }
+ // Remember last scrollLeft for scroll direction detecting.
+ this.lastScrollLeft = target.scrollLeft
+ }
+
+ handleBodyScrollTop = (e) => {
+ const target = e.target
+ const { scroll = {}} = this.props
+ const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this
+ if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== headTable) {
+ const scrollTop = target.scrollTop
+ if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) {
+ fixedColumnsBodyLeft.scrollTop = scrollTop
+ }
+ if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) {
+ fixedColumnsBodyRight.scrollTop = scrollTop
+ }
+ if (bodyTable && target !== bodyTable) {
+ bodyTable.scrollTop = scrollTop
+ }
+ }
+ // Remember last scrollTop for scroll direction detecting.
+ this.lastScrollTop = target.scrollTop
+ }
+
+ handleBodyScroll = (e) => {
+ this.handleBodyScrollLeft(e)
+ this.handleBodyScrollTop(e)
+ }
+
+ saveRef = (name) => (node) => {
+ this[name] = node
+ }
+
+ renderMainTable () {
+ const { scroll, prefixCls } = this.props
+ const isAnyColumnsFixed = this.columnManager.isAnyColumnsFixed()
+ const scrollable = isAnyColumnsFixed || scroll.x || scroll.y
+
+ const table = [
+ this.renderTable({
+ columns: this.columnManager.groupedColumns(),
+ isAnyColumnsFixed,
+ }),
+ this.renderEmptyText(),
+ this.renderFooter(),
+ ]
+
+ return scrollable ? (
+ {table}
+ ) : table
+ }
+
+ renderLeftFixedTable () {
+ const { prefixCls } = this.props
+
+ return (
+
+ {this.renderTable({
+ columns: this.columnManager.leftColumns(),
+ fixed: 'left',
+ })}
+
+ )
+ }
+
+ renderRightFixedTable () {
+ const { prefixCls } = this.props
+
+ return (
+
+ {this.renderTable({
+ columns: this.columnManager.rightColumns(),
+ fixed: 'right',
+ })}
+
+ )
+ }
+
+ renderTable (options) {
+ const { columns, fixed, isAnyColumnsFixed } = options
+ const { prefixCls, scroll = {}} = this.props
+ const tableClassName = (scroll.x || fixed) ? `${prefixCls}-fixed` : ''
+
+ const headTable = (
+
+ )
+
+ const bodyTable = (
+
+ )
+
+ return [headTable, bodyTable]
+ }
+
+ renderTitle () {
+ const { title, prefixCls } = this.props
+ return title ? (
+
+ {title(this.props.data)}
+
+ ) : null
+ }
+
+ renderFooter () {
+ const { footer, prefixCls } = this.props
+ return footer ? (
+
+ {footer(this.props.data)}
+
+ ) : null
+ }
+
+ renderEmptyText () {
+ const { emptyText, prefixCls, data } = this.props
+ if (data.length) {
+ return null
+ }
+ const emptyClassName = `${prefixCls}-placeholder`
+ return (
+
+ {(typeof emptyText === 'function') ? emptyText() : emptyText}
+
+ )
+ }
+
+ render () {
+ const props = this.props
+ const prefixCls = props.prefixCls
+
+ let className = props.prefixCls
+ if (props.className) {
+ className += ` ${props.className}`
+ }
+ if (props.useFixedHeader || (props.scroll && props.scroll.y)) {
+ className += ` ${prefixCls}-fixed-header`
+ }
+ if (this.scrollPosition === 'both') {
+ className += ` ${prefixCls}-scroll-position-left ${prefixCls}-scroll-position-right`
+ } else {
+ className += ` ${prefixCls}-scroll-position-${this.scrollPosition}`
+ }
+ const hasLeftFixed = this.columnManager.isAnyColumnsLeftFixed()
+ const hasRightFixed = this.columnManager.isAnyColumnsRightFixed()
+
+ return (
+
+
+ {(expander) => {
+ this.expander = expander
+ return (
+
+ {this.renderTitle()}
+
+ {this.renderMainTable()}
+ {hasLeftFixed && this.renderLeftFixedTable()}
+ {hasRightFixed && this.renderRightFixedTable()}
+
+