123 lines
3.7 KiB
TypeScript
123 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* The panel's data table.
|
|
*
|
|
* From md up it's an ordinary table. Below xl, long values (emails, URLs)
|
|
* may wrap anywhere so the columns fit a tablet; if they still can't, the
|
|
* table scrolls sideways inside its card as a last resort.
|
|
*
|
|
* On a phone (below md) each row becomes a stacked card: one line per cell, labelled
|
|
* with its column heading. The labels are read from the table's own <th>s
|
|
* and stamped onto the cells as `data-label`, so pages need no extra markup
|
|
* — every table in the panel gets the card layout for free. Cells under an
|
|
* empty heading (an actions column) simply go unlabelled.
|
|
*/
|
|
export function Table({ children }: { children: React.ReactNode }) {
|
|
const ref = React.useRef<HTMLTableElement>(null);
|
|
|
|
// Runs after every render: rows arrive and change with the data.
|
|
React.useLayoutEffect(() => {
|
|
const table = ref.current;
|
|
if (!table) return;
|
|
const heads = Array.from(table.querySelectorAll("thead th")).map(
|
|
(th) => th.textContent?.trim() ?? "",
|
|
);
|
|
table.querySelectorAll("tbody tr").forEach((tr) => {
|
|
let col = 0;
|
|
Array.from(tr.children).forEach((cell) => {
|
|
const td = cell as HTMLTableCellElement;
|
|
const label = td.colSpan > 1 ? "" : (heads[col] ?? "");
|
|
if (label) td.dataset.label = label;
|
|
else delete td.dataset.label;
|
|
col += td.colSpan || 1;
|
|
});
|
|
});
|
|
});
|
|
|
|
return (
|
|
<div className="rounded-xl border border-border bg-card md:overflow-x-auto md:overscroll-x-contain">
|
|
<table
|
|
ref={ref}
|
|
className="w-full border-collapse text-sm max-md:block"
|
|
>
|
|
{children}
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function THead({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<thead className="border-b border-border bg-muted/50 text-left text-xs uppercase tracking-wide text-muted-foreground max-md:hidden">
|
|
{children}
|
|
</thead>
|
|
);
|
|
}
|
|
|
|
export function TH({
|
|
children,
|
|
className,
|
|
}: {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<th className={cn("whitespace-nowrap px-4 py-3 font-medium", className)}>
|
|
{children}
|
|
</th>
|
|
);
|
|
}
|
|
|
|
export function TR({
|
|
children,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<tr
|
|
className={cn(
|
|
"border-b border-border last:border-0 align-top",
|
|
// Phone: a card per row.
|
|
"max-md:block max-md:px-4 max-md:py-3",
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
export function TD({
|
|
children,
|
|
className,
|
|
}: {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<td
|
|
className={cn(
|
|
"px-4 py-3 text-foreground",
|
|
// Phone: one labelled block per cell — the label pinned on the left,
|
|
// the cell's own content flowing beside it exactly as it would in the
|
|
// table (stacked lines stay stacked). Alignment classes meant for a
|
|
// column (text-right on actions) give way to the card's flow.
|
|
"max-md:relative max-md:block max-md:px-0 max-md:py-1.5 max-md:text-left",
|
|
"max-md:data-label:pl-28",
|
|
"max-md:data-label:before:absolute max-md:data-label:before:left-0 max-md:data-label:before:top-2 max-md:data-label:before:w-24 max-md:data-label:before:text-[11px] max-md:data-label:before:font-medium max-md:data-label:before:uppercase max-md:data-label:before:leading-4 max-md:data-label:before:tracking-wide max-md:data-label:before:text-muted-foreground max-md:data-label:before:content-[attr(data-label)]",
|
|
// Long values (emails, URLs) wrap rather than widen the table or card.
|
|
"max-xl:[overflow-wrap:anywhere]",
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</td>
|
|
);
|
|
}
|