fix: Table demo dynamic settings pagination (#23679)

* fix: Table demo dynamic settings pagination

* fix test

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

@@ -2146,9 +2146,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <label
           class=""
-          title="Pagination"
+          title="Pagination Top"
         >
-          Pagination
+          Pagination Top
         </label>
       </div>
       <div
@@ -2172,14 +2172,52 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
                   <input
                     class="ant-radio-button-input"
                     type="radio"
-                    value="top"
+                    value="topLeft"
                   />
                   <span
                     class="ant-radio-button-inner"
                   />
                 </span>
                 <span>
-                  Top
+                  TopLeft
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="topCenter"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  TopCenter
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="topRight"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  TopRight
                 </span>
               </label>
               <label
@@ -2192,16 +2230,46 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
                     checked=""
                     class="ant-radio-button-input"
                     type="radio"
-                    value="bottom"
+                    value="none"
                   />
                   <span
                     class="ant-radio-button-inner"
                   />
                 </span>
                 <span>
-                  Bottom
+                  None
                 </span>
               </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          title="Pagination Bottom"
+        >
+          Pagination Bottom
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <div
+              class="ant-radio-group ant-radio-group-outline"
+            >
               <label
                 class="ant-radio-button-wrapper"
               >
@@ -2211,14 +2279,53 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
                   <input
                     class="ant-radio-button-input"
                     type="radio"
-                    value="both"
+                    value="bottomLeft"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  BottomLeft
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper"
+              >
+                <span
+                  class="ant-radio-button"
+                >
+                  <input
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="bottomCenter"
+                  />
+                  <span
+                    class="ant-radio-button-inner"
+                  />
+                </span>
+                <span>
+                  BottomCenter
+                </span>
+              </label>
+              <label
+                class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+              >
+                <span
+                  class="ant-radio-button ant-radio-button-checked"
+                >
+                  <input
+                    checked=""
+                    class="ant-radio-button-input"
+                    type="radio"
+                    value="bottomRight"
                   />
                   <span
                     class="ant-radio-button-inner"
                   />
                 </span>
                 <span>
-                  Both
+                  BottomRight
                 </span>
               </label>
               <label

components/table/demo/dynamic-settings.md

@@ -90,6 +90,8 @@ class Demo extends React.Component {
     scroll: undefined,
     hasData: true,
     tableLayout: undefined,
+    top: 'none',
+    bottom: 'bottomRight',
   };
 
   handleToggle = prop => enable => {
@@ -140,13 +142,6 @@ class Demo extends React.Component {
     this.setState({ hasData });
   };
 
-  handlePaginationChange = e => {
-    const { value } = e.target;
-    this.setState({
-      pagination: value === 'none' ? false : { position: value },
-    });
-  };
-
   render() {
     const { xScroll, yScroll, ...state } = this.state;
 
@@ -221,20 +216,36 @@ class Demo extends React.Component {
               <Radio.Button value="fixed">Fixed</Radio.Button>
             </Radio.Group>
           </Form.Item>
-          <Form.Item label="Pagination">
+          <Form.Item label="Pagination Top">
+            <Radio.Group
+              value={this.state.top}
+              onChange={e => {
+                this.setState({ top: e.target.value });
+              }}
+            >
+              <Radio.Button value="topLeft">TopLeft</Radio.Button>
+              <Radio.Button value="topCenter">TopCenter</Radio.Button>
+              <Radio.Button value="topRight">TopRight</Radio.Button>
+              <Radio.Button value="none">None</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item label="Pagination Bottom">
             <Radio.Group
-              value={state.pagination ? state.pagination.position : 'none'}
-              onChange={this.handlePaginationChange}
+              value={this.state.bottom}
+              onChange={e => {
+                this.setState({ bottom: e.target.value });
+              }}
             >
-              <Radio.Button value="top">Top</Radio.Button>
-              <Radio.Button value="bottom">Bottom</Radio.Button>
-              <Radio.Button value="both">Both</Radio.Button>
+              <Radio.Button value="bottomLeft">BottomLeft</Radio.Button>
+              <Radio.Button value="bottomCenter">BottomCenter</Radio.Button>
+              <Radio.Button value="bottomRight">BottomRight</Radio.Button>
               <Radio.Button value="none">None</Radio.Button>
             </Radio.Group>
           </Form.Item>
         </Form>
         <Table
           {...this.state}
+          pagination={{ position: [this.state.top, this.state.bottom] }}
           columns={tableColumns}
           dataSource={state.hasData ? data : null}
           scroll={scroll}