docs: add dynamic setting demo for table (#3690)

components/table/demo/dynamic-settings.md

@@ -0,0 +1,177 @@
+---
+order: 21
+title:
+  en-US: Dynamic Settings
+  zh-CN: 动态控制表格属性
+---
+
+## zh-CN
+
+选择不同配置组合查看效果。
+
+## en-US
+
+Select different settings to see the result.
+
+````jsx
+import { Table, Icon, Select, Form } from 'antd';
+
+const Option = Select.Option;
+const FormItem = Form.Item;
+
+const columns = [{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  render: text => <a href="#">{text}</a>,
+}, {
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+}, {
+  title: 'Address',
+  dataIndex: 'address',
+  key: 'address',
+}, {
+  title: 'Action',
+  key: 'action',
+  render: (text, record) => (
+    <span>
+      <a href="#">Action 一 {record.name}</a>
+      <span className="ant-divider" />
+      <a href="#">Delete</a>
+      <span className="ant-divider" />
+      <a href="#" className="ant-dropdown-link">
+        More actions<Icon type="down" />
+      </a>
+    </span>
+  ),
+}];
+
+const data = [{
+  key: '1',
+  name: 'John Brown',
+  age: 32,
+  address: 'New York No. 1 Lake Park',
+  description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
+}, {
+  key: '2',
+  name: 'Jim Green',
+  age: 42,
+  address: 'London No. 1 Lake Park',
+  description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
+}, {
+  key: '3',
+  name: 'Joe Black',
+  age: 32,
+  address: 'Sidney No. 1 Lake Park',
+  description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
+}];
+
+const expandedRowRender = record => <p>{record.description}</p>;
+const title = () => 'Here is title';
+const footer = () => 'Here is footer';
+
+class Demo extends React.Component {
+  state = {
+    size: 'default',
+    pagination: true,
+    expandedRowRender,
+    loading: false,
+    bordered: true,
+    header: true,
+    title,
+    footer,
+  }
+
+  handleToggle = (prop) => {
+    return (value) => {
+      this.setState({ [prop]: value === 'show' });
+    };
+  }
+
+  handleSizeChange = (value) => {
+    this.setState({ size: value });
+  }
+
+  handleExpandChange = (value) => {
+    this.setState({ expandedRowRender: value === 'enabled' ? expandedRowRender : false });
+  }
+
+  handleTitleChange = (value) => {
+    this.setState({ title: value === 'show' ? title : undefined });
+  }
+
+  handleFooterChange = (value) => {
+    this.setState({ footer: value === 'show' ? footer : undefined });
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="components-table-demo-control-bar">
+          <Form inline>
+            <FormItem>
+              <Select defaultValue="show" onChange={this.handleToggle('pagination')}>
+                <Option value="show">Show Pagination</Option>
+                <Option value="hide">Hide Pagination</Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select defaultValue="default" onChange={this.handleSizeChange}>
+                <Option value="default">Default Size</Option>
+                <Option value="small">Small Size</Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select defaultValue="show" onChange={this.handleToggle('bordered')}>
+                <Option value="show">Show Border</Option>
+                <Option value="hide">Hide Border</Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select defaultValue="show" onChange={this.handleToggle('showHeader')}>
+                <Option value="show">Show Header</Option>
+                <Option value="hide">Hide Header</Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select defaultValue="show" onChange={this.handleTitleChange}>
+                <Option value="show">Show Title</Option>
+                <Option value="hide">Hide Title</Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select defaultValue="show" onChange={this.handleFooterChange}>
+                <Option value="show">Show Footer</Option>
+                <Option value="hide">Hide Footer</Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select defaultValue="enabled" onChange={this.handleExpandChange}>
+                <Option value="enabled">Enable Expand Row</Option>
+                <Option value="disabled">Disable Expand Row</Option>
+              </Select>
+            </FormItem>
+            <FormItem>
+              <Select defaultValue="hide" onChange={this.handleToggle('loading')}>
+                <Option value="show">Show Loading</Option>
+                <Option value="hide">Hide Loading</Option>
+              </Select>
+            </FormItem>
+          </Form>
+        </div>
+        <Table {...this.state} columns={columns} dataSource={data} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````
+
+<style>
+.components-table-demo-control-bar {
+  margin-bottom: 10px;
+}
+</style>