From 5d3f1daadf886233c4ab68de72b805be4c68146f Mon Sep 17 00:00:00 2001
From: wmp <17516219072@163.com>
Date: Wed, 15 Oct 2025 18:31:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E6=95=B0=E6=8D=AE=E9=A9=B1?=
 =?UTF-8?q?=E5=8A=A8=E7=9A=84table=E7=BB=84=E4=BB=B6=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=BD=91=E5=85=B3table=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(root)/gatewayinfo/page.tsx |  3 ++-
 src/components/data-table.tsx       | 38 +++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/components/data-table.tsx

diff --git a/src/app/(root)/gatewayinfo/page.tsx b/src/app/(root)/gatewayinfo/page.tsx
index a808edc..1766cdd 100644
--- a/src/app/(root)/gatewayinfo/page.tsx
+++ b/src/app/(root)/gatewayinfo/page.tsx
@@ -120,6 +120,7 @@ export default function Gatewayinfo() {
       setLoading(true)
       setError('')
       const result = await getGatewayInfo()
+      console.log(result.data)
 
       setData(result.data)
       setFilteredData(result.data) // 初始化时设置filteredData
@@ -198,7 +199,7 @@ export default function Gatewayinfo() {
       </div>
 
       <div className="flex-auto overflow-hidden gap-6 flex">
-        <div className="flex-3">
+        <div className="flex-3 flex flex-col">
           <Table>
             <TableHeader>
               <TableRow>
diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx
new file mode 100644
index 0000000..3254bc6
--- /dev/null
+++ b/src/components/data-table.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table'
+import { ReactNode } from 'react'
+
+type Data = {
+  [key: string]: unknown
+}
+
+type Column = {
+  label: string
+  props?: string
+  render?: (val: Data) => ReactNode
+}
+
+export function DataTable(props: { data: Data[], columns: Column[] }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {props.columns.map((item, index) => (
+            <TableHead key={index}>{item.label}</TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {props.data.map((row, index) => (
+          <TableRow key={index}>
+            {props.columns.map((colume, index) => (
+              <TableCell key={index}>
+                { colume.props ? String(row[colume.props]) : colume.render ? colume.render(row) : undefined }
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}