| 
					
				 | 
			
			
				@@ -0,0 +1,99 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import React, { useMemo, useCallback } from 'react'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import Table from '../../'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import Avatar from "../../../avatar"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { IconMore } from "@douyinfe/semi-icons"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const Demo = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const columns = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            title: '标题', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            dataIndex: 'name', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            render: (text, record, index) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <Avatar 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            size="small" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            shape="square" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            src={record.nameIconSrc} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            style={{ marginRight: 12 }} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        ></Avatar> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        {text} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            title: '大小', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            dataIndex: 'size', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            title: '所有者', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            dataIndex: 'owner', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            render: (text, record, index) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return ( 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    <div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                            {typeof text === 'string' && text.slice(0, 1)} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        </Avatar> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                        {text} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                ); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            title: '更新日期', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            dataIndex: 'updateTime', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            title: '', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            dataIndex: 'operate', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            render: () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+                return <IconMore />; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    const data = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            key: '1', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            name: 'Semi Design 设计稿.fig', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            size: '2M', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            owner: '姜鹏志', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            updateTime: '2020-02-02 05:13', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            avatarBg: 'grey', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            key: '2', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            name: 'Semi Design 分享演示文稿', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            size: '2M', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            owner: '郝宣', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            updateTime: '2020-01-17 05:31', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            avatarBg: 'red', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            key: '3', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            name: '设计文档', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            size: '34KB', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            owner: 'Zoey Edwards', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            updateTime: '2020-01-26 11:01', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            avatarBg: 'light-blue', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    ]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    for (let i=4;i<=9999;i++) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        data[i-1] = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            key: `${i}`, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            name: '设计文档', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            size: '34KB', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            owner: 'Zoey Edwards', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            updateTime: '2020-01-26 11:01', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            avatarBg: 'light-blue', 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    return <Table columns={columns} dataSource={data} pagination={false} />; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+export default Demo; 
			 |