From 010a093b24794add6842aacea13f703890f030aa Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Wed, 1 Jul 2026 12:04:58 +0900 Subject: [PATCH 1/2] feat(table): support center alignment --- .changeset/clean-centers-wave.md | 10 ++++++ docs/components/table.md | 21 ++++++++++++- packages/core/src/components/table.test.tsx | 35 +++++++++++++++++++++ packages/core/src/components/table.tsx | 12 +++++-- 4 files changed, 74 insertions(+), 4 deletions(-) create mode 100644 .changeset/clean-centers-wave.md diff --git a/.changeset/clean-centers-wave.md b/.changeset/clean-centers-wave.md new file mode 100644 index 00000000..b8c275c4 --- /dev/null +++ b/.changeset/clean-centers-wave.md @@ -0,0 +1,10 @@ +--- +"@tailor-platform/app-shell": minor +--- + +Add `"center"` as a supported `align` value for `Table.Head` and `Table.Cell`. + +```tsx +Status +Active +``` diff --git a/docs/components/table.md b/docs/components/table.md index 2ebf6679..bc3731d2 100644 --- a/docs/components/table.md +++ b/docs/components/table.md @@ -60,7 +60,7 @@ All other standard HTML `` props are accepted. All other sub-components (`Table.Header`, `Table.Body`, `Table.Footer`, `Table.Row`, `Table.Head`, `Table.Cell`, `Table.Caption`) accept `className` and their corresponding standard HTML element props. -`Table.Head` and `Table.Cell` also accept `align?: "left" | "right"` for semantic text alignment without relying on utility-class overrides. +`Table.Head` and `Table.Cell` also accept `align?: "left" | "center" | "right"` for semantic text alignment without relying on utility-class overrides. ## Examples @@ -135,6 +135,25 @@ All other sub-components (`Table.Header`, `Table.Body`, `Table.Footer`, `Table.R ``` +### Center-aligned status column + +```tsx + + + + Item + Status + + + + + Widget A + Active + + + +``` + ### Constrained Height with Scroll ```tsx diff --git a/packages/core/src/components/table.test.tsx b/packages/core/src/components/table.test.tsx index 24a9040e..867faeed 100644 --- a/packages/core/src/components/table.test.tsx +++ b/packages/core/src/components/table.test.tsx @@ -21,6 +21,23 @@ describe("Table", () => { const head = container.querySelector('[data-slot="table-head"]'); expect(head?.className).toContain("astw:text-right"); expect(head?.className).not.toContain("astw:text-left"); + expect(head?.className).not.toContain("astw:text-center"); + }); + + it("center-aligns header cells via align prop", () => { + const { container } = render( + + + + Status + + + , + ); + const head = container.querySelector('[data-slot="table-head"]'); + expect(head?.className).toContain("astw:text-center"); + expect(head?.className).not.toContain("astw:text-left"); + expect(head?.className).not.toContain("astw:text-right"); }); it("right-aligns data cells via align prop", () => { @@ -36,6 +53,23 @@ describe("Table", () => { const cell = container.querySelector('[data-slot="table-cell"]'); expect(cell?.className).toContain("astw:text-right"); expect(cell?.className).not.toContain("astw:text-left"); + expect(cell?.className).not.toContain("astw:text-center"); + }); + + it("center-aligns data cells via align prop", () => { + const { container } = render( + + + + Active + + + , + ); + const cell = container.querySelector('[data-slot="table-cell"]'); + expect(cell?.className).toContain("astw:text-center"); + expect(cell?.className).not.toContain("astw:text-left"); + expect(cell?.className).not.toContain("astw:text-right"); }); it("left-aligns data cells by default", () => { @@ -51,6 +85,7 @@ describe("Table", () => { const cell = container.querySelector('[data-slot="table-cell"]'); expect(cell?.className).toContain("astw:text-left"); expect(cell?.className).not.toContain("astw:text-right"); + expect(cell?.className).not.toContain("astw:text-center"); }); }); diff --git a/packages/core/src/components/table.tsx b/packages/core/src/components/table.tsx index edcfe631..5d05a2f3 100644 --- a/packages/core/src/components/table.tsx +++ b/packages/core/src/components/table.tsx @@ -7,10 +7,16 @@ type RootProps = React.ComponentProps<"table"> & { containerClassName?: string; }; -type CellAlign = "left" | "right"; +type CellAlign = "left" | "center" | "right"; type HeadProps = React.ComponentProps<"th"> & { align?: CellAlign }; type CellProps = React.ComponentProps<"td"> & { align?: CellAlign }; +const cellAlignClassName = { + left: "astw:text-left", + center: "astw:text-center", + right: "astw:text-right", +} satisfies Record; + /** * The root table element with a horizontally scrollable container. * @@ -111,7 +117,7 @@ function Head({ className, align = "left", ...props }: HeadProps) { data-slot="table-head" className={cn( "astw:text-foreground astw:h-10 astw:px-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:font-medium astw:whitespace-nowrap astw:[&:has([role=checkbox])]:pr-0", - align === "right" ? "astw:text-right" : "astw:text-left", + cellAlignClassName[align], className, )} {...props} @@ -127,7 +133,7 @@ function Cell({ className, align = "left", ...props }: CellProps) { data-slot="table-cell" className={cn( "astw:px-2 astw:py-2 astw:first:pl-6 astw:last:pr-6 astw:align-middle astw:whitespace-nowrap astw:[&:has([role=checkbox])]:pr-0", - align === "right" ? "astw:text-right" : "astw:text-left", + cellAlignClassName[align], className, )} {...props} From 0701c8211add41f4cd0414dc8fa5b626795d8d4f Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Wed, 1 Jul 2026 12:09:43 +0900 Subject: [PATCH 2/2] chore(changeset): merge table align notes --- .changeset/bright-tables-wave.md | 5 ++++- .changeset/clean-centers-wave.md | 10 ---------- 2 files changed, 4 insertions(+), 11 deletions(-) delete mode 100644 .changeset/clean-centers-wave.md diff --git a/.changeset/bright-tables-wave.md b/.changeset/bright-tables-wave.md index add1ceff..91c00e09 100644 --- a/.changeset/bright-tables-wave.md +++ b/.changeset/bright-tables-wave.md @@ -2,9 +2,12 @@ "@tailor-platform/app-shell": minor --- -Add `align?: "left" | "right"` to `Table.Head` and `Table.Cell` so raw table primitives can align numeric columns without relying on consumer Tailwind utility overrides. +Add `align?: "left" | "center" | "right"` to `Table.Head` and `Table.Cell` so raw table primitives can align numeric and status columns without relying on consumer Tailwind utility overrides. ```tsx Amount 123 + +Status +Active ``` diff --git a/.changeset/clean-centers-wave.md b/.changeset/clean-centers-wave.md deleted file mode 100644 index b8c275c4..00000000 --- a/.changeset/clean-centers-wave.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -"@tailor-platform/app-shell": minor ---- - -Add `"center"` as a supported `align` value for `Table.Head` and `Table.Cell`. - -```tsx -Status -Active -```