diff --git a/src/components/Table/helpers.ts b/src/components/Table/helpers.ts index 310c432..e0c0605 100644 --- a/src/components/Table/helpers.ts +++ b/src/components/Table/helpers.ts @@ -178,7 +178,6 @@ const transformPinnedColumns = (columns: TableColumn[]) => { const pinnedLeftColumns: TableColumnWidthKey[] = []; const pinnedRightColumns: TableColumnWidthKey[] = []; const otherColumns: TableColumnWidthKey[] = []; - const notPinnedColumns: TableColumnWidthKey[] = []; mapColumns>(columns, (item, index) => { if (!item.columns?.length && item.pinned === 'left') { @@ -189,25 +188,20 @@ const transformPinnedColumns = (columns: TableColumn[]) => { pushByIndex(index, columns, pinnedRightColumns, 'right'); return; } - if (item.columns?.length || item.isSeparator || item.accessor) { + if (!item.columns?.length) { pushByIndex(index, columns, otherColumns); } }); - - mapColumns>(otherColumns, (item) => { - if (item.columns?.length || item.isSeparator || item.accessor) { - pushByKey(item, notPinnedColumns); - } - }); - - return [...pinnedLeftColumns, ...notPinnedColumns, ...pinnedRightColumns]; + return [...pinnedLeftColumns, ...otherColumns, ...pinnedRightColumns]; }; export const transformColumns = ( columns: TableColumn[], maxLevel: number, ): Array>[] => { - const stack = [{ columns, index: 0 }]; + const stack = [ + { columns, index: 0, parentIsFirst: true, parentIsLastPinnedLeft: false }, + ]; const headersArr: Array>[] = []; let col = 0; @@ -215,7 +209,6 @@ export const transformColumns = ( const level = stack.length - 1; const node = stack[level]; const item = node.columns[node.index] as Header; - if (item) { if (!headersArr[level]) headersArr[level] = []; const topHeaderGridIndex = stack[0].index; @@ -223,7 +216,18 @@ export const transformColumns = ( const gridIndex = prevItem ? prevItem.position.gridIndex + (prevItem.position.colSpan || 1) : 0; + const mainId = level === 0 ? col++ : (item.colId ?? 0); + const isFirst = gridIndex === 0 && node.parentIsFirst; + let isLastPinnedLeft = false; + if (level === 0) { + const nextItem = node.columns[node.index + 1]; + isLastPinnedLeft = + item.pinned === 'left' && nextItem && nextItem.pinned !== 'left'; + } else { + const isLastChild = node.index === node.columns.length - 1; + isLastPinnedLeft = node.parentIsLastPinnedLeft && isLastChild; + } const handledItem: Header & { position: Position; @@ -235,6 +239,8 @@ export const transformColumns = ( topHeaderGridIndex, gridIndex, level, + isFirst, + isLastPinnedLeft, }, }; @@ -259,6 +265,8 @@ export const transformColumns = ( parentId: mainId, })), index: 0, + parentIsFirst: isFirst, + parentIsLastPinnedLeft: isLastPinnedLeft, }); } } else { @@ -287,19 +295,6 @@ export const getMaxLevel = (columns: TableColumn[]) => { return count; }; -const getIsFirst = (columns: Header[], column: Header): boolean => { - // TODO: нужно проверить с renderCell - const { colId, parentId, position, accessor } = column; - if (position.level === 0) { - return colId === 0; - } - const parent = columns.find((el) => el.colId === parentId); - return !!( - parent?.columns?.[0]?.accessor === accessor && - (parent ? getIsFirst(columns, parent) : false) - ); -}; - export type HeaderData = { headersAtom: AtomMut[][]>; flattenedHeadersAtom: AtomMut[]>; @@ -415,14 +410,14 @@ export const useHeaderData = ( const flattenedHeadersAtom = useCreateAtom((ctx) => { const headers = ctx.spy(headersAtom); - return headers.flat().map((column, index, array) => ({ + const res = headers.flat().map((column, index, array) => ({ ...column, position: { ...column.position, - isFirst: getIsFirst(array, column), width: column.width || 'auto', }, })) as Header[]; + return res; }); const flattenedHeadersLengthAtom = useCreateAtom( @@ -539,15 +534,13 @@ export const useHeaderData = ( ); const lowIndex = lowHeaders.findIndex((col) => col.key === prevLowKey); - return [ !flattenedHeadersColumn.position.isFirst && !( flattenedHeadersColumn.pinned !== 'left' && lowHeaders[lowIndex - 1]?.pinned === 'left' ), - flattenedHeadersColumn.pinned === 'left' && - flattenedHeaders[index + 1]?.pinned !== 'left', + flattenedHeadersColumn.position.isLastPinnedLeft, flattenedHeadersColumn.position.level !== 0, ]; }) as [boolean, boolean, boolean][]; diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts index 5b82bc2..d7523c3 100644 --- a/src/components/Table/types.ts +++ b/src/components/Table/types.ts @@ -62,6 +62,7 @@ export type Position = { level: number; gridIndex: number; isFirst?: boolean; + isLastPinnedLeft?: boolean; topHeaderGridIndex: number; smallTextSize?: boolean; height?: number;