diff --git a/src/ts/components/Table/components/Body.tsx b/src/ts/components/Table/components/Body.tsx index aa8a1ea..2951469 100644 --- a/src/ts/components/Table/components/Body.tsx +++ b/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} /> ); }); diff --git a/src/ts/components/Table/components/Header.tsx b/src/ts/components/Table/components/Header.tsx index 3edbed6..eb1347c 100644 --- a/src/ts/components/Table/components/Header.tsx +++ b/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 (