diff --git a/apps/dashboard/src/components/clients/table.tsx b/apps/dashboard/src/components/clients/table.tsx index 12d26213..a4daaad3 100644 --- a/apps/dashboard/src/components/clients/table.tsx +++ b/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[] = [ @@ -47,7 +48,7 @@ export const columns: ColumnDef[] = [ }, }, { - id: 'actions', + id: ACTIONS, header: 'Actions', cell: ({ row }) => , }, diff --git a/apps/dashboard/src/components/data-table.tsx b/apps/dashboard/src/components/data-table.tsx index efa7c954..3733dd2a 100644 --- a/apps/dashboard/src/components/data-table.tsx +++ b/apps/dashboard/src/components/data-table.tsx @@ -15,6 +15,8 @@ interface DataTableProps { data: TData[]; } +export const ACTIONS = '__actions__'; + export function TableButtons({ children, className, @@ -41,16 +43,30 @@ export function DataTable({ columns, data }: DataTableProps) { {table.getHeaderGroups().map((headerGroup) => ( - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ))} + {headerGroup.headers.map((header) => { + if (header.column.id === ACTIONS) { + return ( + + Actions + + ); + } + + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + + ); + })} ))} @@ -61,11 +77,27 @@ export function DataTable({ columns, data }: DataTableProps) { key={row.id} data-state={row.getIsSelected() && 'selected'} > - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} + {row.getVisibleCells().map((cell) => { + if (cell.column.id === ACTIONS) { + return ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ); + } + + return ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ); + })} )) ) : ( diff --git a/apps/dashboard/src/components/projects/table.tsx b/apps/dashboard/src/components/projects/table.tsx index 64b058ad..33bf7404 100644 --- a/apps/dashboard/src/components/projects/table.tsx +++ b/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[] = [ }, }, { - id: 'actions', + id: ACTIONS, header: 'Actions', cell: ({ row }) => , }, diff --git a/apps/dashboard/src/components/settings/invites/columns.tsx b/apps/dashboard/src/components/settings/invites/columns.tsx index c5c54c4c..eca354c8 100644 --- a/apps/dashboard/src/components/settings/invites/columns.tsx +++ b/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 ; }, diff --git a/apps/dashboard/src/components/settings/members/columns.tsx b/apps/dashboard/src/components/settings/members/columns.tsx index 9babe6da..6c61c8de 100644 --- a/apps/dashboard/src/components/settings/members/columns.tsx +++ b/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 ; },