zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-10-15 22:02:35 +02:00
parent b693d0ba2b
commit 857a2b01d3
5 changed files with 55 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/dashboard/src/components/clients/table.tsx
View File

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

62
apps/dashboard/src/components/data-table.tsx
View File

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

3
apps/dashboard/src/components/projects/table.tsx
View File

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

3
apps/dashboard/src/components/settings/invites/columns.tsx
View File

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

3
apps/dashboard/src/components/settings/members/columns.tsx
View File

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