react+ts表格

src/_test.tsx

@@ -1,17 +1,31 @@
-
-import React, { useState } from 'react';
-import ReactDom from 'react-dom'
-import Modal from './components/modal/modal';
-import Upload from './components/upload/upload';
-import Tab from './components/tab/tab';
-
-import * as GOJI from 'goji_ui'
+import React, { useState } from "react";
+import ReactDom from "react-dom";
+import Modal from "./components/modal/modal";
+import Upload from "./components/upload/upload";
+import Tab from "./components/tab/tab";
+import Table from "./components/table/table";
+import Popover from "./components/Popover/Popover";
+import * as GOJI from "goji_ui";
 
 function App() {
-	const [visible, setVisible] = useState(false)
-	const [ev, setEv] = useState(false)
-	return <div>
-		{/* <GOJI.Tab
+  const [visible, setVisible] = useState(false);
+  const [ev, setEv] = useState(false);
+  const data = [
+    { id: 1, name: "Alice", age: 20, gender: "female" },
+    { id: 2, name: "Bob", age: 25, gender: "male" },
+    { id: 3, name: "Charlie", age: 30, gender: "male" },
+    { id: 4, name: "David", age: 35, gender: "male" },
+  ];
+
+  const columns = [
+    { title: "ID", dataIndex: "id" },
+    { title: "Name", dataIndex: "name" },
+    { title: "Age", dataIndex: "age" },
+    { title: "Gender", dataIndex: "gender" },
+  ];
+  return (
+    <div>
+      {/* <GOJI.Tab
 			extSelector={'.tab'}
 			extension={<div>这是扩展的内容</div>}
 			items={[
@@ -27,77 +41,102 @@ function App() {
 				}
 			]}
 		/> */}
-
-
-		<h1>test</h1>
-		<button
-			onClick={() => {
-				setVisible(true)
-			}}
-		>
-			show modal
-		</button>
-		<Tab
-			onTabChange={()=>{
-				setEv(true)
-			}}
-			hiddenStyle={{
-				height:'0px',
-				overflow:'hidden'
-			}}
-			tabContentVisible={ev}
-			extSelector={'[aria-label="tab"]'}
-			extension={<div onClick={() => { setEv(!ev) }} className="ext">这是扩展的内容</div>}
-			items={[
-				{
-					title: "tab1",
-					key: "tab1",
-					children: <div>tab1</div>
-				},
-				{
-					title: "tab2",
-					key: "tab2",
-					children: <div>tab2</div>
-				}
-			]}
-		/>
-
-		<Modal
-			// dontDestroyOnClose={true}
-			onClose={() => {
-				setVisible(false)
-			}}
-			visible={visible}
-		>
-			<div>
-				how to set default value for typescript interface field
-				<input type="text" />
-			</div>
-		</Modal>
-
-		<Upload
-			uploadUrl='/api/video-service/upload'
-			beforeUpload={(f) => {
-				for (var i = 0; i < f.length; i++) {
-					console.log(f[i].name)
-				}
-				return new Promise((r, j) => {
-					setTimeout(() => {
-						r(f)
-					}, 1000);
-				})
-			}}
-
-			valueFilter={({ response }) => {
-				return (response as Record<string, Object>).url
-			}}
-			onComplete={(res: any[]) => {
-				console.log(res)
-			}}
-		>
-			请选择文件
-		</Upload>
-	</div >
+      <h1>test</h1>
+      <button
+        onClick={() => {
+          setVisible(true);
+        }}
+      >
+        show modal
+      </button>
+      <Tab
+        onTabChange={() => {
+          setEv(true);
+        }}
+        hiddenStyle={{
+          height: "0px",
+          overflow: "hidden",
+        }}
+        tabContentVisible={ev}
+        extSelector={'[aria-label="tab"]'}
+        extension={
+          <div
+            onClick={() => {
+              setEv(!ev);
+            }}
+            className="ext"
+          >
+            这是扩展的内容
+          </div>
+        }
+        items={[
+          {
+            title: "tab1",
+            key: "tab1",
+            children: (
+              <Popover
+                content={() => {
+                  return (
+                    <div>
+                      <p>Content</p>
+                      <p>Content</p>
+                    </div>
+                  );
+                }}
+                title="气泡"
+              >
+                <div>这是一个气泡</div>
+              </Popover>
+            ),
+          },
+          {
+            title: "tab2",
+            key: "tab2",
+            children: <div>tab2</div>,
+          },
+        ]}
+      />
+      <Table data={data} columns={columns} />;
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <Popover content="Hello, world!">
+          <button style={{ padding: "8px16px" }}>Hover me!</button>
+        </Popover>
+      </div>
+      <Modal
+        // dontDestroyOnClose={true}
+        onClose={() => {
+          setVisible(false);
+        }}
+        visible={visible}
+      >
+        <div>
+          how to set default value for typescript interface field
+          <input type="text" />
+        </div>
+      </Modal>
+      <Upload
+        uploadUrl="/api/video-service/upload"
+        beforeUpload={(f) => {
+          for (var i = 0; i < f.length; i++) {
+            console.log(f[i].name);
+          }
+          return new Promise((r, j) => {
+            setTimeout(() => {
+              r(f);
+            }, 1000);
+          });
+        }}
+        valueFilter={({ response }) => {
+          return (response as Record<string, Object>).url;
+        }}
+        onComplete={(res: any[]) => {
+          console.log(res);
+        }}
+      >
+        请选择文件
+      </Upload>
+    </div>
+  );
 }
 
-ReactDom.render(<App />, document.getElementById("app"))
+ReactDom.render(<App />, document.getElementById("app"));

src/components/Popover/Popover.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+// import { motion } from "framer-motion";
+import styles from "./Popover.module.less";
+
+
+
+function Popover({ content, children }) {
+  const [showPopover, setShowPopover] = useState(false);
+
+  const handleMouseEnter = () => {
+    setShowPopover(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShowPopover(false);
+  };
+
+  return (
+    <div
+      style={{ position: "relative" }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {showPopover && (
+        <div
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            backgroundColor: "#fff",
+            padding: "8px",
+            boxShadow: "02px8px rgba(0,0,0,0.15)",
+          }}
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Popover;

src/components/table/table.module.css

@@ -0,0 +1,31 @@
+.content table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.content th,
+.content td {
+  text-align: left;
+  padding: 8px;
+}
+.content th {
+  background-color: #f2f2f2;
+}
+.content tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+.content tr:hover {
+  background-color: #ddd;
+}
+.content td:first-child,
+.content th:first-child {
+  border-left: 1px solid #ddd;
+}
+.content td:last-child,
+.content th:last-child {
+  border-right: 1px solid #ddd;
+}
+.content td,
+.content th {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}

src/components/table/table.module.less

@@ -0,0 +1,36 @@
+.content{
+    table {
+        border-collapse: collapse;
+        width:100%;
+       }
+
+       th, td {
+        text-align: left;
+        padding:8px;
+       }
+
+       th {
+        background-color: #f2f2f2;
+       }
+
+       tr:nth-child(even) {
+        background-color: #f2f2f2;
+       }
+
+       tr:hover {
+        background-color: #ddd;
+       }
+
+       td:first-child, th:first-child {
+        border-left:1px solid #ddd;
+       }
+
+       td:last-child, th:last-child {
+        border-right:1px solid #ddd;
+       }
+
+       td, th {
+        border-top:1px solid #ddd;
+        border-bottom:1px solid #ddd;
+       }
+}