fix(table): table-column align prop

nextui-org · May 16, 2024 · 907fb33 · 907fb33
1 parent 8988981
commit 907fb33
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/.changeset/rich-sloths-jam.md b/.changeset/rich-sloths-jam.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/table": patch
+"@nextui-org/theme": patch
+---
+
+Fix #2886 TableColumn align prop fixed, style improved.
diff --git a/packages/components/table/src/table-cell.tsx b/packages/components/table/src/table-cell.tsx
@@ -1,4 +1,5 @@
 import type {GridNode} from "@react-types/grid";
+import type {TableColumnProps} from "./base";
 
 import {Key, useMemo} from "react";
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
@@ -49,6 +50,8 @@ const TableCell = forwardRef<"td", TableCellProps>((props, ref) => {
     );
   }, [node.rendered]);
 
+  const columnProps: TableColumnProps<unknown> = node.column?.props || {};
+
   return (
     <Component
       ref={domRef}
@@ -62,7 +65,7 @@ const TableCell = forwardRef<"td", TableCellProps>((props, ref) => {
         }),
         otherProps,
       )}
-      className={slots.td?.({class: tdStyles})}
+      className={slots.td?.({align: columnProps.align, class: tdStyles})}
     >
       {cell}
     </Component>

diff --git a/packages/components/table/src/table-column-header.tsx b/packages/components/table/src/table-column-header.tsx
@@ -37,7 +37,7 @@ const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref)
 
   const {isFocusVisible, focusProps} = useFocusRing();
   const {isHovered, hoverProps} = useHover({});
-  const {hideHeader, ...columnProps} = node.props;
+  const {hideHeader, align, ...columnProps} = node.props;
 
   const allowsSorting = columnProps.allowsSorting;
 
@@ -57,7 +57,7 @@ const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref)
         allowsSorting ? hoverProps : {},
         otherProps,
       )}
-      className={slots.th?.({class: thStyles})}
+      className={slots.th?.({align, class: thStyles})}
     >
       {hideHeader ? <VisuallyHidden>{node.rendered}</VisuallyHidden> : node.rendered}
       {allowsSorting && (

diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
@@ -61,8 +61,6 @@ const table = tv({
       "group",
       "px-3",
       "h-10",
-      "text-left",
-      "rtl:text-right",
       "align-middle",
       "bg-default-100",
       "whitespace-nowrap",
@@ -249,6 +247,20 @@ const table = tv({
         table: "w-full",
       },
     },
+    align: {
+      start: {
+        th: "text-start",
+        td: "text-start",
+      },
+      center: {
+        th: "text-center",
+        td: "text-center",
+      },
+      end: {
+        th: "text-end",
+        td: "text-end",
+      },
+    },
   },
   defaultVariants: {
     layout: "auto",
@@ -259,6 +271,8 @@ const table = tv({
     hideHeader: false,
     isStriped: false,
     fullWidth: true,
+    disableAnimation: false,
+    align: "start",
   },
 });