diff --git a/src/_test.tsx b/src/_test.tsx
index 4e3a04d..79a64a4 100644
--- a/src/_test.tsx
+++ b/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"))
\ No newline at end of file
+ReactDom.render(<App />, document.getElementById("app"));
diff --git a/src/components/Popover/Popover.module.css b/src/components/Popover/Popover.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Popover/Popover.module.less b/src/components/Popover/Popover.module.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
new file mode 100644
index 0000000..7e783c0
--- /dev/null
+++ b/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;
diff --git a/src/components/table/table.module.css b/src/components/table/table.module.css
new file mode 100644
index 0000000..8e02534
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/table/table.module.less b/src/components/table/table.module.less
new file mode 100644
index 0000000..bfd2b0b
--- /dev/null
+++ b/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;
+       }
+}
\ No newline at end of file
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index f357ad6..698a5b4 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -1,52 +1,146 @@
 
 import React, { ReactElement, useMemo } from 'react';
-
-interface IColProps {
-	key: string;
+import styles from './table.module.less'
+    
+interface Column {
 	title: string;
-	render?(data: any): ReactElement
-}
-
-interface ITableProps {
-	className?: string;
-	data: Array<any>;
-	cols: Array<IColProps>
-}
-
-export default function Table(props: ITableProps) {
-	const { data, cols, className } = props;
-
-	const col = useMemo(() => {
-		return cols?.map(c => {
-			return <td key={c?.key}>
-				{c?.title}
-			</td>
-		})
-	}, [cols])
-
-	return <table className={className}>
-		<thead>
-			<tr>{col}</tr>
-		</thead>
-		<tbody>
-			{
-				data?.map(d => {
-					return <tr key={d.id}>
-						{cols?.map(c => {
-							if (c.render) {
-								return <td key={c.key}>
-									{
-										c.render(d)
-									}
-								</td>
-							}
-							return <td key={c.key}>
-								{d[c.key]}
-							</td>
-						})}
-					</tr>
-				})
-			}
-		</tbody>
-	</table>
-}
\ No newline at end of file
+	dataIndex: string;
+   }
+   
+   interface Props {
+	data: any[];
+	columns: Column[];
+   }
+   
+   enum SortOrder {
+	Ascending = "ascend",
+	Descending = "descend",
+	None = "none",
+   }
+   
+   interface State {
+	sortOrder: SortOrder;
+	sortColumn: string;
+	filteredData: any[];
+	filterValues: { [key: string]: any };
+   }
+   
+ export default  class Table extends React.Component<Props, State> {
+	constructor(props: Props) {
+	super(props);
+   
+	this.state = {
+	sortOrder: SortOrder.None,
+	sortColumn: "",
+	filteredData: props.data,
+	filterValues: {},
+	};
+	}
+   
+	handleSort = (column: Column) => {
+	const { dataIndex } = column;
+	const { sortOrder, sortColumn } = this.state;
+   
+	let newSortOrder: SortOrder = SortOrder.Ascending;
+	if (sortColumn === dataIndex) {
+	newSortOrder =
+	sortOrder === SortOrder.Ascending
+	? SortOrder.Descending
+	: SortOrder.Ascending;
+	}
+   
+	let newData = [...this.state.filteredData];
+	if (newSortOrder !== SortOrder.None) {
+	newData = newData.sort((a, b) =>
+	newSortOrder === SortOrder.Ascending
+	? a[dataIndex] - b[dataIndex]
+	: b[dataIndex] - a[dataIndex]
+	);
+	}
+   
+	this.setState({
+	sortOrder: newSortOrder,
+	sortColumn: dataIndex,
+	filteredData: newData,
+	});
+	};
+   
+	handleFilter = (column: Column, value: any) => {
+	const { dataIndex } = column;
+	const { filterValues } = this.state;
+   
+	const newFilterValues = { ...filterValues, [dataIndex]: value };
+   
+	let newData = [...this.props.data];
+	Object.keys(newFilterValues).forEach((key) => {
+	const filterValue = newFilterValues[key];
+	if (filterValue !== null && filterValue !== undefined) {
+	newData = newData.filter(
+	(item) => item[key].toString() === filterValue.toString()
+	);
+	}
+	});
+   
+	this.setState({
+	filteredData: newData,
+	filterValues: newFilterValues,
+	});
+	};
+   
+	render() {
+	const { columns } = this.props;
+	const { sortOrder, sortColumn, filteredData, filterValues } = this.state;
+   
+	return (
+		<div className={styles.content}>
+	<table>
+	<thead>
+	<tr>
+	{columns.map((column) => (
+	<th key={column.dataIndex}>
+	{column.title}
+	<button
+	onClick={() => this.handleSort(column)}
+	disabled={sortOrder === SortOrder.None}
+	>
+	{sortColumn === column.dataIndex &&
+	sortOrder === SortOrder.Ascending
+	? "↑"
+	: "↓"}
+	</button>
+	<select
+	value={filterValues[column.dataIndex] || ""}
+	onChange={(e) =>
+	this.handleFilter(column, e.target.value)
+	}
+	>
+	<option value="">All</option>
+	{filteredData
+	.map((item) => item[column.dataIndex])
+	.filter(
+	(value, index, self) =>
+	self.indexOf(value) === index
+	)
+	.map((value) => (
+	<option key={value} value={value}>
+	{value}
+	</option>
+	))}
+	</select>
+	</th>
+	))}
+	</tr>
+	</thead>
+	<tbody>
+	{filteredData.map((item, index) => (
+	<tr key={index}>
+	{columns.map((column) => (
+	<td key={column.dataIndex}>{item[column.dataIndex]}</td>
+	))}
+	</tr>
+	))}
+	</tbody>
+	</table></div>
+	);
+	}
+   }
\ No newline at end of file