Skip to content

feat: add compact variant to Table.Header component #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
geoquant merged 2 commits into from
Mar 3, 2026
Merged

feat: add compact variant to Table.Header component #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82d476d
feat: add compact variant to Table.Header component
visalcf Feb 10, 2026
2b005fb
Merge branch 'main' into feat/table-compact-header
geoquant Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/table-compact-header-variant.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@cloudflare/kumo": patch
---

Add `variant="compact"` prop to Table.Header for a more condensed header style
27 changes: 27 additions & 0 deletions packages/kumo-docs-astro/src/components/demos/TableDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,33 @@ export function TableWithCheckboxDemo() {
);
}

export function TableWithCompactHeaderDemo() {
return (
<LayerCard>
<LayerCard.Primary className="p-0">
<Table>
<Table.Header variant="compact">
<Table.Row>
<Table.Head>Subject</Table.Head>
<Table.Head>From</Table.Head>
<Table.Head>Date</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{emailData.slice(0, 3).map((row) => (
<Table.Row key={row.id}>
<Table.Cell>{row.subject}</Table.Cell>
<Table.Cell>{row.from}</Table.Cell>
<Table.Cell>{row.date}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</LayerCard.Primary>
</LayerCard>
);
}

export function TableSelectedRowDemo() {
const rows = emailData.slice(0, 3);
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set(["2"]));
Expand Down
32 changes: 32 additions & 0 deletions packages/kumo-docs-astro/src/pages/components/table.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import PropsTable from "../../components/docs/PropsTable.astro";
import {
TableBasicDemo,
TableWithCheckboxDemo,
TableWithCompactHeaderDemo,
TableSelectedRowDemo,
TableFixedLayoutDemo,
TableFullDemo,
Expand Down Expand Up @@ -125,6 +126,37 @@ export default function Example() {
</ComponentExample>
</div>

<div>
<Heading level={3}>Compact Header</Heading>
<p class="mb-4 text-sm text-kumo-strong">
Use <code class="rounded bg-kumo-control px-1 py-0.5 text-sm"
>variant="compact"</code
> on <code class="rounded bg-kumo-control px-1 py-0.5 text-sm"
>Table.Header</code
> for a more condensed header style.
</p>
<ComponentExample
code={`<Table>
<Table.Header variant="compact">
<Table.Row>
<Table.Head>Subject</Table.Head>
<Table.Head>From</Table.Head>
<Table.Head>Date</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>Email subject</Table.Cell>
<Table.Cell>Sender name</Table.Cell>
<Table.Cell>Date</Table.Cell>
</Table.Row>
</Table.Body>
</Table>`}
>
<TableWithCompactHeaderDemo client:visible />
</ComponentExample>
</div>

<div>
<Heading level={3}>Selected Row</Heading>
<p class="mb-4 text-sm text-kumo-strong">
Expand Down
22 changes: 15 additions & 7 deletions packages/kumo/src/components/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@ const TableRoot = forwardRef<
const className = cn(
"w-full",
KUMO_TABLE_VARIANTS.layout[layout].classes,
"[&_tr_td]:border-b [&_tr_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0", // Row border
"[&_tr_td]:p-3", // Cell padding
"[&_tr_th]:border-b [&_tr_th]:border-kumo-fill [&_tr_th]:p-3 [&_tr_th]:font-semibold", // Header styles
"[&_tr_th]:bg-kumo-base", // Header background color
"[&_td]:border-b [&_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0", // Row border
"[&_td]:p-3", // Cell padding
"[&_th]:border-b [&_th]:border-kumo-fill [&_th]:p-3 [&_th]:font-semibold", // Header styles
"[&_th]:bg-kumo-base", // Header background color
"text-left text-kumo-default",
props.className,
);
Expand All @@ -84,9 +84,17 @@ const TableRoot = forwardRef<

const TableHeader = forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>((props, ref) => {
return <thead ref={ref} {...props} />;
React.HTMLAttributes<HTMLTableSectionElement> & {
variant?: "default" | "compact";
Copy link
Contributor

@CiscoFran10 CiscoFran10 Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed Table.Header defines its variant prop inline ("default" | "compact") instead of deriving it from a KUMO_*_VARIANTS constant like Table.Row does.

Does the documentation tooling extract variant information from inline union types as well, or does it rely on exported variant maps?

Copy link
Contributor

@CiscoFran10 CiscoFran10 Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn’t show up in the API reference:

image

Copy link
Contributor Author

@invisal invisal Feb 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The doc doesn't pickup with Table.Row variant as well even we specified the KUMO_*_VARIANTS

}
>(({ variant = "default", ...props }, ref) => {
const className = cn(
variant === "compact" &&
"[&_th]:bg-kumo-elevated [&_th]:py-2 text-xs text-kumo-strong",
props.className,
);

return <thead ref={ref} {...props} className={className} />;
});

const TableHead = forwardRef<
Expand Down
Loading