Table componentDidUpdate

docoder · Jan 9, 2020 · b009836 · b009836
1 parent 24ca852
commit b009836
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/example/src/containers/BaseTable/index.js b/example/src/containers/BaseTable/index.js
@@ -3,7 +3,7 @@
 * @Email:  docoder@163.com
 */
 import React from 'react';
-import { Table } from 'ant-colony-ui';
+import { Table, Button } from 'ant-colony-ui';
 import styled from 'styled-components';
 
 const DATASOURCE = [
@@ -155,7 +155,8 @@ const TableBody = styled.div`
 const StyledTable = styled(Table)`
     margin-top: 20px;
 `;
-
+const StyledButton = styled(Button)`
+`;
 export default class BaseTable extends React.Component {
     state = {
         pagination: {
@@ -167,13 +168,19 @@ export default class BaseTable extends React.Component {
         },
         data: {
             test: 'test'
-        }
+        },
+        columns: TABLE_COLUMNS,
     }
     render() {
         return (
             <TableBody>
+                 <StyledButton title="Change Columns" onClick={() => {
+                     let newColumns = [...this.state.columns]
+                     newColumns.pop()
+                     this.setState({columns: newColumns})
+                 }} />
                 <StyledTable
-                    columns={TABLE_COLUMNS}
+                    columns={this.state.columns}
                     dataSource={DATASOURCE}
                     pagination={this.state.pagination}
                     onChange={(pagination, filters, sorter) => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ant-colony-ui",
-  "version": "1.7.17",
+  "version": "1.7.18",
   "description": "Ant Colony UI Toolkit based on Ant Design and React",
   "author": "docoder",
   "license": "MIT",

diff --git a/src/components/UI/Table/index.js b/src/components/UI/Table/index.js
@@ -162,6 +162,12 @@ export default class Table extends React.Component {
         }
         this.props.onChange(pagination, filters, sorter);
     }
+    componentDidUpdate(prevProps) {
+        if (prevProps.columns !== this.props.columns) {
+            this.columns = this.props.columns
+            this.setState({newColumns: this.columns})
+        }
+    }
     render() {
         const { 
             rowKey,