improve(dashboard): make actions sticky on the right for data table

apps/dashboard/src/components/clients/table.tsx

@@ -3,6 +3,7 @@ import type { ColumnDef } from '@tanstack/react-table';
 
 import type { IServiceClientWithProject } from '@openpanel/db';
 
+import { ACTIONS } from '../data-table';
 import { ClientActions } from './client-actions';
 
 export const columns: ColumnDef<IServiceClientWithProject>[] = [
@@ -47,7 +48,7 @@ export const columns: ColumnDef<IServiceClientWithProject>[] = [
     },
   },
   {
-    id: 'actions',
+    id: ACTIONS,
     header: 'Actions',
     cell: ({ row }) => <ClientActions {...row.original} />,
   },

apps/dashboard/src/components/data-table.tsx

@@ -15,6 +15,8 @@ interface DataTableProps<TData> {
   data: TData[];
 }
 
+export const ACTIONS = '__actions__';
+
 export function TableButtons({
   children,
   className,
@@ -41,16 +43,30 @@ export function DataTable<TData>({ columns, data }: DataTableProps<TData>) {
       <GridHeader>
         {table.getHeaderGroups().map((headerGroup) => (
           <GridRow key={headerGroup.id}>
-            {headerGroup.headers.map((header) => (
-              <GridCell key={header.id} isHeader>
-                {header.isPlaceholder
-                  ? null
-                  : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext(),
-                    )}
-              </GridCell>
-            ))}
+            {headerGroup.headers.map((header) => {
+              if (header.column.id === ACTIONS) {
+                return (
+                  <GridCell
+                    key={header.id}
+                    isHeader
+                    className="sticky right-0 center-center"
+                  >
+                    Actions
+                  </GridCell>
+                );
+              }
+
+              return (
+                <GridCell key={header.id} isHeader>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </GridCell>
+              );
+            })}
           </GridRow>
         ))}
       </GridHeader>
@@ -61,11 +77,27 @@ export function DataTable<TData>({ columns, data }: DataTableProps<TData>) {
               key={row.id}
               data-state={row.getIsSelected() && 'selected'}
             >
-              {row.getVisibleCells().map((cell) => (
-                <GridCell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </GridCell>
-              ))}
+              {row.getVisibleCells().map((cell) => {
+                if (cell.column.id === ACTIONS) {
+                  return (
+                    <GridCell
+                      key={cell.id}
+                      className="sticky right-0 bg-background center-center"
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </GridCell>
+                  );
+                }
+
+                return (
+                  <GridCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </GridCell>
+                );
+              })}
             </GridRow>
           ))
         ) : (

apps/dashboard/src/components/projects/table.tsx

@@ -3,6 +3,7 @@ import type { ColumnDef } from '@tanstack/react-table';
 
 import type { IServiceProject } from '@openpanel/db';
 
+import { ACTIONS } from '../data-table';
 import { ProjectActions } from './project-actions';
 
 export type Project = IServiceProject;
@@ -20,7 +21,7 @@ export const columns: ColumnDef<IServiceProject>[] = [
     },
   },
   {
-    id: 'actions',
+    id: ACTIONS,
     header: 'Actions',
     cell: ({ row }) => <ProjectActions {...row.original} />,
   },

apps/dashboard/src/components/settings/invites/columns.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/navigation';
 import { pathOr } from 'ramda';
 import { toast } from 'sonner';
 
+import { ACTIONS } from '@/components/data-table';
 import type { IServiceInvite, IServiceProject } from '@openpanel/db';
 
 export function useColumns(
@@ -72,7 +73,7 @@ export function useColumns(
       },
     },
     {
-      id: 'actions',
+      id: ACTIONS,
       cell: ({ row }) => {
         return <ActionCell row={row} />;
       },

apps/dashboard/src/components/settings/members/columns.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/navigation';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 
+import { ACTIONS } from '@/components/data-table';
 import type { IServiceMember, IServiceProject } from '@openpanel/db';
 
 export function useColumns(projects: IServiceProject[]) {
@@ -59,7 +60,7 @@ export function useColumns(projects: IServiceProject[]) {
       },
     },
     {
-      id: 'actions',
+      id: ACTIONS,
       cell: ({ row }) => {
         return <ActionsCell row={row} />;
       },