From 1e6b30758672914cb701b5b4c01c4c7ac56ee420 Mon Sep 17 00:00:00 2001
From: luorijun <luorijun@outlook.com>
Date: Fri, 27 Mar 2026 18:02:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=9B=BA=E5=AE=9A=E5=88=B0=E8=BE=B9=E7=BC=98=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(root)/user/page.tsx            |  2 ++
 src/components/data-table/component.tsx | 48 +++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/app/(root)/user/page.tsx b/src/app/(root)/user/page.tsx
index bb39021..d25d63d 100644
--- a/src/app/(root)/user/page.tsx
+++ b/src/app/(root)/user/page.tsx
@@ -90,6 +90,8 @@ export default function UserPage() {
                 format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
             },
             {
+              id: "action",
+              meta: { pin: "right" },
               header: "操作",
               cell: ctx => (
                 <Button
diff --git a/src/components/data-table/component.tsx b/src/components/data-table/component.tsx
index faea4f0..774d29c 100644
--- a/src/components/data-table/component.tsx
+++ b/src/components/data-table/component.tsx
@@ -1,10 +1,12 @@
 import {
+  type Column,
   type ColumnDef,
   flexRender,
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table"
 import { Loader } from "lucide-react"
+import { type CSSProperties, useCallback, useMemo } from "react"
 import { Pagination, type PaginationProps } from "@/components/ui/pagination"
 import {
   TableBody,
@@ -44,8 +46,46 @@ export function DataTable<T extends Record<string, unknown>>(
       },
       columnFilters: [],
     },
+    initialState: {
+      columnPinning: {
+        left: props.columns
+          .map(column =>
+            column.meta?.pin === "left"
+              ? column.id || column.accessorKey
+              : undefined,
+          )
+          .filter(Boolean),
+        right: props.columns
+          .map(column =>
+            column.meta?.pin === "right"
+              ? column.id || column.accessorKey
+              : undefined,
+          )
+          .filter(Boolean),
+      },
+    },
   })
 
+  const pinStyle = (column: Column<T>) => {
+    const pinned = column.getIsPinned()
+    if (!pinned) return {}
+    return {
+      position: pinned ? ("sticky" as const) : undefined,
+      backgroundColor: "white",
+      zIndex: 1,
+      ...{
+        left: {
+          left: column.getStart(pinned),
+          boxShadow: "inset 1px 0 var(--border)",
+        },
+        right: {
+          right: column.getAfter(pinned),
+          boxShadow: "inset 1px 0 var(--border)",
+        },
+      }[pinned],
+    } as CSSProperties
+  }
+
   return (
     <div className={cn("flex flex-col gap-3", props.classNames?.root)}>
       {/* 数据表 */}
@@ -55,7 +95,11 @@ export function DataTable<T extends Record<string, unknown>>(
             {table.getHeaderGroups().map(group => (
               <TableRow key={group.id}>
                 {group.headers.map(header => (
-                  <TableHead key={header.id} colSpan={header.colSpan}>
+                  <TableHead
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    style={pinStyle(header.column)}
+                  >
                     {header.isPlaceholder
                       ? null
                       : flexRender(
@@ -94,7 +138,7 @@ export function DataTable<T extends Record<string, unknown>>(
                   className={cn("h-14", props.classNames?.dataRow)}
                 >
                   {row.getVisibleCells().map(cell => (
-                    <TableCell key={cell.id}>
+                    <TableCell key={cell.id} style={pinStyle(cell.column)}>
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext(),