[data-table] fixed animations in accordions

Author: ilyabrower

semcore/data-table/CHANGELOG.md

@@ -8,6 +8,7 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 - Render grouped header in some cases.
 - Styles for cells in accordion in different variants.
+- Laggy animation in accordions.
 
 ## [16.3.0] - 2025-09-12
 

semcore/data-table/src/components/Body/Cell.tsx

@@ -1,4 +1,4 @@
-import { Box, Collapse, Flex } from '@semcore/base-components';
+import { Box, Flex } from '@semcore/base-components';
 import { Component, Root, sstyled, createComponent } from '@semcore/core';
 import { getFocusableIn } from '@semcore/core/lib/utils/focus-lock/getFocusableIn';
 import { isFocusInside } from '@semcore/core/lib/utils/focus-lock/isFocusInside';
@@ -136,6 +136,7 @@ class CellRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       animationExpand,
       style,
       shadowVertical,
+      calculatedHeight,
     } = this.asProps;
 
     const cell = row[column.name];
@@ -161,13 +162,11 @@ class CellRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
 
     return sstyled(styles)(
       <SCellWrapper
+        // @ts-ignore
         gridArea={gridArea}
-        tag={isAccordionRow ? Collapse : undefined}
-        visible={animationExpand}
-        duration={duration}
-        delay={delay}
-        defaultHeight='100%'
-        timingFunction='linear'
+        duration={`${duration}ms`}
+        delay={`${delay}ms`}
+        h={isAccordionRow ? (animationExpand ? `${calculatedHeight}px` : `0px`) : undefined}
         style={style}
         fixed={column.fixed}
         shadowVertical={column.showShadowVertical ? shadowVertical : undefined}

semcore/data-table/src/components/Body/Cell.types.ts

@@ -39,6 +39,7 @@ export type CellPropsInner<Data extends DataTableData, UniqKeyType> = {
   lastLeftFixedIndex: number;
   firstRightFixedIndex: number;
   withoutBorder?: boolean;
+  calculatedHeight: number;
 };
 
 export type DataTableCellType = (<UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(

semcore/data-table/src/components/Body/Row.tsx

@@ -7,7 +7,6 @@ import { isInteractiveElement } from '@semcore/core/lib/utils/isInteractiveEleme
 import ChevronRightM from '@semcore/icon/ChevronRight/m';
 import * as React from 'react';
 
-import { INDEX_OFFSET } from './Body';
 import { Cell } from './Cell';
 import type { DataTableCellProps, DataTableCellType } from './Cell.types';
 import { MergedColumnsCell, MergedRowsCell } from './MergedCells';
@@ -18,6 +17,7 @@ import type { DataTableData, DTValue } from '../DataTable/DataTable.types';
 
 type State = {
   expandedForAnimation: boolean;
+  calculatedHeight: number;
 };
 
 export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTableRowProps<Data, UniqKeyType>, {}, State, [], RowPropsInner<Data, UniqKeyType>> {
@@ -35,6 +35,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
 
   state: State = {
     expandedForAnimation: false,
+    calculatedHeight: 0,
   };
 
   constructor(props: DataTableRowProps<Data, UniqKeyType>) {
@@ -47,6 +48,16 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
     this.asProps.componentRef?.(this);
   }
 
+  componentDidUpdate(prevProps: DataTableRowProps<Data, UniqKeyType>, prevState: State) {
+    const { animationExpand } = this.asProps;
+
+    if (animationExpand && this.rowElementRef.current && prevState.calculatedHeight === 0) {
+      const height = this.calculateRowHeight(this.rowElementRef.current);
+
+      this.setState({ calculatedHeight: height });
+    }
+  }
+
   componentWillUnmount() {
     this.asProps.componentRef?.(null);
   }
@@ -221,6 +232,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
       flatRows: this.asProps.flatRows,
       shadowVertical,
       withoutBorder,
+      calculatedHeight: this.state.calculatedHeight,
     };
 
     if (renderCell) {
@@ -531,6 +543,40 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
       obj === null
     );
   }
+
+  private calculateRowHeight(rowElement: HTMLElement): number {
+    const accordionFull = rowElement.cloneNode(true);
+
+    if (!(accordionFull instanceof HTMLElement)) {
+      return 0;
+    }
+
+    const columnsWidth: number[] = [];
+
+    const columns = Array.from(rowElement.children);
+    columns.forEach((column) => {
+      columnsWidth.push(column.getBoundingClientRect().width);
+    });
+
+    accordionFull.style.display = 'grid';
+    accordionFull.style.position = 'absolute';
+    accordionFull.style.visibility = 'hidden';
+    accordionFull.style.gridTemplateColumns = columnsWidth.join('px ') + 'px';
+
+    Array.from(accordionFull.children).forEach((child) => {
+      if (child instanceof HTMLElement) {
+        child.style.height = '100%';
+      }
+    });
+
+    document.body.appendChild(accordionFull);
+
+    const height = accordionFull.getBoundingClientRect().height;
+
+    document.body.removeChild(accordionFull);
+
+    return height;
+  }
 }
 
 export const Row = createComponent(RowRoot, {

semcore/data-table/src/components/Body/style.shadow.css

@@ -295,6 +295,14 @@ SRow[sideIndents='wide'] {
   }
 }
 
+SRow[isAccordionRow] > SCellWrapper {
+  transition-property: height;
+  transition-delay: var(--delay);
+  transition-duration: var(--duration);
+  transition-timing-function: linear;
+  overflow: clip;
+}
+
 SCellWrapper[fixed][shadowVertical] {
   &:after {
     content: '';