update

src/ts/components/Table/components/Body.tsx

@@ -32,9 +32,11 @@ function Body({
     ?.formatter;
 
   rows?.forEach((row: any, rowIndex: number) => {
+    let marginLeft = 0;
     const rowConfig = (rowsConfig || {})[getRowId(row, rowIndex)];
     const cells = columns.map((column: IColumn, columnIndex: number) => {
       const key = `${column.title}_${columnIndex}`;
+      marginLeft += columns[columnIndex - 1]?.width || 0;
 
       if (column.template === ColumnTypesEnum.DETAILS) {
         return (
@@ -43,6 +45,7 @@ function Body({
             column={column}
             row={row}
             rowConfig={rowConfig}
+            marginLeft={marginLeft}
             updateRowsConfig={updateRowsConfig}
           />
         );
@@ -54,6 +57,7 @@ function Body({
           column={column}
           row={row}
           rowIndex={rowIndex}
+          marginLeft={marginLeft}
         />
       );
     });

src/ts/components/Table/components/Header.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { IColumn } from '../interfaces/Column';
+import getClassName from '../helpers/getClassName';
 import headerStyle from '../styles/header.module.scss';
 import style from '../styles/index.module.scss';
 
@@ -17,17 +18,19 @@ function Header({
   updateSort,
 }: ITitleProps) {
   const { t } = useTranslation();
+
+  let marginLeft = 0;
   const cells = columns.map((column: IColumn, columnIndex: number) => {
-    const columnClassName = typeof column.className === 'function'
-      ? column.className('header', columnIndex)
-      : column.className;
+    marginLeft += columns[columnIndex - 1]?.width || 0;
+    const localClassName = getClassName(style.table_header_cell, column, ['header', columnIndex], className);
+
     const formattedTitle = t(column.title || '');
 
     return (
       <div
         key={`${column.title}_${columnIndex}`}
-        className={`${style.table_header_cell} ${className} ${columnClassName || ''}`}
-        style={{ width: column.width }}
+        className={localClassName}
+        style={{ width: column.width, left: marginLeft }}
       >
         <span
           title={formattedTitle}

src/ts/components/Table/components/cells/CellDefault.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 
 import { IColumn } from '../../interfaces/Column';
+import getClassName from '../../helpers/getClassName';
 import style from '../../styles/index.module.scss';
 
 interface IDefaultCellProps {
   column: IColumn,
   row: any,
   rowIndex?: number,
+  marginLeft?: number,
   className?: string,
 }
 
@@ -14,11 +16,12 @@ function DefaultCell({
   column,
   row,
   rowIndex,
+  marginLeft,
   className,
 }: IDefaultCellProps): JSX.Element {
-  const columnClassName = typeof column.className === 'function'
-    ? column.className('body', row)
-    : column.className;
+  const localClassName = getClassName(style.table_cell, column, ['body', row], className);
+
+  const left = column.isFixed ? marginLeft : 0;
 
   const onClick = column.onClick
     ? (() => { if (column.onClick) column.onClick(row); })
@@ -44,8 +47,9 @@ function DefaultCell({
     <div
       key={column.title} // @ts-ignore
       title={cellTitle}
-      className={`${style.table_cell} ${className || ''} ${columnClassName || ''}`}
+      className={localClassName}
       style={{
+        left,
         width: column.width,
         cursor: onClick ? 'pointer' : 'auto',
       }} // @ts-ignore

src/ts/components/Table/components/cells/CellDetails.tsx

@@ -8,6 +8,7 @@ interface IDefaultCellProps {
   row: any,
   className?: string,
   rowConfig?: IRowsConfig;
+  marginLeft?: number;
   updateRowsConfig?: (config: IRowsConfig) => void;
 }
 
@@ -16,10 +17,13 @@ function DetailsCell({
   row,
   className,
   rowConfig,
+  marginLeft,
   updateRowsConfig,
 }: IDefaultCellProps): JSX.Element {
   const config = rowConfig || { id: 1 };
 
+  const left = column?.isFixed ? marginLeft : 0;
+
   const columnClassName = typeof column.className === 'function'
     ? column.className('body', row)
     : column.className;
@@ -48,6 +52,7 @@ function DetailsCell({
       style={{
         width: column.width,
         cursor: 'pointer',
+        left,
       }} // @ts-ignore
       onClick={onClick}
     >

src/ts/components/Table/helpers/getClassName.ts

@@ -0,0 +1,24 @@
+import { IColumn } from '../interfaces/Column';
+
+import style from '../styles/index.module.scss';
+
+export default function getClassName(defaultClassName: string, column: IColumn, args?: any, className?: string) {
+  const localClassName = [defaultClassName];
+
+  if (className) {
+    localClassName.push(className);
+  }
+
+  if (column.className) {
+    const columnClassName = typeof column.className === 'function'
+      ? column.className(...args)
+      : column.className;
+    localClassName.push(columnClassName);
+  }
+
+  if (column.isFixed) {
+    localClassName.push(style.table_fixed);
+  }
+
+  return localClassName.join(' ');
+}

src/ts/components/Table/styles/index.module.scss

@@ -64,6 +64,14 @@
     vertical-align: top;
   }
 
+  &_fixed {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 0.9);
+  }
+
   &_cell {
     padding: 0 4px;
   }
@@ -75,18 +83,17 @@
     line-height: var(--table-cell-height);
     background-color: var(--color-white);
   }
-
-  &_cell:first-child,
-  &_header_cell:first-child {
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-
-  &_cell:first-child {
-    background-color: rgba(255, 255, 255, 0.9);
-  }
+  //&_cell:first-child,
+  //&_header_cell:first-child {
+  //  position: sticky;
+  //  top: 0;
+  //  left: 0;
+  //  z-index: 1;
+  //}
+  //
+  //&_cell:first-child {
+  //  background-color: rgba(255, 255, 255, 0.9);
+  //}
 
   &_cell_number {
     text-align: right;