Skip to content

Commit

Permalink
feat: use wrapper to support theme styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinroger
vinroger committed Dec 9, 2024
1 parent edd6f91 commit 3308771
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 69 deletions.
142 changes: 73 additions & 69 deletions packages/components/table/src/virtualized-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,18 @@ const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => {
return children;
}

return <BaseComponent {...getWrapperProps()}>{children}</BaseComponent>;
return (
<BaseComponent
{...getWrapperProps()}
ref={parentRef}
/* Display must be block to maintain the scroll "progress" */
style={{height: maxTableHeight, display: "block"}}
>
{children}
</BaseComponent>
);
},
[removeWrapper, getWrapperProps],
[removeWrapper, getWrapperProps, maxTableHeight],
);

const items = [...collection.body.childNodes];
Expand Down Expand Up @@ -75,73 +84,68 @@ const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => {
return (
<div {...getBaseProps()}>
{/* We need to add p-1 to make the shadow-sm visible */}
<div
ref={parentRef}
className="overflow-auto block w-full p-1 bg-content1 rounded-large shadow-small"
style={{height: maxTableHeight}}
>
{topContentPlacement === "outside" && topContent}
<div
className="p-4 z-0 relative justify-between gap-4 w-full"
style={{height: `calc(${rowVirtualizer.getTotalSize() + headerHeight}px + 2rem)`}} // 2rem is offset for padding-top and padding-bottom (p-4)
>
<>
{topContentPlacement === "inside" && topContent}
<Component {...getTableProps()}>
<TableRowGroup ref={headerRef} classNames={values.classNames} slots={values.slots}>
{collection.headerRows.map((headerRow) => (
<TableHeaderRow
key={headerRow?.key}
classNames={values.classNames}
node={headerRow}
slots={values.slots}
state={values.state}
>
{[...headerRow.childNodes].map((column) =>
column?.props?.isSelectionCell ? (
<TableSelectAllCheckbox
key={column?.key}
checkboxesProps={values.checkboxesProps}
classNames={values.classNames}
color={values.color}
disableAnimation={values.disableAnimation}
node={column}
selectionMode={values.selectionMode}
slots={values.slots}
state={values.state}
/>
) : (
<TableColumnHeader
key={column?.key}
classNames={values.classNames}
node={column}
slots={values.slots}
state={values.state}
/>
),
)}
</TableHeaderRow>
))}
<Spacer as="tr" tabIndex={-1} y={1} />
</TableRowGroup>
<VirtualizedTableBody
checkboxesProps={values.checkboxesProps}
classNames={values.classNames}
collection={values.collection}
color={values.color}
disableAnimation={values.disableAnimation}
isSelectable={values.isSelectable}
rowVirtualizer={rowVirtualizer}
selectionMode={values.selectionMode}
slots={values.slots}
state={values.state}
/>
</Component>
{bottomContentPlacement === "inside" && bottomContent}
</>
</div>
{bottomContentPlacement === "outside" && bottomContent}
</div>
<Wrapper>
<>
{topContentPlacement === "outside" && topContent}
<div style={{height: `calc(${rowVirtualizer.getTotalSize() + headerHeight}px)`}}>
<>
{topContentPlacement === "inside" && topContent}
<Component {...getTableProps()}>
<TableRowGroup ref={headerRef} classNames={values.classNames} slots={values.slots}>
{collection.headerRows.map((headerRow) => (
<TableHeaderRow
key={headerRow?.key}
classNames={values.classNames}
node={headerRow}
slots={values.slots}
state={values.state}
>
{[...headerRow.childNodes].map((column) =>
column?.props?.isSelectionCell ? (
<TableSelectAllCheckbox
key={column?.key}
checkboxesProps={values.checkboxesProps}
classNames={values.classNames}
color={values.color}
disableAnimation={values.disableAnimation}
node={column}
selectionMode={values.selectionMode}
slots={values.slots}
state={values.state}
/>
) : (
<TableColumnHeader
key={column?.key}
classNames={values.classNames}
node={column}
slots={values.slots}
state={values.state}
/>
),
)}
</TableHeaderRow>
))}
<Spacer as="tr" tabIndex={-1} y={1} />
</TableRowGroup>
<VirtualizedTableBody
checkboxesProps={values.checkboxesProps}
classNames={values.classNames}
collection={values.collection}
color={values.color}
disableAnimation={values.disableAnimation}
isSelectable={values.isSelectable}
rowVirtualizer={rowVirtualizer}
selectionMode={values.selectionMode}
slots={values.slots}
state={values.state}
/>
</Component>
{bottomContentPlacement === "inside" && bottomContent}
</>
</div>
{bottomContentPlacement === "outside" && bottomContent}
</>
</Wrapper>
</div>
);
});
Expand Down
37 changes: 37 additions & 0 deletions packages/components/table/stories/table.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1155,3 +1155,40 @@ export const Virtualized = {
className: "max-w-3xl",
},
};

export const TenThousandRows = {
render: (args: TableProps) => {
const rows = generateRows(10000);
const columns = [
{key: "name", label: "Name"},
{key: "value", label: "Value"},
];

return (
<div>
<Table
aria-label="Example of virtualized table with a large dataset"
{...args}
isVirtualized
maxTableHeight={300}
rowHeight={40}
>
<TableHeader columns={columns}>
{(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
</TableHeader>
<TableBody items={rows}>
{(item) => (
<TableRow key={item.key}>
{(columnKey) => <TableCell>{item[columnKey]}</TableCell>}
</TableRow>
)}
</TableBody>
</Table>
</div>
);
},
args: {
...defaultProps,
className: "max-w-3xl",
},
};

0 comments on commit 3308771

Please sign in to comment.