封装数据驱动的table组件修改网关table样式

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>

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>
+  )
+}