diff --git a/.changeset/icy-horses-search.md b/.changeset/icy-horses-search.md new file mode 100644 index 000000000..5aa429250 --- /dev/null +++ b/.changeset/icy-horses-search.md @@ -0,0 +1,5 @@ +--- +'@drivenets/design-system': patch +--- + +Fix virtual table height by filling parent element height diff --git a/packages/design-system/src/components/ds-table/ds-table.module.scss b/packages/design-system/src/components/ds-table/ds-table.module.scss index 061bad683..0492a85af 100644 --- a/packages/design-system/src/components/ds-table/ds-table.module.scss +++ b/packages/design-system/src/components/ds-table/ds-table.module.scss @@ -20,6 +20,7 @@ $bulk-actions-reserved-space: 80px; background: var(--background); display: flex; flex-direction: column; + height: 100%; max-height: 100%; overflow: hidden; } @@ -122,11 +123,11 @@ $bulk-actions-reserved-space: 80px; .virtualizedContainer { position: relative; - height: vars.$virtualized-height; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: column; + flex: 1; @include scrollbars.scrollbar-on-hover; diff --git a/packages/design-system/src/components/ds-table/stories/ds-table-virtualized.stories.tsx b/packages/design-system/src/components/ds-table/stories/ds-table-virtualized.stories.tsx index 6d1c2eb3b..8a4da0e41 100644 --- a/packages/design-system/src/components/ds-table/stories/ds-table-virtualized.stories.tsx +++ b/packages/design-system/src/components/ds-table/stories/ds-table-virtualized.stories.tsx @@ -459,11 +459,7 @@ export const VirtualizedWithControls: Story = { render: function Render(args) { const [data] = useState(() => generatePersonData(0, VIRTUALIZED_ROW_COUNT, []).data); - return ( -
- -
- ); + return ; }, args: { controls: ( diff --git a/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss b/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss index a90f229ac..cd737b129 100644 --- a/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss +++ b/packages/design-system/src/components/ds-table/stories/ds-table.stories.module.scss @@ -167,7 +167,11 @@ } .virtualizedDemoContainer { + display: flex; + flex-direction: column; + gap: 1rem; position: relative; + height: 100%; } .virtualizedDemoHeader { @@ -201,6 +205,7 @@ .virtualizedTableWrapper { position: relative; + flex: 1; } .loadingOverlay { diff --git a/packages/design-system/src/components/ds-table/styles/_variables.scss b/packages/design-system/src/components/ds-table/styles/_variables.scss index 1877110ed..e97b364e7 100644 --- a/packages/design-system/src/components/ds-table/styles/_variables.scss +++ b/packages/design-system/src/components/ds-table/styles/_variables.scss @@ -1,7 +1,6 @@ $border-radius: 4px; $border-width: 1px; $group-border-width: 2px; -$virtualized-height: 600px; $reorder-column-width: 60px; $container-margin-vertical: 1rem; $filter-input-gap: 0.5rem;