diff --git a/CODEOWNERS b/CODEOWNERS index fd4ca3ea1d..6b38e9a92a 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -38,7 +38,7 @@ /src/components/Spin @SeqviriouM /src/components/Stories @DarkGenius /src/components/Switch @zamkovskaya -#/src/components/Table +/src/components/Table @Raubzeug /src/components/Tabs @sofiushko /src/components/Text @IsaevAlexandr /src/components/controls/TextArea @korvin89 diff --git a/src/components/Table/README.md b/src/components/Table/README.md index 191fb573fb..a2757b1878 100644 --- a/src/components/Table/README.md +++ b/src/components/Table/README.md @@ -47,8 +47,8 @@ Additional functionality is enabled via HOCs: | name | Column name (header) | `string` `(() => React.ReactNode)` | column ID | | placeholder | The stub when there is no data in a cell | `string` `((item: any, index: number) => React.ReactNode)` | `— (—)` | | template | Cell contents. If you skip a row, the cell contents will be the value of the field with the same name as this row. | `string` `((item: any, index: number) => React.ReactNode)` | The value of the field with the name equal to the column ID | -| align | Content alignment | `"left"` `"center"` `"right"` | | -| sticky | Sticky column | `"left"` `"right"` | | +| align | Content alignment | `"start"` `"center"` `"end"` | | +| sticky | Sticky column | `"start"` `"end"` | | | primary | Distinguishes a column among other | `boolean` | | | width | Column width in px | `number` | | | stickyHorizontalScroll | A horizontal sticky scroll in a table. NB: A table cannot have a fixed height and a sticky scroll at the same time. A sticky scroll will not work if the table has an overflow. | `boolean` | `false` | diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss index 567c6d0369..a2e5b70a46 100644 --- a/src/components/Table/Table.scss +++ b/src/components/Table/Table.scss @@ -74,18 +74,18 @@ text-align: center; } - &_align_right { + &_align_end { text-align: end; } - &_sticky_left, - &_sticky_right { + &_sticky_start, + &_sticky_end { position: sticky; z-index: 2; } - &_sticky_left, - &_sticky_right { + &_sticky_start, + &_sticky_end { background: var(--g-color-base-background); } @@ -133,8 +133,8 @@ background-color: var(--g-color-base-simple-hover-solid); cursor: pointer; - #{variables.$block}__cell_sticky_left, - #{variables.$block}__cell_sticky_right { + #{variables.$block}__cell_sticky_start, + #{variables.$block}__cell_sticky_end { background: var(--g-color-base-simple-hover-solid); } } diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index a462982e3e..60abbee193 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -19,6 +19,16 @@ export interface TableDataItem { type ActiveScrollElementType = 'scrollBar' | 'scrollContainer'; +function normalizeSides(side: TableColumnConfig['align'] | TableColumnConfig['sticky']) { + if (side === 'left') { + return 'start'; + } + if (side === 'right') { + return 'end'; + } + return side; +} + interface TableState { // activeScrollElement is required so listener on table scroll won't fire when scrollbar will appear (and vice-versa) // without that page will wobble on scrolling @@ -39,9 +49,9 @@ export interface TableColumnConfig { /** Cell contents. If you pass a row, the cell contents will be the value of the field named the same as this row. By default: The value of the field with the name equal to the column ID */ template?: string | ((item: I, index: number) => React.ReactNode); /** Content alignment. */ - align?: 'left' | 'center' | 'right'; + align?: 'start' | 'end' | 'center' | 'left' | 'right'; /** Sticky column. */ - sticky?: 'left' | 'right'; + sticky?: 'start' | 'end' | 'left' | 'right'; /** Distinguishes a column among other. */ primary?: boolean; /** Column width in px or in %. Width can behave unexpectedly (it's more like min-width in block-elements). Sometimes you want to use `table-layout: fixed` */ @@ -344,7 +354,9 @@ export class Table> extends Rea {columns.map((column, index) => { - const {id, align, primary, sticky, className} = column; + const {id, align: rawAlign, primary, sticky: rawSticky, className} = column; + const align = normalizeSides(rawAlign); + const sticky = normalizeSides(rawSticky); const content = Table.getHeadCellContent(column); return ( @@ -439,9 +451,10 @@ export class Table> extends Rea )} > {columns.map((column, colIndex) => { - const {id, align, primary, className, sticky} = column; + const {id, align: rawAlign, primary, className, sticky: rawSticky} = column; const content = Table.getBodyCellContent(column, item, rowIndex); - + const align = normalizeSides(rawAlign); + const sticky = normalizeSides(rawSticky); return ( > extends Rea } const filteredColumns = - column.sticky === 'left' ? columnsWidth.slice(0, index) : columnsWidth.slice(index + 1); - style[column.sticky] = filteredColumns.reduce((left, width) => { - return _isNumber(width) ? left + width : left; + column.sticky === 'left' || column.sticky === 'start' + ? columnsWidth.slice(0, index) + : columnsWidth.slice(index + 1); + const styleName: keyof React.CSSProperties = + column.sticky === 'left' || column.sticky === 'start' + ? 'insetInlineStart' + : 'insetInlineEnd'; + style[styleName] = filteredColumns.reduce((start, width) => { + return _isNumber(width) ? start + width : start; }, 0); return style; diff --git a/src/components/Table/__stories__/utils.tsx b/src/components/Table/__stories__/utils.tsx index 51c1ad1967..c9d14ecc00 100644 --- a/src/components/Table/__stories__/utils.tsx +++ b/src/components/Table/__stories__/utils.tsx @@ -66,7 +66,7 @@ export const columns: TableColumnConfig[] = [ { id: 'count', name: 'Count', - align: 'right', + align: 'end', }, { id: 'date', diff --git a/src/components/Table/__tests__/utils.ts b/src/components/Table/__tests__/utils.ts index b81b3ca3ef..588fdee34a 100644 --- a/src/components/Table/__tests__/utils.ts +++ b/src/components/Table/__tests__/utils.ts @@ -63,7 +63,7 @@ export const columns: TableColumnConfig[] = [ { id: 'count', name: 'Count', - align: 'right', + align: 'end', }, { id: 'date', diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx index 7e1f390594..2aa8a04b06 100644 --- a/src/components/Table/hoc/withTableActions/withTableActions.tsx +++ b/src/components/Table/hoc/withTableActions/withTableActions.tsx @@ -24,7 +24,7 @@ export function enhanceSystemColumn( const systemColumn = existedColumn || { id: actionsColumnId, name: '', - sticky: 'right', + sticky: 'end', width: 28, // button width placeholder: '', }; diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.scss b/src/components/Table/hoc/withTableSelection/withTableSelection.scss index 1d27b4a78b..61c1cc5a7a 100644 --- a/src/components/Table/hoc/withTableSelection/withTableSelection.scss +++ b/src/components/Table/hoc/withTableSelection/withTableSelection.scss @@ -16,8 +16,8 @@ &__row_selected { background: var(--g-color-base-selection); - #{variables.$block}__cell_sticky_left, - #{variables.$block}__cell_sticky_right { + #{variables.$block}__cell_sticky_start, + #{variables.$block}__cell_sticky_end { background: linear-gradient( to right, var(--g-color-base-selection), @@ -33,8 +33,8 @@ &#{variables.$block}__row_interactive:hover { background: var(--g-color-base-selection-hover); - #{variables.$block}__cell_sticky_left, - #{variables.$block}__cell_sticky_right { + #{variables.$block}__cell_sticky_start, + #{variables.$block}__cell_sticky_end { background: linear-gradient( to right, var(--g-color-base-selection-hover), diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx index a8dac459cd..6b176a094b 100644 --- a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx +++ b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx @@ -163,7 +163,7 @@ export function withTableSelection( name: this.renderHeadCell, template: this.renderBodyCell, className: b('checkbox_cell'), - sticky: _get(columns, [0, 'sticky']) === 'left' ? 'left' : undefined, + sticky: _get(columns, [0, 'sticky']) === 'start' ? 'start' : undefined, }; return [selectionColumn, ...columns]; diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss index 46f903355d..d962bd6a04 100644 --- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss +++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.scss @@ -52,7 +52,7 @@ $block: '.#{variables.$ns}table-column-setup'; &__item { // Increasing specificity for overrides &#{&} { - padding: 0 8px 0 32px; + padding-inline: 32px 8px; cursor: pointer; position: relative; diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx index 994fd13b09..51186974ca 100644 --- a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx +++ b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx @@ -143,7 +143,7 @@ export function withTableSorting( , ]; - if (column.align === 'right') { + if (column.align === 'right' || column.align === 'end') { content.reverse(); }