feat: update vc-table to 6.4.0

components/steps/__tests__/__snapshots__/demo.test.js.snap

@@ -51,7 +51,7 @@ exports[`renders ./components/steps/demo/error.md correctly 1`] = `
   </div>
   <div class="ant-steps-item ant-steps-item-error">
     <div class="ant-steps-item-tail"></div>
-    <div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-cross"></span></div>
+    <div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-close"></span></div>
     <div class="ant-steps-item-content">
       <div class="ant-steps-item-title">In Progress</div>
       <div class="ant-steps-item-description">This is a description.</div>

components/table/__tests__/__snapshots__/Table.filter.test.js.snap

@@ -15,19 +15,19 @@ exports[`Table.filter renders filter correctly 1`] = `
   </tr>
   </thead>
   <tbody class="ant-table-tbody">
-    <tr class="ant-table-row  ant-table-row-level-0" data-row-key="0">
+    <tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
       <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
         <!---->Jack</td>
     </tr>
-    <tr class="ant-table-row  ant-table-row-level-0" data-row-key="1">
+    <tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
       <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
         <!---->Lucy</td>
     </tr>
-    <tr class="ant-table-row  ant-table-row-level-0" data-row-key="2">
+    <tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
       <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
         <!---->Tom</td>
     </tr>
-    <tr class="ant-table-row  ant-table-row-level-0" data-row-key="3">
+    <tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
       <td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
         <!---->Jerry</td>
     </tr>

components/table/__tests__/__snapshots__/Table.pagination.test.js.snap

@@ -5,11 +5,11 @@ exports[`Table.pagination renders pagination correctly 1`] = `
   </tr>
   </thead>
   <tbody class="ant-table-tbody">
-    <tr class="ant-table-row  ant-table-row-level-0" data-row-key="0">
+    <tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
       <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
         <!---->Jack</td>
     </tr>
-    <tr class="ant-table-row  ant-table-row-level-0" data-row-key="1">
+    <tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
       <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
         <!---->Lucy</td>
     </tr>

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -6,22 +6,22 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
 </tr>
 </thead>
 <tbody class="ant-table-tbody">
-  <tr class="ant-table-row  ant-table-row-level-0" data-row-key="0">
+  <tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
     <td class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
     <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
       <!---->Jack</td>
   </tr>
-  <tr class="ant-table-row  ant-table-row-level-0" data-row-key="1">
+  <tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
     <td class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
     <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
       <!---->Lucy</td>
   </tr>
-  <tr class="ant-table-row  ant-table-row-level-0" data-row-key="2">
+  <tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
     <td class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
     <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
       <!---->Tom</td>
   </tr>
-  <tr class="ant-table-row  ant-table-row-level-0" data-row-key="3">
+  <tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
     <td class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
     <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
       <!---->Jerry</td>
@@ -45,16 +45,16 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
     </tr>
     </thead>
     <tbody class="ant-table-tbody">
-      <tr class="ant-table-row  ant-table-row-level-0" data-row-key="0">
+      <tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
         <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
       </tr>
-      <tr class="ant-table-row  ant-table-row-level-0" data-row-key="1">
+      <tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
         <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
       </tr>
-      <tr class="ant-table-row  ant-table-row-level-0" data-row-key="2">
+      <tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
         <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
       </tr>
-      <tr class="ant-table-row  ant-table-row-level-0" data-row-key="3">
+      <tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
         <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
       </tr>
     </tbody>

components/table/__tests__/__snapshots__/Table.test.js.snap

@@ -10,13 +10,13 @@ exports[`Table renders JSX correctly 1`] = `
   </tr>
   </thead>
   <tbody class="ant-table-tbody">
-    <tr class="ant-table-row  ant-table-row-level-0" data-row-key="1">
+    <tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
       <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
         <!---->John</td>
       <td>Brown</td>
       <td>32</td>
     </tr>
-    <tr class="ant-table-row  ant-table-row-level-0" data-row-key="2">
+    <tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
       <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
         <!---->Jim</td>
       <td>Green</td>

components/vc-table/demo/expandIcon.js

@@ -0,0 +1,55 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const data = [
+  { key: 0, a: '123' },
+  { key: 1, a: 'cdd', b: 'edd' },
+  { key: 2, a: '1333', c: 'eee', d: 2 },
+]
+
+const columns = [
+  { title: 'title 1', dataIndex: 'a', key: 'a', width: 100 },
+  { title: 'title 2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title 3', dataIndex: 'c', key: 'c', width: 200 },
+]
+export default {
+  methods: {
+    CustomExpandIcon (props) {
+      let text
+      if (props.expanded) {
+        text = <span>&#8679; collapse</span>
+      } else {
+        text = <span>&#8681; expand</span>
+      }
+      return (
+        <a
+          class='expand-row-icon'
+          onClick={e => props.onExpand(props.record, e)}
+          style={{ color: 'blue', cursor: 'pointer' }}
+        >{text}</a>
+      )
+    },
+    onExpand (expanded, record) {
+      console.log('onExpand', expanded, record)
+    },
+  },
+  render () {
+    return (
+      <div>
+        <h2>expandIcon</h2>
+        <div>
+          <Table
+            columns={columns}
+            expandedRowRender={record => <p>extra: {record.a}</p>}
+            onExpand={this.onExpand}
+            expandIcon={this.CustomExpandIcon}
+            expandIconAsCell
+            data={data}
+          />
+        </div>
+      </div>
+    )
+  },
+}
+

components/vc-table/demo/rowAndCellClick.js

@@ -80,10 +80,10 @@ export default {
       customRender: (text) => (
         <span>{text} (Trigger Cell Click)</span>
       ),
-      customCell: (record) => ({
+      customCell: (record, index) => ({
         on: {
           click (e) {
-            console.log('Click cell', record, e.target)
+            console.log('Click cell', ` row ${index}`, record, e.target)
           },
         },
       }),

components/vc-table/index.js

@@ -1,4 +1,4 @@
-// base rc-table 6.2.9
+// base rc-table 6.4.0
 import T from './src/Table'
 import Column from './src/Column'
 import ColumnGroup from './src/ColumnGroup'

components/vc-table/src/ExpandableRow.jsx

@@ -25,6 +25,7 @@ const ExpandableRow = {
     expandIconColumnIndex: PropTypes.number,
     childrenColumnName: PropTypes.string,
     expandedRowRender: PropTypes.func,
+    expandIcon: PropTypes.func,
     // onExpandedChange: PropTypes.func.isRequired,
     // onRowClick: PropTypes.func,
     // children: PropTypes.func.isRequired,
@@ -60,8 +61,17 @@ const ExpandableRow = {
     },
 
     renderExpandIcon () {
-      const { prefixCls, expanded, record, needIndentSpaced } = this
-
+      const { prefixCls, expanded, record, needIndentSpaced, expandIcon } = this
+      if (expandIcon) {
+        return expandIcon({
+          prefixCls,
+          expanded,
+          record,
+          needIndentSpaced,
+          expandable: this.expandable,
+          onExpand: this.handleExpandChange,
+        })
+      }
       return (
         <ExpandIcon
           expandable={this.expandable}
@@ -99,6 +109,7 @@ const ExpandableRow = {
       record,
       fixed,
       $scopedSlots,
+      expanded,
     } = this
 
     this.tempExpandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false
@@ -108,6 +119,7 @@ const ExpandableRow = {
     const expandableRowProps = {
       props: {
         indentSize,
+        expanded, // not used in TableRow, but it's required to re-render TableRow when `expanded` changes
         hasExpandIcon: this.hasExpandIcon,
         renderExpandIcon: this.renderExpandIcon,
         renderExpandIconCell: this.renderExpandIconCell,

components/vc-table/src/ExpandableTable.jsx

@@ -14,6 +14,7 @@ export const ExpandableTableProps = () => ({
   defaultExpandedRowKeys: PropTypes.array,
   expandIconColumnIndex: PropTypes.number,
   expandedRowRender: PropTypes.func,
+  expandIcon: PropTypes.func,
   childrenColumnName: PropTypes.string,
   indentSize: PropTypes.number,
   // onExpand: PropTypes.func,

components/vc-table/src/Table.jsx

@@ -63,6 +63,7 @@ export default {
     childrenColumnName: PropTypes.string,
     indentSize: PropTypes.number,
     expandRowByClick: PropTypes.bool,
+    expandIcon: PropTypes.func,
   }, {
     data: [],
     useFixedHeader: false,
@@ -175,6 +176,13 @@ export default {
           window, 'resize', this.debouncedWindowResize
         )
       }
+      // https://github.com/ant-design/ant-design/issues/11635
+      if (this.ref_headTable) {
+        this.ref_headTable.scrollLeft = 0
+      }
+      if (this.ref_bodyTable) {
+        this.ref_bodyTable.scrollLeft = 0
+      }
     })
   },
 

components/vc-table/src/TableCell.jsx

@@ -75,7 +75,7 @@ export default {
     }
 
     if (column.customCell) {
-      tdProps = mergeProps(tdProps, column.customCell(record))
+      tdProps = mergeProps(tdProps, column.customCell(record, index))
     }
 
     // Fix https://github.com/ant-design/ant-design/issues/1202

components/vc-table/src/TableHeader.jsx

@@ -64,6 +64,7 @@ export default {
         {
           rows.map((row, index) => (
             <TableHeaderRow
+              prefixCls={prefixCls}
               key={index}
               index={index}
               fixed={fixed}

components/vc-table/src/TableHeaderRow.jsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import PropTypes from '../../_util/vue-types'
 import { connect } from '../../_util/store'
 import { mergeProps } from '../../_util/props-util'
@@ -12,10 +13,11 @@ const TableHeaderRow = {
     components: PropTypes.object,
     height: PropTypes.any,
     customHeaderRow: PropTypes.func,
+    prefixCls: PropTypes.prefixCls,
   },
   name: 'TableHeaderRow',
   render (h) {
-    const { row, index, height, components, customHeaderRow } = this
+    const { row, index, height, components, customHeaderRow, prefixCls } = this
     const HeaderRow = components.header.row
     const HeaderCell = components.header.cell
     const rowProps = customHeaderRow(row.map(cell => cell.column), index)
@@ -43,6 +45,9 @@ const TableHeaderRow = {
 
           if (column.align) {
             headerCellProps.style = { ...customProps.style, textAlign: column.align }
+            headerCellProps.class = classNames(customProps.cls, column.class, column.className, {
+              [`${prefixCls}-align-${column.align}`]: !!column.align,
+            })
           }
 
           if (typeof HeaderCell === 'function') {

components/vc-table/src/TableRow.jsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import PropTypes from '../../_util/vue-types'
 import { connect } from '../../_util/store'
 import TableCell from './TableCell'
@@ -229,11 +230,8 @@ const TableRow = {
       )
     }
 
-    const rowClassName =
-      `${prefixCls} ${className} ${prefixCls}-level-${indent}`.trim()
+    const { class: customClass, className: customClassName, style: customStyle, ...rowProps } = customRow(record, index) || {}
 
-    const rowProps = customRow(record, index)
-    const customStyle = rowProps ? rowProps.style : {}
     let style = { height: typeof height === 'number' ? `${height}px` : height }
 
     if (!visible) {
@@ -241,6 +239,13 @@ const TableRow = {
     }
 
     style = { ...style, ...customStyle }
+    const rowClassName = classNames(
+      prefixCls,
+      className,
+      `${prefixCls}-level-${indent}`,
+      customClassName,
+      customClass
+    )
     const bodyRowProps = mergeProps({
       on: {
         click: this.onRowClick,