From c01c1b505b57ef01f9da29b185d4e9096fea1137 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 5 Mar 2024 17:23:47 +0800
Subject: [PATCH] =?UTF-8?q?demo:=20update=20Grid=E3=80=81Table=E3=80=81Sel?=
 =?UTF-8?q?ect=20demo=20(#47709)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* demo: update demo

* fix: fix test

* feat: table snap

---------

Co-authored-by: 叶枫 <645381995@qq.com>
---
 .../__snapshots__/demo-extend.test.ts.snap    |  10 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  10 +-
 components/grid/demo/useBreakpoint.tsx        |  11 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  32 +++--
 .../__snapshots__/demo.test.tsx.snap          |  12 +-
 components/select/demo/custom-tag-render.tsx  |   9 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 130 +++++++++++-------
 .../__tests__/__snapshots__/demo.test.ts.snap | 130 +++++++++++-------
 components/table/demo/basic.tsx               |   8 +-
 components/table/demo/jsx.tsx                 |  22 +--
 components/table/demo/pagination.tsx          |   8 +-
 11 files changed, 233 insertions(+), 149 deletions(-)

diff --git a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
index 62d97b5865de..bc365b9f129a 100644
--- a/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1500,14 +1500,16 @@ exports[`renders components/grid/demo/sort.tsx extend context correctly 1`] = `
 exports[`renders components/grid/demo/sort.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 1`] = `
-Array [
-  Current break point: ,
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+>
+  Current break point:
   <span
     class="ant-tag ant-tag-blue"
   >
     xs
-  </span>,
-]
+  </span>
+</div>
 `;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx extend context correctly 2`] = `[]`;
diff --git a/components/grid/__tests__/__snapshots__/demo.test.ts.snap b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
index ea31e061cc3c..d55d0afdb9d8 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.ts.snap
@@ -1419,9 +1419,9 @@ exports[`renders components/grid/demo/sort.tsx correctly 1`] = `
 `;
 
 exports[`renders components/grid/demo/useBreakpoint.tsx correctly 1`] = `
-Array [
-  Current break point:,
-  <!-- -->,
-   ,
-]
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
+>
+  Current break point:
+</div>
 `;
diff --git a/components/grid/demo/useBreakpoint.tsx b/components/grid/demo/useBreakpoint.tsx
index 90baf90e245f..160233c51d32 100644
--- a/components/grid/demo/useBreakpoint.tsx
+++ b/components/grid/demo/useBreakpoint.tsx
@@ -1,22 +1,21 @@
 import React from 'react';
-import { Grid, Tag } from 'antd';
+import { Flex, Grid, Tag } from 'antd';
 
 const { useBreakpoint } = Grid;
 
 const App: React.FC = () => {
   const screens = useBreakpoint();
-
   return (
-    <>
-      Current break point:{' '}
+    <Flex wrap="wrap" gap="small">
+      Current break point:
       {Object.entries(screens)
         .filter((screen) => !!screen[1])
-        .map((screen) => (
+        .map<React.ReactNode>((screen) => (
           <Tag color="blue" key={screen[0]}>
             {screen[0]}
           </Tag>
         ))}
-    </>
+    </Flex>
   );
 };
 
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9b3737c359a3..5cce851ef818 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1522,9 +1522,11 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
         <span>
           <span
             class="ant-tag ant-tag-gold"
-            style="margin-right: 3px;"
+            style="margin-inline-end: 4px;"
           >
-            gold
+            <span>
+              gold
+            </span>
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -1556,9 +1558,11 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
         <span>
           <span
             class="ant-tag ant-tag-cyan"
-            style="margin-right: 3px;"
+            style="margin-inline-end: 4px;"
           >
-            cyan
+            <span>
+              cyan
+            </span>
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -1657,12 +1661,13 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
               <div
                 aria-selected="true"
                 class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                title="gold"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  gold
+                  <span>
+                    gold
+                  </span>
                 </div>
                 <span
                   aria-hidden="true"
@@ -1694,34 +1699,37 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
-                title="lime"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  lime
+                  <span>
+                    lime
+                  </span>
                 </div>
               </div>
               <div
                 aria-selected="false"
                 class="ant-select-item ant-select-item-option"
-                title="green"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  green
+                  <span>
+                    green
+                  </span>
                 </div>
               </div>
               <div
                 aria-selected="true"
                 class="ant-select-item ant-select-item-option ant-select-item-option-selected"
-                title="cyan"
               >
                 <div
                   class="ant-select-item-option-content"
                 >
-                  cyan
+                  <span>
+                    cyan
+                  </span>
                 </div>
                 <span
                   aria-hidden="true"
diff --git a/components/select/__tests__/__snapshots__/demo.test.tsx.snap b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
index d08fc0d1e234..e10136dc9bbb 100644
--- a/components/select/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.tsx.snap
@@ -718,9 +718,11 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
         <span>
           <span
             class="ant-tag ant-tag-gold"
-            style="margin-right:3px"
+            style="margin-inline-end:4px"
           >
-            gold
+            <span>
+              gold
+            </span>
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
@@ -752,9 +754,11 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
         <span>
           <span
             class="ant-tag ant-tag-cyan"
-            style="margin-right:3px"
+            style="margin-inline-end:4px"
           >
-            cyan
+            <span>
+              cyan
+            </span>
             <span
               aria-label="close"
               class="anticon anticon-close ant-tag-close-icon"
diff --git a/components/select/demo/custom-tag-render.tsx b/components/select/demo/custom-tag-render.tsx
index e84fe3673df4..9ef920158963 100644
--- a/components/select/demo/custom-tag-render.tsx
+++ b/components/select/demo/custom-tag-render.tsx
@@ -4,7 +4,12 @@ import type { SelectProps } from 'antd';
 
 type TagRender = SelectProps['tagRender'];
 
-const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
+const options: SelectProps['options'] = [
+  { value: 'gold', label: <span>gold</span> },
+  { value: 'lime', label: <span>lime</span> },
+  { value: 'green', label: <span>green</span> },
+  { value: 'cyan', label: <span>cyan</span> },
+];
 
 const tagRender: TagRender = (props) => {
   const { label, value, closable, onClose } = props;
@@ -18,7 +23,7 @@ const tagRender: TagRender = (props) => {
       onMouseDown={onPreventMouseDown}
       closable={closable}
       onClose={onClose}
-      style={{ marginRight: 3 }}
+      style={{ marginInlineEnd: 4 }}
     >
       {label}
     </Tag>
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 376e356b0575..70411d8639bc 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -86,16 +86,20 @@ exports[`renders components/table/demo/basic.tsx extend context correctly 1`] =
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-green"
-                    >
-                      NICE
-                    </span>
-                    <span
-                      class="ant-tag ant-tag-geekblue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      DEVELOPER
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-green"
+                      >
+                        NICE
+                      </span>
+                      <span
+                        class="ant-tag ant-tag-geekblue"
+                      >
+                        DEVELOPER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -144,11 +148,15 @@ exports[`renders components/table/demo/basic.tsx extend context correctly 1`] =
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-volcano"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      LOSER
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-volcano"
+                      >
+                        LOSER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -197,16 +205,20 @@ exports[`renders components/table/demo/basic.tsx extend context correctly 1`] =
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-green"
-                    >
-                      COOL
-                    </span>
-                    <span
-                      class="ant-tag ant-tag-geekblue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      TEACHER
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-green"
+                      >
+                        COOL
+                      </span>
+                      <span
+                        class="ant-tag ant-tag-geekblue"
+                      >
+                        TEACHER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -17450,16 +17462,20 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-blue"
-                    >
-                      nice
-                    </span>
-                    <span
-                      class="ant-tag ant-tag-blue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      developer
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-green"
+                      >
+                        NICE
+                      </span>
+                      <span
+                        class="ant-tag ant-tag-geekblue"
+                      >
+                        DEVELOPER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -17511,11 +17527,15 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-blue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      loser
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-volcano"
+                      >
+                        LOSER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -17567,16 +17587,20 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-blue"
-                    >
-                      cool
-                    </span>
-                    <span
-                      class="ant-tag ant-tag-blue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      teacher
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-green"
+                      >
+                        COOL
+                      </span>
+                      <span
+                        class="ant-tag ant-tag-geekblue"
+                      >
+                        TEACHER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -22935,7 +22959,9 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
+                      <div
+                        class="ant-flex ant-flex-gap-small"
+                      >
                         <span
                           class="ant-tag ant-tag-green"
                         >
@@ -22946,7 +22972,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                         >
                           DEVELOPER
                         </span>
-                      </span>
+                      </div>
                     </td>
                     <td
                       class="ant-table-cell"
@@ -22995,13 +23021,15 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
+                      <div
+                        class="ant-flex ant-flex-gap-small"
+                      >
                         <span
                           class="ant-tag ant-tag-volcano"
                         >
                           LOSER
                         </span>
-                      </span>
+                      </div>
                     </td>
                     <td
                       class="ant-table-cell"
@@ -23050,7 +23078,9 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
+                      <div
+                        class="ant-flex ant-flex-gap-small"
+                      >
                         <span
                           class="ant-tag ant-tag-green"
                         >
@@ -23061,7 +23091,7 @@ exports[`renders components/table/demo/pagination.tsx extend context correctly 1
                         >
                           TEACHER
                         </span>
-                      </span>
+                      </div>
                     </td>
                     <td
                       class="ant-table-cell"
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index e28d1ab0d8bb..cc1647a8ae22 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -86,16 +86,20 @@ exports[`renders components/table/demo/basic.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-green"
-                    >
-                      NICE
-                    </span>
-                    <span
-                      class="ant-tag ant-tag-geekblue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      DEVELOPER
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-green"
+                      >
+                        NICE
+                      </span>
+                      <span
+                        class="ant-tag ant-tag-geekblue"
+                      >
+                        DEVELOPER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -146,11 +150,15 @@ exports[`renders components/table/demo/basic.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-volcano"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      LOSER
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-volcano"
+                      >
+                        LOSER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -201,16 +209,20 @@ exports[`renders components/table/demo/basic.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-green"
-                    >
-                      COOL
-                    </span>
-                    <span
-                      class="ant-tag ant-tag-geekblue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      TEACHER
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-green"
+                      >
+                        COOL
+                      </span>
+                      <span
+                        class="ant-tag ant-tag-geekblue"
+                      >
+                        TEACHER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -14017,16 +14029,20 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-blue"
-                    >
-                      nice
-                    </span>
-                    <span
-                      class="ant-tag ant-tag-blue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      developer
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-green"
+                      >
+                        NICE
+                      </span>
+                      <span
+                        class="ant-tag ant-tag-geekblue"
+                      >
+                        DEVELOPER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -14080,11 +14096,15 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-blue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      loser
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-volcano"
+                      >
+                        LOSER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -14138,16 +14158,20 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
                   <td
                     class="ant-table-cell"
                   >
-                    <span
-                      class="ant-tag ant-tag-blue"
-                    >
-                      cool
-                    </span>
-                    <span
-                      class="ant-tag ant-tag-blue"
+                    <div
+                      class="ant-flex ant-flex-gap-small"
                     >
-                      teacher
-                    </span>
+                      <span
+                        class="ant-tag ant-tag-green"
+                      >
+                        COOL
+                      </span>
+                      <span
+                        class="ant-tag ant-tag-geekblue"
+                      >
+                        TEACHER
+                      </span>
+                    </div>
                   </td>
                   <td
                     class="ant-table-cell"
@@ -18355,7 +18379,9 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
+                      <div
+                        class="ant-flex ant-flex-gap-small"
+                      >
                         <span
                           class="ant-tag ant-tag-green"
                         >
@@ -18366,7 +18392,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                         >
                           DEVELOPER
                         </span>
-                      </span>
+                      </div>
                     </td>
                     <td
                       class="ant-table-cell"
@@ -18417,13 +18443,15 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
+                      <div
+                        class="ant-flex ant-flex-gap-small"
+                      >
                         <span
                           class="ant-tag ant-tag-volcano"
                         >
                           LOSER
                         </span>
-                      </span>
+                      </div>
                     </td>
                     <td
                       class="ant-table-cell"
@@ -18474,7 +18502,9 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
+                      <div
+                        class="ant-flex ant-flex-gap-small"
+                      >
                         <span
                           class="ant-tag ant-tag-green"
                         >
@@ -18485,7 +18515,7 @@ exports[`renders components/table/demo/pagination.tsx correctly 1`] = `
                         >
                           TEACHER
                         </span>
-                      </span>
+                      </div>
                     </td>
                     <td
                       class="ant-table-cell"
diff --git a/components/table/demo/basic.tsx b/components/table/demo/basic.tsx
index 9f23492aecf4..5f40fcb96f2c 100644
--- a/components/table/demo/basic.tsx
+++ b/components/table/demo/basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Space, Table, Tag } from 'antd';
+import { Flex, Space, Table, Tag } from 'antd';
 import type { TableProps } from 'antd';
 
 interface DataType {
@@ -32,8 +32,8 @@ const columns: TableProps<DataType>['columns'] = [
     key: 'tags',
     dataIndex: 'tags',
     render: (_, { tags }) => (
-      <>
-        {tags.map((tag) => {
+      <Flex gap="small">
+        {tags.map<React.ReactNode>((tag) => {
           let color = tag.length > 5 ? 'geekblue' : 'green';
           if (tag === 'loser') {
             color = 'volcano';
@@ -44,7 +44,7 @@ const columns: TableProps<DataType>['columns'] = [
             </Tag>
           );
         })}
-      </>
+      </Flex>
     ),
   },
   {
diff --git a/components/table/demo/jsx.tsx b/components/table/demo/jsx.tsx
index 4dadb6720d3f..f8d54ca8b2db 100644
--- a/components/table/demo/jsx.tsx
+++ b/components/table/demo/jsx.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Space, Table, Tag } from 'antd';
+import { Flex, Space, Table, Tag } from 'antd';
 
 const { Column, ColumnGroup } = Table;
 
@@ -52,13 +52,19 @@ const App: React.FC = () => (
       dataIndex="tags"
       key="tags"
       render={(tags: string[]) => (
-        <>
-          {tags.map((tag) => (
-            <Tag color="blue" key={tag}>
-              {tag}
-            </Tag>
-          ))}
-        </>
+        <Flex gap="small">
+          {tags.map<React.ReactNode>((tag) => {
+            let color = tag.length > 5 ? 'geekblue' : 'green';
+            if (tag === 'loser') {
+              color = 'volcano';
+            }
+            return (
+              <Tag color={color} key={tag}>
+                {tag.toUpperCase()}
+              </Tag>
+            );
+          })}
+        </Flex>
       )}
     />
     <Column
diff --git a/components/table/demo/pagination.tsx b/components/table/demo/pagination.tsx
index 519697b16efd..9a2c241b0b60 100644
--- a/components/table/demo/pagination.tsx
+++ b/components/table/demo/pagination.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Radio, Space, Table, Tag } from 'antd';
+import { Flex, Radio, Space, Table, Tag } from 'antd';
 import type { TableProps } from 'antd';
 
 type ColumnsType<T extends object> = TableProps<T>['columns'];
@@ -50,8 +50,8 @@ const columns: ColumnsType<DataType> = [
     key: 'tags',
     dataIndex: 'tags',
     render: (tags: string[]) => (
-      <span>
-        {tags.map((tag) => {
+      <Flex gap="small">
+        {tags.map<React.ReactNode>((tag) => {
           let color = tag.length > 5 ? 'geekblue' : 'green';
           if (tag === 'loser') {
             color = 'volcano';
@@ -62,7 +62,7 @@ const columns: ColumnsType<DataType> = [
             </Tag>
           );
         })}
-      </span>
+      </Flex>
     ),
   },
   {