Skip to content

Commit ba0ec21

Browse files
samejrsamejr
committed
Improved the tables so they can have an optional sticky header
1 parent ae9adb5 commit ba0ec21

File tree

2 files changed

+47
-48
lines changed
  • apps/webapp/app
    • components/primitives
    • routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam

2 files changed

+47
-48
lines changed

‎apps/webapp/app/components/primitives/Table.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(
2222
fullWidth && "w-full"
2323
)}
2424
>
25-
<table ref={ref} className={cn("w-full divide-y", className)}>
25+
<table ref={ref} className={cn("w-full", className)}>
2626
{children}
2727
</table>
2828
</div>
@@ -40,7 +40,10 @@ export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>
4040
return (
4141
<thead
4242
ref={ref}
43-
className={cn("rounded-t-md", "relative divide-y divide-grid-dimmed", className)}
43+
className={cn(
44+
"sticky top-0 z-10 divide-y divide-grid-dimmed rounded-t-md bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-dimmed",
45+
className
46+
)}
4447
>
4548
{children}
4649
</thead>
@@ -56,7 +59,10 @@ type TableBodyProps = {
5659
export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
5760
({ className, children }, ref) => {
5861
return (
59-
<tbody ref={ref} className={cn("relative divide-y divide-grid-dimmed", className)}>
62+
<tbody
63+
ref={ref}
64+
className={cn("relative divide-y divide-grid-dimmed overflow-y-auto", className)}
65+
>
6066
{children}
6167
</tbody>
6268
);
@@ -138,7 +144,7 @@ type TableCellProps = TableCellBasicProps & {
138144
};
139145

140146
const stickyStyles =
141-
"sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem] before:bg-gradient-to-r before:from-transparent before:to-background before:content-[''] group-hover/table-row:before:to-charcoal-900";
147+
"sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem]";
142148

143149
export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
144150
(
@@ -180,7 +186,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
180186
className={cn(
181187
"text-xs text-charcoal-400",
182188
to || onClick || hasAction
183-
? "cursor-pointer group-hover/table-row:bg-charcoal-900"
189+
? "cursor-pointer group-hover/table-row:bg-charcoal-800"
184190
: "px-3 py-3 align-middle",
185191
!to && !onClick && alignmentClassName,
186192
isSticky && stickyStyles,

‎apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx‎

Lines changed: 36 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -319,49 +319,42 @@ function SpanBody({
319319
<Property.Item>
320320
<div className="flex flex-col gap-1.5">
321321
<Header3>Triggered runs</Header3>
322-
<div
323-
className={cn(
324-
"max-h-[12.5rem] overflow-y-auto rounded-md",
325-
span.triggeredRuns.length > 4 && "border-b border-grid-bright"
326-
)}
327-
>
328-
<Table>
329-
<TableHeader>
330-
<TableRow>
331-
<TableHeaderCell>Run #</TableHeaderCell>
332-
<TableHeaderCell>Task</TableHeaderCell>
333-
<TableHeaderCell>Version</TableHeaderCell>
334-
<TableHeaderCell>Created at</TableHeaderCell>
335-
</TableRow>
336-
</TableHeader>
337-
<TableBody>
338-
{span.triggeredRuns.map((run) => {
339-
const path = v3RunSpanPath(
340-
organization,
341-
project,
342-
{ friendlyId: run.friendlyId },
343-
{ spanId: run.spanId }
344-
);
345-
return (
346-
<TableRow key={run.friendlyId}>
347-
<TableCell to={path} actionClassName="py-1.5">
348-
{run.number}
349-
</TableCell>
350-
<TableCell to={path} actionClassName="py-1.5">
351-
{run.taskIdentifier}
352-
</TableCell>
353-
<TableCell to={path} actionClassName="py-1.5">
354-
{run.lockedToVersion?.version ?? "–"}
355-
</TableCell>
356-
<TableCell to={path} actionClassName="py-1.5">
357-
<DateTime date={run.createdAt} />
358-
</TableCell>
359-
</TableRow>
360-
);
361-
})}
362-
</TableBody>
363-
</Table>
364-
</div>
322+
<Table containerClassName="max-h-[12.5rem]">
323+
<TableHeader className="bg-background-bright">
324+
<TableRow>
325+
<TableHeaderCell>Run #</TableHeaderCell>
326+
<TableHeaderCell>Task</TableHeaderCell>
327+
<TableHeaderCell>Version</TableHeaderCell>
328+
<TableHeaderCell>Created at</TableHeaderCell>
329+
</TableRow>
330+
</TableHeader>
331+
<TableBody>
332+
{span.triggeredRuns.map((run) => {
333+
const path = v3RunSpanPath(
334+
organization,
335+
project,
336+
{ friendlyId: run.friendlyId },
337+
{ spanId: run.spanId }
338+
);
339+
return (
340+
<TableRow key={run.friendlyId}>
341+
<TableCell to={path} actionClassName="py-1.5">
342+
{run.number}
343+
</TableCell>
344+
<TableCell to={path} actionClassName="py-1.5">
345+
{run.taskIdentifier}
346+
</TableCell>
347+
<TableCell to={path} actionClassName="py-1.5">
348+
{run.lockedToVersion?.version ?? "–"}
349+
</TableCell>
350+
<TableCell to={path} actionClassName="py-1.5">
351+
<DateTime date={run.createdAt} />
352+
</TableCell>
353+
</TableRow>
354+
);
355+
})}
356+
</TableBody>
357+
</Table>
365358
</div>
366359
</Property.Item>
367360
)}

0 commit comments

Comments
 (0)