fix(table): tablecolumn align prop

nextui-org · Apr 28, 2024 · fc3a150 · fc3a150
1 parent 1a033fe
commit fc3a150
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 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-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,17 @@ const table = tv({
         table: "w-full",
       },
     },
+    align: {
+      start: {
+        th: "text-start",
+      },
+      center: {
+        th: "text-center",
+      },
+      end: {
+        th: "text-end",
+      },
+    },
   },
   defaultVariants: {
     layout: "auto",
@@ -260,6 +269,7 @@ const table = tv({
     isStriped: false,
     fullWidth: true,
     disableAnimation: false,
+    align: "start",
   },
 });