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 (
{ if (column.onClick) column.onClick(row); }) @@ -44,8 +47,9 @@ function DefaultCell({
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} > diff --git a/src/ts/components/Table/helpers/getClassName.ts b/src/ts/components/Table/helpers/getClassName.ts new file mode 100644 index 0000000..3f1c24f --- /dev/null +++ b/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(' '); +} diff --git a/src/ts/components/Table/styles/index.module.scss b/src/ts/components/Table/styles/index.module.scss index 5f2c62a..8133f44 100644 --- a/src/ts/components/Table/styles/index.module.scss +++ b/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;