[UIK-5776][data-table] improved cells rerenders

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

@@ -115,7 +115,6 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       gridTemplateAreas,
       gridTemplateColumns,
       expandedRows,
-      columns,
       onExpandRow,
       loading,
       hasGroups,
@@ -128,7 +127,6 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       sideIndents,
       selectedRows,
       onSelectRow,
-      getFixedStyle,
       accordionDuration,
       accordionAnimationRows,
       getI18nText,
@@ -156,7 +154,6 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       uid,
       gridTemplateAreas,
       gridTemplateColumns,
-      columns,
       rowIndex: index,
       gridRowIndex,
       rows,
@@ -168,7 +165,6 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       inert: loading ? '' : undefined,
       scrollAreaRef,
       sideIndents: sideIndentsValue,
-      getFixedStyle,
       mergedRow: props.mergedRow,
       accordionDuration,
       accordionAnimationRows,
@@ -237,6 +233,7 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       rows,
       renderCellOverlay,
       selectedRows,
+      getFixedStyle,
     } = this.asProps;
 
     let rowsToRender = rows;
@@ -360,7 +357,7 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
 
     return sstyled(styles)(
       <SBody render={Box} __excludeProps={['data']} ref={this.bodyRef}>
-        {emptyRow && <Body.Row row={emptyRow} isNonInteractive />}
+        {emptyRow && <Body.Row row={emptyRow} isNonInteractive columns={columns} getFixedStyle={getFixedStyle} />}
         {needMarginTop && rowMarginTop && <Box h={rowMarginTop} />}
         {rowsToRender.map((row, index) => {
           if (Array.isArray(row)) {
@@ -376,6 +373,7 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
                 rowIndex={index}
                 handleRef={this.handleRef}
                 handleComponentRef={this.handleComponentRef}
+                getFixedStyle={getFixedStyle}
               />
             );
           }
@@ -386,6 +384,8 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
               row={row}
               ref={virtualScroll ? this.handleRef(this.startIndex + index, row) : undefined}
               componentRef={this.handleComponentRef(row)}
+              columns={columns}
+              getFixedStyle={getFixedStyle}
             />
           );
         })}

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

@@ -1,5 +1,4 @@
 import { Box, Flex } from '@semcore/base-components';
-import type { Intergalactic } from '@semcore/core';
 import { Root, sstyled, createComponent, Component } from '@semcore/core';
 import { getFocusableIn } from '@semcore/core/lib/utils/focus-lock/getFocusableIn';
 import { isFocusInside } from '@semcore/core/lib/utils/focus-lock/isFocusInside';
@@ -105,7 +104,7 @@ class CellRoot<Data extends DataTableData, UniqKeyType>
         gridArea={gridArea}
         fixed={column.fixed}
         style={style}
-        shadowVertical={column.showShadowVertical ? shadowVertical : undefined}
+        shadowVertical={shadowVertical}
       >
         <SCell
           ref={this.cellRef}

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

@@ -1,6 +1,7 @@
 import { Box, Collapse } from '@semcore/base-components';
 import { ButtonLink } from '@semcore/button';
 import { Component, Root, sstyled, createComponent } from '@semcore/core';
+import propsObserver from '@semcore/core/lib/decorators/propsObserver';
 import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
 import { isInteractiveElement } from '@semcore/core/lib/utils/isInteractiveElement';
 import ChevronRightM from '@semcore/icon/ChevronRight/m';
@@ -27,6 +28,7 @@ type DefaultProps = {
   'aria-level': undefined;
 };
 
+@propsObserver(['columns'])
 export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
   DataTableRowProps<Data, UniqKeyType>,
   [],
@@ -45,6 +47,7 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
   private cellName: string = '';
   private closeAccordionTimeout = 0;
   private openAccordionTimeout = 0;
+  private readonly cellStyle = new Map<string, React.CSSProperties>();
 
   rowElementRef = React.createRef<HTMLDivElement>();
 
@@ -58,6 +61,8 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
     super(props);
 
     this.handleClickRow = this.handleClickRow.bind(this);
+
+    this.recalculateCellStyle();
   }
 
   componentDidMount() {
@@ -77,6 +82,33 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
 
   componentWillUnmount() {
     this.asProps.componentRef?.(null);
+
+    this.cellStyle.clear();
+  }
+
+  onPropsChange(changedProps: Record<string, unknown>) {
+    if ('columns' in changedProps) {
+      this.recalculateCellStyle();
+    }
+  }
+
+  recalculateCellStyle() {
+    const { columns, getFixedStyle } = this.props;
+
+    columns.forEach((column) => {
+      if (column.fixed) {
+        const styles: React.CSSProperties = {};
+        this.cellStyle.set(column.name, styles);
+
+        const [name, value] = getFixedStyle(column);
+
+        if (name !== undefined && value !== undefined) {
+          styles[name] = value;
+        }
+      } else {
+        this.cellStyle.delete(column.name);
+      }
+    });
   }
 
   setAccordion() {
@@ -267,7 +299,6 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
       tableRef,
       onCellClick,
       rawData,
-      shadowVertical,
       flatRows,
       variant,
       isAccordionRow,
@@ -313,7 +344,6 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
       children: props?.children ?? defaultRender(),
       onClick: onCellClick,
       flatRows: this.asProps.flatRows,
-      shadowVertical,
       withoutBorder,
       theme,
     };
@@ -575,7 +605,8 @@ export class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<
                 accordionRowIndex={accordionRowIndex}
                 rows={rows}
                 aria-hidden={isCellHidden}
-                style={style}
+                style={this.cellStyle.get(column.name)}
+                shadowVertical={column.showShadowVertical ? shadowVertical : undefined}
                 data-aria-level={index === 0 ? ariaLevel : undefined}
               />
             );

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

@@ -48,6 +48,12 @@ export type DataTableRowProps<Data extends DataTableData, UniqKeyType> = {
   accordionIndex?: number;
 
   theme?: Theme;
+
+  columns: DTColumn[];
+
+  getFixedStyle: (
+    cell: Pick<DTColumn, 'name' | 'fixed'>,
+  ) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
 };
 
 export type RowPropsInner<Data extends DataTableData, UniqKeyType> = JSX.IntrinsicElements['div'] & {
@@ -57,7 +63,6 @@ export type RowPropsInner<Data extends DataTableData, UniqKeyType> = JSX.Intrins
    */
   mergedRow?: boolean;
 
-  columns: DTColumn[];
   row: DTRow<UniqKeyType> | DTRow<UniqKeyType>[];
   rows: DTRows<UniqKeyType>;
   flatRows: DTRow<UniqKeyType>[];
@@ -86,9 +91,6 @@ export type RowPropsInner<Data extends DataTableData, UniqKeyType> = JSX.Intrins
   scrollAreaRef: React.RefObject<HTMLDivElement>;
   uid: string;
   sideIndents?: 'wide';
-  getFixedStyle: (
-    cell: Pick<DTColumn, 'name' | 'fixed'>,
-  ) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
 
   renderCell?: (props: CellRenderProps<Data[number], UniqKeyType>) => React.ReactNode | Record<string, any>;
   getI18nText: (key: string) => string;

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

@@ -20,13 +20,13 @@ type RowGroupProps<Data extends DataTableData, UniqKeyType> = {
   rowIndex: number;
   handleRef: (index: number, row: DTRow<UniqKeyType>) => (node: HTMLElement | null) => void;
   handleComponentRef: (row: DTRow<UniqKeyType>) => (component: RowRoot<Data, UniqKeyType> | null) => void;
-
+  getFixedStyle: DataTableRowProps<Data, UniqKeyType>['getFixedStyle'];
 };
 
 export class RowGroup<Data extends DataTableData, UniqKeyType> extends React.PureComponent<RowGroupProps<Data, UniqKeyType>> {
   render() {
     const SRowGroup = Box;
-    const { rows, selectedRows, columns, startIndex, rowIndex } = this.props;
+    const { rows, selectedRows, columns, startIndex, rowIndex, getFixedStyle } = this.props;
 
     const groupUniqKey = rows[0][UNIQ_ROW_KEY];
 
@@ -50,6 +50,8 @@ export class RowGroup<Data extends DataTableData, UniqKeyType> extends React.Pur
             row: item,
             mergedRow: i > 0 ? true : false,
             componentRef: this.props.handleComponentRef(item),
+            columns,
+            getFixedStyle,
           };
 
           return (

semcore/data-table/src/components/Head/Column.tsx

@@ -17,7 +17,7 @@ import { handleFocusCell, handleKeydownFocusCell } from '../../enhancers/focusab
 import type { ROW_GROUP } from '../DataTable/DataTable';
 import type { DataTableData, SortDirection } from '../DataTable/DataTable.types';
 
-const SORTING_ICON: { [key in SortDirection]: React.FC<React.SVGProps<SVGSVGElement>> } = {
+const SORTING_ICON: { [key in SortDirection]: typeof SortAsc | typeof SortDesc } = {
   desc: SortDesc,
   asc: SortAsc,
 } as const;

stories/components/data-table/advanced/examples/checkbox_in_big_table_reactive/table.tsx

@@ -41,7 +41,6 @@ export const Table = (props: TableProps) => {
         aria-label='Table example with selectable rows'
         defaultGridTemplateColumnWidth='auto'
         selectedRows={props.selectedRows}
-        // onSelectedRowsChange={props.handleChangeSelectedRows}
         ref={props.tableRef}
         sideIndents={props.sideIndents}
         loading={props.loading}