diff --git a/.changeset/nine-carrots-pay.md b/.changeset/nine-carrots-pay.md new file mode 100644 index 0000000000..4e4ab32568 --- /dev/null +++ b/.changeset/nine-carrots-pay.md @@ -0,0 +1,5 @@ +--- +"@heroui/table": patch +--- + +remove `removeWrapper` from virtualized table (#4995) diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx index 141eadcca5..3ee4cfa102 100644 --- a/apps/docs/content/docs/components/table.mdx +++ b/apps/docs/content/docs/components/table.mdx @@ -127,6 +127,7 @@ In case you don't want to render the header, you can use the `hideHeader` prop. By default the table is wrapped in a `div` element with a small shadow effect and a border radius. You can use the `removeWrapper` prop to remove the wrapper and only render the table. +However, the `removeWrapper` prop has no effect on a virtualized table, as the wrapper is required to manage its height. @@ -538,7 +539,7 @@ You can customize the `Table` component by passing custom Tailwind CSS classes t { attribute: "removeWrapper", type: "boolean", - description: "Whether the table base container should not be rendered.", + description: "Whether the base container should not be rendered for a non-virtualized table.", default: "false" }, { diff --git a/packages/components/table/src/virtualized-table.tsx b/packages/components/table/src/virtualized-table.tsx index 6f8d5db73b..11eeafe55c 100644 --- a/packages/components/table/src/virtualized-table.tsx +++ b/packages/components/table/src/virtualized-table.tsx @@ -29,7 +29,6 @@ const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => { topContentPlacement, bottomContentPlacement, bottomContent, - removeWrapper, getBaseProps, getWrapperProps, getTableProps, @@ -42,10 +41,6 @@ const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => { const Wrapper = useCallback( ({children}: {children: JSX.Element}) => { - if (removeWrapper) { - return children; - } - return ( ((props, ref) => { ); }, - [removeWrapper, getWrapperProps, maxTableHeight], + [getWrapperProps, maxTableHeight], ); const items = [...collection.body.childNodes];