archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(table): column props not recognized (#5950)

Browse Source 
* fix(table): width, minWidth, and maxWidth

* refactor(docs): revise table examples

* chore(changeset): add changeset
This commit is contained in:
WK 2025-12-04 21:42:04 +08:00 committed by GitHub
parent 0f165a36c8
commit f08dfb8dd9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 89 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fair-years-shave.md Normal file
View File

@ -0,0 +1,5 @@
---
"@heroui/table": patch
---
fix column props not recognized (#1667)

26
apps/docs/app/examples/table/custom-styles/page.tsx
View File

@ -350,20 +350,18 @@ export default function Page() {
);
case "actions":
return (
<div className="relative flex justify-end items-center gap-2">
<Dropdown className="bg-background border-1 border-default-200">
<DropdownTrigger>
<Button isIconOnly radius="full" size="sm" variant="light">
<VerticalDotsIcon className="text-default-400" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<Dropdown className="bg-background border-1 border-default-200">
<DropdownTrigger>
<Button isIconOnly radius="full" size="sm" variant="light">
<VerticalDotsIcon className="text-default-400" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
);
default:
return cellValue;

26
apps/docs/app/examples/table/use-case/page.tsx
View File

@ -342,20 +342,18 @@ export default function Page() {
);
case "actions":
return (
<div className="relative flex justify-end items-center gap-2">
<Dropdown>
<DropdownTrigger>
<Button isIconOnly size="sm" variant="light">
<VerticalDotsIcon className="text-default-300" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<Dropdown>
<DropdownTrigger>
<Button isIconOnly size="sm" variant="light">
<VerticalDotsIcon className="text-default-300" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
);
default:
return cellValue;

26
apps/docs/content/components/table/custom-styles.raw.jsx
View File

@ -441,20 +441,18 @@ export default function App() {
);
case "actions":
return (
<div className="relative flex justify-end items-center gap-2">
<Dropdown className="bg-background border-1 border-default-200">
<DropdownTrigger>
<Button isIconOnly radius="full" size="sm" variant="light">
<VerticalDotsIcon className="text-default-400" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<Dropdown className="bg-background border-1 border-default-200">
<DropdownTrigger>
<Button isIconOnly radius="full" size="sm" variant="light">
<VerticalDotsIcon className="text-default-400" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
);
default:
return cellValue;

26
apps/docs/content/components/table/custom-styles.raw.tsx
View File

@ -453,20 +453,18 @@ export default function App() {
);
case "actions":
return (
<div className="relative flex justify-end items-center gap-2">
<Dropdown className="bg-background border-1 border-default-200">
<DropdownTrigger>
<Button isIconOnly radius="full" size="sm" variant="light">
<VerticalDotsIcon className="text-default-400" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<Dropdown className="bg-background border-1 border-default-200">
<DropdownTrigger>
<Button isIconOnly radius="full" size="sm" variant="light">
<VerticalDotsIcon className="text-default-400" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
);
default:
return cellValue;

26
apps/docs/content/components/table/use-case.raw.jsx
View File

@ -433,20 +433,18 @@ export default function App() {
);
case "actions":
return (
<div className="relative flex justify-end items-center gap-2">
<Dropdown>
<DropdownTrigger>
<Button isIconOnly size="sm" variant="light">
<VerticalDotsIcon className="text-default-300" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<Dropdown>
<DropdownTrigger>
<Button isIconOnly size="sm" variant="light">
<VerticalDotsIcon className="text-default-300" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
);
default:
return cellValue;

26
apps/docs/content/components/table/use-case.raw.tsx
View File

@ -446,20 +446,18 @@ export default function App() {
);
case "actions":
return (
<div className="relative flex justify-end items-center gap-2">
<Dropdown>
<DropdownTrigger>
<Button isIconOnly size="sm" variant="light">
<VerticalDotsIcon className="text-default-300" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<Dropdown>
<DropdownTrigger>
<Button isIconOnly size="sm" variant="light">
<VerticalDotsIcon className="text-default-300" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem key="view">View</DropdownItem>
<DropdownItem key="edit">Edit</DropdownItem>
<DropdownItem key="delete">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
);
default:
return cellValue;

13
packages/components/table/src/table-column-header.tsx
View File

@ -35,6 +35,10 @@ export interface TableColumnHeaderProps<T = object> extends HTMLHeroUIProps<"th"
node: GridNode<T>;
}
const normalizeWidth = (value: number | string): string => {
return typeof value === "number" ? `${value}px` : value;
};
const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref) => {
const {as, className, state, node, slots, classNames, sortIcon, ...otherProps} = props;
@ -49,10 +53,16 @@ const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref)
const {isFocusVisible, focusProps} = useFocusRing();
const {isHovered, hoverProps} = useHover({});
const {hideHeader, align, ...columnProps} = node.props;
const {hideHeader, align, width, minWidth, maxWidth, ...columnProps} = node.props;
const allowsSorting = columnProps.allowsSorting;
const columnStyles: React.CSSProperties = {};
if (width) columnStyles.width = normalizeWidth(width);
if (minWidth) columnStyles.minWidth = normalizeWidth(minWidth);
if (maxWidth) columnStyles.maxWidth = normalizeWidth(maxWidth);
const sortIconProps = {
"aria-hidden": true,
"data-direction": state.sortDescriptor?.direction,
@ -72,6 +82,7 @@ const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref)
data-focus-visible={dataAttr(isFocusVisible)}
data-hover={dataAttr(isHovered)}
data-sortable={dataAttr(allowsSorting)}
style={columnStyles}
{...mergeProps(
columnHeaderProps,
focusProps,