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

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

@@ -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>
))
) : (