@true-engineering/true-react-common-ui-kit 3.5.0 → 3.7.0

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -10,65 +10,64 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { useMergedRefs, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { Skeleton } from '../Skeleton';
 import { ThemedPreloader } from '../ThemedPreloader';
-import { FlexibleTableRow } from './components';
+import { FlexibleTableRow, IFlexibleTableRowProps } from './components';
 import { hasHorizontalScrollBar } from './helpers';
-import { IFlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
+import {
+  ITableRow,
+  IFlexibleTableConfigType,
+  IInfinityScrollConfig,
+  IFlexibleTableRenderMode,
+} from './types';
 import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableProps<Values extends Record<string, any>>
-  extends ICommonProps<IFlexibleTableStyles> {
-  content: Values[];
-  headerContent?: Partial<Record<keyof Values, any>>;
-  enabledColumns?: Array<keyof Values>;
-  activeRows?: number[];
-  config: IFlexibleTableConfigType<Values>;
+export interface IFlexibleTableProps<Row extends ITableRow>
+  extends ICommonProps<IFlexibleTableStyles>,
+    Pick<
+      IFlexibleTableRowProps<Row>,
+      | 'uniqueField'
+      | 'activeRows'
+      | 'rowAttributes'
+      | 'isFirstColumnSticky'
+      | 'isExpandableRowComponentInitiallyOpen'
+      | 'expandableRowComponent'
+      | 'onRowClick'
+      | 'onRowHover'
+    > {
+  content: Row[];
+  /** @default 'table' */
+  renderMode?: IFlexibleTableRenderMode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  headerContent?: Partial<Record<keyof Row, any>>;
+  config: IFlexibleTableConfigType<Row>;
+  enabledColumns?: Array<keyof Row & string>;
   /** @default false */
-  isHorizontallyScrollable?: boolean;
+  isLoading?: boolean;
   /** @default false */
-  isFirstColumnSticky?: boolean;
+  isHorizontallyScrollable?: boolean;
   infinityScrollConfig?: IInfinityScrollConfig;
-  /** @default Индекс строки */
-  uniqueField?: keyof Values;
-  onHeadClick?: (column: keyof Values) => void;
-  /** @default false */
-  isLoading?: boolean;
-  // TODO: Заменить string на Generic Values[uniqueField]
-  onRowClick?: (id: string) => void;
-  onRowHover?: (id?: string) => void;
-  rowAttributes?: Array<keyof Values>;
+  onHeadClick?: (column: keyof Row) => void;
   refForScroll?: RefObject<HTMLDivElement>;
   nothingFoundContent?: ReactNode;
-  /** @default 'table' */
-  renderMode?: 'table' | 'divs';
-  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
 }
 
-export function FlexibleTable<Values extends Record<string, any>>({
-  data,
-  tweakStyles,
+export function FlexibleTable<Row extends ITableRow>({
   content,
   headerContent,
   config,
-  activeRows,
   enabledColumns,
+  isLoading = false,
   isHorizontallyScrollable = false,
-  isFirstColumnSticky = false,
   infinityScrollConfig,
-  uniqueField,
-  isLoading = false,
   renderMode = 'table',
-  onHeadClick,
-  onRowHover,
-  onRowClick,
   refForScroll,
-  rowAttributes,
   nothingFoundContent,
+  data,
   testId,
-  expandableRowComponent,
-}: IFlexibleTableProps<Values>): JSX.Element {
+  tweakStyles,
+  onHeadClick,
+  ...restProps
+}: IFlexibleTableProps<Row>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakTableRowStyles = useTweakStyles({
@@ -80,10 +79,19 @@ export function FlexibleTable<Values extends Record<string, any>>({
   const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  const showedColumns = useMemo(
-    () => enabledColumns ?? Object.keys(config),
-    [enabledColumns, config],
-  );
+  const columns = useMemo(() => enabledColumns ?? Object.keys(config), [enabledColumns, config]);
+
+  const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
+  const { uniqueField, isFirstColumnSticky = false } = restProps;
+
+  const tableRowProps: Omit<IFlexibleTableRowProps<Row>, 'item' | 'index'> = {
+    ...restProps,
+    renderMode,
+    config,
+    columns,
+    isLoading,
+    tweakStyles: tweakTableRowStyles,
+  };
 
   const getDataScrollAttributeSetter = useCallback(
     (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
@@ -97,14 +105,14 @@ export function FlexibleTable<Values extends Record<string, any>>({
   );
 
   // Когда таблица имеет скроллбар - добавляем аттрибут scrollable
-  const setHasScrollBarAttribute = useCallback(
-    getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
+  const setHasScrollBarAttribute = useMemo(
+    () => getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
     [getDataScrollAttributeSetter],
   );
 
   // Когда таблица проскроллена - добавляем аттрибут scrolled
-  const setIsScrolledAttribute = useCallback(
-    getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
+  const setIsScrolledAttribute = useMemo(
+    () => getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
     [getDataScrollAttributeSetter],
   );
 
@@ -122,31 +130,31 @@ export function FlexibleTable<Values extends Record<string, any>>({
   ]);
 
   const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement) => {
-      if (infinityScrollConfig) {
-        if (
-          infinityScrollConfig.isLoading ||
-          infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
-        ) {
-          return;
-        }
-
-        if (observer.current) {
-          observer.current.disconnect();
-        }
+    (node: HTMLDivElement | null) => {
+      if (
+        !hasInfiniteScroll ||
+        infinityScrollConfig.isLoading ||
+        infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
+      ) {
+        return;
+      }
 
-        observer.current = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting) {
-            infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
-          }
-        });
+      if (observer.current) {
+        observer.current.disconnect();
+      }
 
-        if (node) {
-          observer.current.observe(node);
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
         }
+      });
+
+      if (node) {
+        observer.current.observe(node);
       }
     },
     [
+      hasInfiniteScroll,
       infinityScrollConfig?.activePage,
       infinityScrollConfig?.totalPages,
       infinityScrollConfig?.onInfinityScroll,
@@ -174,7 +182,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
       scrollContainer.removeEventListener('scroll', scrollHandler);
       window.removeEventListener('resize', resizeHandler);
     };
-  }, [scrollRef, setIsScrolledAttribute, setHasScrollBarAttribute]);
+  }, [scrollRef, isHorizontallyScrollable, setIsScrolledAttribute, setHasScrollBarAttribute]);
 
   const Table = renderMode === 'divs' ? 'div' : 'table';
   const TableHead = renderMode === 'divs' ? 'div' : 'thead';
@@ -192,18 +200,13 @@ export function FlexibleTable<Values extends Record<string, any>>({
       >
         <TableHead className={classes.head}>
           <TableRow className={classes.headerRow}>
-            {showedColumns.map((key, i) => {
+            {columns.map((key, i) => {
               const itemConfig = config?.[key];
-
-              let titleContent = itemConfig?.title ?? '';
-
-              if (itemConfig?.titleComponent !== undefined) {
-                const TitleComponent = itemConfig?.titleComponent as ITitleComponent<any>;
-                titleContent = <TitleComponent value={headerContent?.[key]} />;
-              }
+              const TitleComponent = itemConfig?.titleComponent;
 
               return (
                 <TableHeader
+                  key={key}
                   className={clsx(classes.header, {
                     [classes.headerSticky]: isFirstColumnSticky && i === 0,
                     [classes.headerSecond]: isFirstColumnSticky && i === 1,
@@ -214,10 +217,13 @@ export function FlexibleTable<Values extends Record<string, any>>({
                     maxWidth: itemConfig?.maxWidth,
                     textAlign: itemConfig?.titleAlign ?? 'left',
                   }}
-                  key={key as string}
                   onClick={() => onHeadClick?.(key)}
                 >
-                  {titleContent}
+                  {isNotEmpty(TitleComponent) ? (
+                    <TitleComponent value={headerContent?.[key]} />
+                  ) : (
+                    itemConfig?.title ?? ''
+                  )}
                 </TableHeader>
               );
             })}
@@ -226,19 +232,13 @@ export function FlexibleTable<Values extends Record<string, any>>({
         <TableBody className={classes.body}>
           {isLoading ? (
             indexMap(6, (i) => (
-              <TableRow className={classes.skeletonRow} key={i}>
-                {showedColumns.map((_, j) => (
-                  <TableCell className={classes.skeleton} key={j}>
-                    <Skeleton />
-                  </TableCell>
-                ))}
-              </TableRow>
+              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
             ))
           ) : (
             <>
               {shouldShowNothingFound && (
                 <TableRow className={classes.nothingFoundRow}>
-                  <TableCell className={classes.nothingFound} colSpan={showedColumns.length}>
+                  <TableCell className={classes.nothingFound} colSpan={columns.length}>
                     {nothingFoundContent}
                   </TableCell>
                 </TableRow>
@@ -246,25 +246,16 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
               {content.map((item, i) => (
                 <FlexibleTableRow
-                  item={item}
-                  uniqueField={uniqueField}
-                  isActive={activeRows?.includes(i) ?? false}
-                  isFirstColumnSticky={isFirstColumnSticky}
-                  onRowClick={onRowClick}
-                  onRowHover={onRowHover}
-                  enabledColumns={enabledColumns}
-                  config={config}
+                  {...tableRowProps}
                   key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  rowAttributes={rowAttributes}
-                  renderMode={renderMode}
-                  tweakStyles={tweakTableRowStyles}
-                  expandableRowComponent={expandableRowComponent}
+                  item={item}
+                  index={i}
                 />
               ))}
 
-              {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
+              {hasInfiniteScroll && !infinityScrollConfig.isLastPage && (
                 <TableRow className={classes.loaderRow}>
-                  <TableCell className={classes.loaderCell} colSpan={showedColumns.length}>
+                  <TableCell className={classes.loaderCell} colSpan={columns.length}>
                     <div ref={initIntersectionObserver} className={classes.loader}>
                       <ThemedPreloader type="dots" />
                     </div>

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts

@@ -27,6 +27,12 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
   second: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },
+
+  loading: {},
+
+  skeleton: {
+    height: 21,
+  },
 });
 
 export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -1,52 +1,61 @@
-import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import type { ICommonProps } from '../../../../types';
+import { ICommonProps } from '../../../../types';
+import { Skeleton } from '../../../Skeleton';
 import { formatCellContent } from '../../helpers';
-import type { IFlexibleTableConfigType } from '../../types';
+import {
+  ITableRow,
+  IValueComponent,
+  IFlexibleTableConfigType,
+  IFlexibleTableRenderMode,
+} from '../../types';
 import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
-export interface IFlexibleTableCellProps<Values extends Record<string, any>>
-  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
-  item: Values;
-  columnName: keyof Values;
-  config: IFlexibleTableConfigType<Values>;
-  /** @default 'table' */
-  renderMode?: 'table' | 'divs';
-  isFocusedRow?: boolean;
+export interface IFlexibleTableCellProps<Row extends ITableRow>
+  extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
+    Pick<
+      Parameters<IValueComponent<Row, unknown>>[0],
+      | 'isFocusedRow'
+      | 'isNestedComponentExpanded'
+      | 'isRowNestedComponentExpanded'
+      | 'onSetNestedComponent'
+    > {
+  row: Row;
+  columnName: keyof Row;
+  config: IFlexibleTableConfigType<Row>;
+  renderMode: IFlexibleTableRenderMode;
   isSecond?: boolean;
   isSticky?: boolean;
-  isNestedComponentExpanded: boolean;
-  isRowNestedComponentExpanded: boolean;
-  onSetNestedComponent: (component?: ReactNode) => void;
+  isLoading?: boolean;
 }
 
-export function FlexibleTableCell<Values extends Record<string, any>>({
-  item,
+export function FlexibleTableCell<Row extends ITableRow>({
+  row,
   columnName,
   config,
-  renderMode = 'table',
-  isFocusedRow,
+  renderMode,
   isSecond,
   isSticky,
-  isNestedComponentExpanded,
-  isRowNestedComponentExpanded,
+  isLoading,
   tweakStyles,
-  onSetNestedComponent,
-}: IFlexibleTableCellProps<Values>): JSX.Element {
+  ...valueComponentProps
+}: IFlexibleTableCellProps<Row>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  const { component, cellAlign, position, right, left, cellVerticalAlign } =
+  const { component, left, right, position, cellAlign, cellVerticalAlign } =
     config[columnName] ?? {};
 
-  const value = item[columnName];
+  const value = row[columnName];
 
   const TableCell = renderMode === 'divs' ? 'div' : 'td';
 
   return (
     <TableCell
-      key={columnName as string}
-      className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
+      className={clsx(classes.root, {
+        [classes.sticky]: isSticky,
+        [classes.second]: isSecond,
+        [classes.loading]: isLoading,
+      })}
       style={{
         textAlign: cellAlign,
         position: isSticky ? 'sticky' : position,
@@ -55,19 +64,19 @@ export function FlexibleTableCell<Values extends Record<string, any>>({
         verticalAlign: cellVerticalAlign,
       }}
     >
-      {isNotEmpty(value) && (
-        <>
-          {isNotEmpty(component)
-            ? component({
-                value,
-                row: item,
-                isFocusedRow,
-                isNestedComponentExpanded,
-                isRowNestedComponentExpanded,
-                onSetNestedComponent,
-              })
-            : formatCellContent(value, config[columnName])}
-        </>
+      {isLoading ? (
+        <div className={classes.skeleton}>
+          <Skeleton />
+        </div>
+      ) : (
+        isNotEmpty(value) && (
+          <>
+            {/* TODO: Рендерить как настоящий компонент */}
+            {isNotEmpty(component)
+              ? component({ ...valueComponentProps, value, row })
+              : formatCellContent(value, config[columnName])}
+          </>
+        )
       )}
     </TableCell>
   );

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,45 +1,64 @@
-import { ReactNode, useState, memo } from 'react';
+import { ReactNode, useState, memo, MouseEvent } from 'react';
 import clsx from 'clsx';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import {
+  isEmpty,
+  isFunction,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
-import { IFlexibleTableConfigType, INestedComponent } from '../../types';
+import {
+  ITableRow,
+  IFlexibleTableConfigType,
+  IFlexibleTableRenderMode,
+  INestedComponent,
+} from '../../types';
 import { FlexibleTableCell } from '../FlexibleTableCell';
 import { useStyles, IFlexibleTableRowStyles } from './FlexibleTableRow.styles';
 
-// TODO: Заменить Record<string, any> на Record<string, unknown>
-export interface IFlexibleTableRowProps<Values extends Record<string, any>>
+export interface IFlexibleTableRowProps<Row extends ITableRow>
   extends Pick<ICommonProps<IFlexibleTableRowStyles>, 'tweakStyles'> {
-  item: Values;
-  uniqueField?: keyof Values;
+  item: Row;
+  index: number;
+  uniqueField?: keyof Row;
+  renderMode: IFlexibleTableRenderMode;
+  /** Индексы строк, на которые навешивается класс `active` */
+  activeRows?: number[];
+  /** @default false */
   isFirstColumnSticky?: boolean;
-  isActive: boolean;
-  config: IFlexibleTableConfigType<Values>;
-  enabledColumns?: Array<keyof Values>;
-  rowAttributes?: Array<keyof Values>;
-  /** @default 'table' */
-  renderMode?: 'table' | 'divs';
-  expandableRowComponent?: (item: Values, isOpen: boolean, close: () => void) => ReactNode;
+  /** @default false */
+  isLoading?: boolean;
+  config: IFlexibleTableConfigType<Row>;
+  columns: Array<keyof Row & string>;
+  rowAttributes?: Array<keyof Row>;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
+  expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
   // TODO: Заменить string на Generic Values[uniqueField]
   onRowHover?: (id?: string) => void;
   onRowClick?: (id: string) => void;
 }
 
-function FlexibleTableRowInner<Values extends Record<string, any>>({
+function FlexibleTableRowInner<Row extends ITableRow>({
   item,
+  index,
+  config,
+  columns,
   uniqueField,
+  renderMode,
+  activeRows,
   isFirstColumnSticky,
-  isActive,
-  config,
-  enabledColumns,
+  isLoading = false,
   rowAttributes,
-  renderMode = 'table',
+  isExpandableRowComponentInitiallyOpen = false,
   tweakStyles,
   expandableRowComponent,
   onRowHover,
   onRowClick,
-}: IFlexibleTableRowProps<Values>): JSX.Element {
+}: IFlexibleTableRowProps<Row>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakTableCellStyles = useTweakStyles({
@@ -49,24 +68,43 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
   });
 
   const [isFocused, setFocused] = useState(false);
-  const [nestedComponent, setNestedComponent] = useState<INestedComponent>({
-    isOpen: false,
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => {
+    const isOpen = isFunction(isExpandableRowComponentInitiallyOpen)
+      ? isExpandableRowComponentInitiallyOpen(item, index)
+      : isExpandableRowComponentInitiallyOpen;
+
+    const component = isOpen
+      ? expandableRowComponent?.(item, true, () => {
+          setNestedComponent({ isOpen: false });
+        })
+      : undefined;
+
+    return isReactNodeNotEmpty(component) ? { isOpen: true, component } : { isOpen: false };
   });
 
+  const isActive = activeRows?.includes(index) ?? false;
+  const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));
+  const isClickable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent));
+
+  const { isOpen: isNestedComponentExpanded, cellKey: nestedComponentCellKey } = nestedComponent;
+
   // уникальная разработка, позволяющая прокидывать data-атрибуты в <tr>
   // например: rowAttributes={['id']} => <tr data-id="x" />
-  const rowData = rowAttributes?.reduce((acc: IDataAttributes, cur) => {
-    const val = item[cur];
-    if (val !== undefined) {
-      acc[cur as string] = String(item[cur]);
+  const rowData = rowAttributes?.reduce<IDataAttributes>(
+    (acc, cur) => ({ ...acc, [cur]: item[cur] }),
+    {},
+  );
+
+  const handleMouseEnter = (event: MouseEvent) => {
+    if (isNotEmpty(uniqueField) && isNotEmpty(onRowHover)) {
+      event.stopPropagation();
+      onRowHover(item[uniqueField]);
+      setFocused(true);
     }
-    return acc;
-  }, {});
+  };
 
   const handleMouseLeave = () => {
-    if (onRowHover) {
-      onRowHover(undefined);
-    }
+    onRowHover?.(undefined);
     setFocused(false);
   };
 
@@ -81,28 +119,25 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
   };
 
   const handleRowClick = () => {
-    if (uniqueField !== undefined) {
+    if (isNotEmpty(uniqueField)) {
       onRowClick?.(item[uniqueField]);
     }
 
     if (isNotEmpty(expandableRowComponent)) {
       const newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
 
-      if (!nestedComponent.isOpen && newNestedComponent !== null) {
+      if (!isNestedComponentExpanded && newNestedComponent !== null) {
         updateNestedComponent(newNestedComponent);
         return;
       }
 
-      if (nestedComponent.isOpen && nestedComponent.cellKey === undefined) {
+      if (isNestedComponentExpanded && isEmpty(nestedComponentCellKey)) {
         closeNestedComponent();
         return;
       }
     }
   };
 
-  const items = enabledColumns ?? Object.keys(config);
-  const isEditable = isNotEmpty(onRowClick) || isNotEmpty(onRowHover);
-
   const TableRow = renderMode === 'divs' ? 'div' : 'tr';
   const TableCell = renderMode === 'divs' ? 'div' : 'td';
 
@@ -112,47 +147,44 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
         className={clsx(classes.root, {
           [classes.active]: isActive,
           [classes.editable]: isEditable,
-          [classes.clickable]: isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent),
+          [classes.clickable]: isClickable,
+        })}
+        {...(!isLoading && {
+          onClick: handleRowClick,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
         })}
-        onMouseEnter={(e) => {
-          if (uniqueField !== undefined && onRowHover !== undefined) {
-            e.stopPropagation();
-            onRowHover(item[uniqueField]);
-            setFocused(true);
-          }
-        }}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleRowClick}
         {...addDataAttributes({
           ...rowData,
           active: isActive ? true : undefined,
           editable: isEditable ? true : undefined,
-          isExpandableComponentActive: nestedComponent.isOpen ? true : undefined,
+          isExpandableComponentActive: isNestedComponentExpanded ? true : undefined,
         })}
       >
-        {items.map((key, i) => (
+        {columns.map((key, i) => (
           <FlexibleTableCell
-            columnName={key}
+            key={key}
             isSticky={isFirstColumnSticky && i === 0}
             isSecond={isFirstColumnSticky && i === 1}
-            key={key as string}
-            item={item}
+            isLoading={isLoading}
+            row={item}
             config={config}
+            columnName={key}
             tweakStyles={tweakTableCellStyles}
             renderMode={renderMode}
             isFocusedRow={isFocused}
-            isNestedComponentExpanded={nestedComponent.isOpen && nestedComponent.cellKey === key}
+            isNestedComponentExpanded={isNestedComponentExpanded && nestedComponentCellKey === key}
             isRowNestedComponentExpanded={
-              nestedComponent.isOpen && nestedComponent.cellKey === undefined
+              isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
             }
-            onSetNestedComponent={(component) => updateNestedComponent(component, key as string)}
+            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
           />
         ))}
       </TableRow>
 
-      {nestedComponent.isOpen && (
+      {isNestedComponentExpanded && (
         <TableRow className={classes.root}>
-          <TableCell className={classes.nestedComponent} colSpan={items.length}>
+          <TableCell className={classes.nestedComponent} colSpan={columns.length}>
             {nestedComponent.component}
           </TableCell>
         </TableRow>

package/src/components/FlexibleTable/helpers.ts

@@ -10,6 +10,4 @@ export const formatCellContent = <Values>(
   value: unknown,
   config?: IFlexibleTableConfigType<Values>[keyof Values],
 ): string =>
-  value instanceof Date
-    ? format(value as Date, config?.dateFormat ?? DEFAULT_DATE_FORMAT)
-    : String(value);
+  value instanceof Date ? format(value, config?.dateFormat ?? DEFAULT_DATE_FORMAT) : String(value);