nntc-ui 0.2.4 → 0.2.6

package/src/components/view/VirtualTable/VirtualTable.tsx

@@ -0,0 +1,1159 @@
+import { Header, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { Range, defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
+import classnames from 'classnames';
+import dayjs from 'dayjs';
+import {
+  Fragment,
+  JSX,
+  ReactNode,
+  PointerEvent as ReactPointerEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import { Button } from '@components/common/Button';
+import { Tooltip } from '@components/view/Tooltip';
+import { ChipSize } from '@models/ChipSize';
+import { UiProps } from '@models/UiProps';
+import { toFirstLetterUpperCase } from '@utils/index';
+
+import { defaultRowHeight } from './constants/defaultRowHeight';
+import { AdditionalButton } from './models/AdditionalButton';
+import { FilterBy } from './models/FilterBy';
+import { SortBy } from './models/SortBy';
+import { TableCell } from './models/TableCell';
+import { TableColumn } from './models/TableColumn';
+import { TableRow } from './models/TableRow';
+import { VirtualTableBorders } from './models/VirtualTableBorders';
+import { VirtualTableRef } from './models/VirtualTableRef';
+import { DefaultColumn } from './ui/DefaultColumn';
+import { HeaderDropdown } from './ui/HeaderDropdown';
+import { dedupeFirstByColumnValue } from './utils/dedupeFirstByColumnValue';
+import { getColumns } from './utils/getColumns';
+import { getNextHorizontalHeaders } from './utils/getNextHorizontalHeaders';
+import { getNextVerticalHeaders } from './utils/getNextVerticalHeaders';
+import { getPrevHorizontalHeaders } from './utils/getPrevHorizontalHeaders';
+import { getPrevVerticalHeaders } from './utils/getPrevVerticalHeaders';
+import { recursiveFilter } from './utils/recursiveFilter';
+import { recursiveSort } from './utils/recursiveSort';
+import { rowMatchesFilter } from './utils/rowMatchesFilter';
+import {
+  computeRowSelection,
+  getSelectedIndexesByRows,
+  isInteractiveSelectionTarget,
+  isScrollbarPointerEvent,
+} from './utils/rowSelection';
+import * as styles from './virtualTable.module.css';
+
+const rowSelectionDragThresholdPx = 4;
+const rowSelectionScrollEdgePx = 32;
+const rowSelectionScrollStepPx = 20;
+
+type Size = ChipSize;
+
+interface Props {
+  /** Строки таблицы */
+  rows: TableRow[];
+  /** Описание колонок (заголовки, сортировка, фильтрация, форматирование) */
+  columns: TableColumn[];
+  /** Кастомный рендер ячеек: view — режим просмотра, edit — режим редактирования */
+  additionalColumnsViews?: (
+    id: string,
+    value: string | number | undefined,
+    payload: { [key: string]: string } | undefined,
+  ) => {
+    edit:
+      | ((onChange: (changeValue?: string, withBlur?: boolean) => void, onBlur: () => void) => JSX.Element | null)
+      | null;
+    view: JSX.Element | null;
+  };
+  /** Колбэк при изменении значения редактируемой ячейки */
+  onChangeCell?: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => void;
+  /** Функция расчёта ширины колонки по индексу; по умолчанию — meta.width колонки или 200 px */
+  cellWidth?: (columnIndex: number) => number;
+  /** Кнопки действий в правой части каждой строки */
+  rowButtons?: ((original: TableRow) => AdditionalButton[]) | undefined;
+  /** Количество левых колонок, закреплённых при горизонтальной прокрутке */
+  fixedColumnsCount?: number;
+  /** Высота строк заголовка в пикселях (по одному значению на уровень вложенности) */
+  headerRowHeight?: number[];
+  /** Высота строки тела таблицы в пикселях */
+  bodyRowHeight?: number;
+  /** Ширина колонки с кнопками действий строки */
+  rowActionWidth?: number;
+  /** Автоматически измерять высоту строк по содержимому (для многострочного текста) */
+  dynamicRowHeight?: boolean;
+  /** Фиксированная высота контейнера таблицы в пикселях */
+  height?: number;
+  /** Прокрутить таблицу к последней строке при монтировании/обновлении */
+  scrollToBottom?: boolean;
+  /** Рендерить попапы фильтрации/сортировки внутри контейнера таблицы (важно для overflow и вкладок) */
+  useTableContainerAsRootForPopup?: boolean;
+  /** Размер компонента: small | medium | large */
+  componentSize?: Size;
+  /** Стиль границ ячеек: all | horizontal | vertical | none */
+  borders?: VirtualTableBorders;
+  /** Показывать в заголовке количество уникальных значений столбца */
+  showUniqueValuesCount?: boolean;
+  /** Начальные фильтры (управляемый режим — через onFiltersChange) */
+  globalFilters?: FilterBy[];
+  /** Начальные сортировки (управляемый режим — через onSortsChange) */
+  globalSorts?: SortBy[];
+  /** Колбэк при изменении активных фильтров пользователем */
+  onFiltersChange?: (filters: FilterBy[]) => void;
+  /** Колбэк при изменении активных сортировок (без внутренней сортировки по isNew) */
+  onSortsChange?: (sorts: SortBy[]) => void;
+  /** Дополнительный контент слева от заголовка колонки (например, кнопка синхронизации с картой) */
+  leftAdditionalHeaderContent?: (headerName: string) => ReactNode;
+  /** Дополнительный контент справа от заголовка колонки, перед кнопкой фильтрации */
+  rightAdditionalHeaderContent?: (headerName: string) => ReactNode;
+  /** Добавить закреплённую колонку с порядковыми номерами строк */
+  showRowsNumbers?: boolean;
+  /** Чередовать фон строк (zebra); по умолчанию true */
+  stripedRows?: boolean;
+  /** Включить выделение строк мышью (Ctrl — точечно, Shift — диапазон, drag — несколько подряд) */
+  enableSelectRows?: boolean;
+  /** Колбэк при изменении набора выделенных строк; передаются полные данные строк в порядке отображения */
+  onSelectRowsChange?: (rows: TableRow[]) => void;
+  /** Начальное выделение строк (те же объекты, что в rows; управляемый режим — через onSelectRowsChange) */
+  globalSelectedRows?: TableRow[];
+}
+
+interface SelectionDragState {
+  pointerId: number;
+  startIndex: number;
+  startX: number;
+  startY: number;
+  baseIndexes: Set<number>;
+  ctrl: boolean;
+  shift: boolean;
+  anchorIndex: number | null;
+  isDragCapable: boolean;
+  hasDragged: boolean;
+}
+
+export const VirtualTable = forwardRef<VirtualTableRef, UiProps<Props>>((props, ref) => {
+  const {
+    rows,
+    columns,
+    additionalColumnsViews,
+    onChangeCell,
+    cellWidth,
+    rowButtons,
+    fixedColumnsCount = 0,
+    headerRowHeight = [defaultRowHeight],
+    bodyRowHeight = defaultRowHeight,
+    rowActionWidth = 77,
+    classes,
+    dynamicRowHeight = false,
+    height,
+    scrollToBottom,
+    useTableContainerAsRootForPopup,
+    componentSize = 'small',
+    borders = 'horizontal',
+    showUniqueValuesCount = false,
+    globalFilters,
+    globalSorts,
+    onFiltersChange,
+    onSortsChange,
+    leftAdditionalHeaderContent,
+    rightAdditionalHeaderContent,
+    showRowsNumbers,
+    stripedRows = true,
+    enableSelectRows = false,
+    onSelectRowsChange,
+    globalSelectedRows,
+  } = props;
+
+  const fixedWithNumbersCount = fixedColumnsCount + (showRowsNumbers ? 1 : 0);
+
+  const [filterBy, setFilterBy] = useState<FilterBy[]>(globalFilters ?? []);
+  const [sortBy, setSortBy] = useState<SortBy[]>([...(globalSorts ?? []), { columnName: 'isNew', direction: 'desc' }]);
+  const [selectedIndexes, setSelectedIndexes] = useState<Set<number>>(() => new Set());
+
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const selectedIndexesRef = useRef(selectedIndexes);
+  const selectedRowsRef = useRef<TableRow[]>(enableSelectRows ? (globalSelectedRows ?? []) : []);
+  const processedRowsRef = useRef<TableRow[]>([]);
+  const lastSelectedIndexRef = useRef<number | null>(null);
+  const lastSelectedRowRef = useRef<TableRow | null>(null);
+  const selectionDragRef = useRef<SelectionDragState | null>(null);
+  const onSelectRowsChangeRef = useRef(onSelectRowsChange);
+  const enableSelectRowsRef = useRef(enableSelectRows);
+
+  selectedIndexesRef.current = selectedIndexes;
+  onSelectRowsChangeRef.current = onSelectRowsChange;
+  enableSelectRowsRef.current = enableSelectRows;
+
+  const rowNumberColumnId = useMemo(() => (showRowsNumbers ? `rowNumber_${uuidv4()}` : null), [showRowsNumbers]);
+
+  const memoizedColumns = useMemo(() => {
+    if (!rowNumberColumnId) {
+      return getColumns(columns);
+    }
+
+    const buildRowsNumbersColumn = (template?: TableColumn): TableColumn => ({
+      id: rowNumberColumnId,
+      ...(!template?.columns?.length ? { accessorKey: rowNumberColumnId } : undefined),
+      label: '#',
+      columns: template?.columns?.map((child) => buildRowsNumbersColumn(child)),
+    });
+
+    const nextColumns = [buildRowsNumbersColumn(columns[0]), ...columns];
+    const result = getColumns(nextColumns);
+
+    return result;
+  }, [columns, rowNumberColumnId]);
+
+  const processedRows = useMemo(() => {
+    const newRows = [...rows];
+    // При переключении объета может возникнуть случай, когда у
+    //  новых строк не будет ранее выбранных значений из фильтра
+    const nextFilterBy = filterBy.filter((filterByItem) => {
+      if (filterByItem.type === 'value' && filterByItem.uniqueFirstPerValue && filterByItem.values.length === 0) {
+        return true;
+      }
+
+      return rows.some((row) => rowMatchesFilter(row, filterByItem));
+    });
+    const filtered = nextFilterBy.length
+      ? recursiveFilter(newRows, nextFilterBy)
+      : filterBy.some(
+            (fb) =>
+              (fb.type === 'numberRange' && fb.values.some((v) => v !== Infinity && v !== -Infinity)) ||
+              (fb.type === 'dateRange' &&
+                fb.values.some((v) => !dayjs(v).isSame(dayjs(0)) && !dayjs(v).isSame(dayjs(Number.MAX_SAFE_INTEGER)))),
+          )
+        ? []
+        : newRows;
+    let sorted = sortBy.length ? recursiveSort(filtered, sortBy) : filtered;
+
+    for (const fb of nextFilterBy) {
+      if (fb.type === 'value' && fb.uniqueFirstPerValue) {
+        sorted = dedupeFirstByColumnValue(sorted, fb.columnName);
+      }
+    }
+
+    return sorted;
+  }, [rows, sortBy, filterBy]);
+
+  const memoizedData = useMemo(() => {
+    const result = rowNumberColumnId
+      ? processedRows.map((row, index) => ({
+          ...row,
+          [rowNumberColumnId]: {
+            value: index + 1,
+          },
+        }))
+      : processedRows;
+
+    window.dispatchEvent(
+      new CustomEvent('filteringRows', {
+        detail: result,
+      }),
+    );
+    return result;
+  }, [processedRows, rowNumberColumnId]);
+
+  processedRowsRef.current = processedRows;
+
+  const emitSelection = useCallback((indexes: Set<number>, anchorIndex: number | null) => {
+    const source = processedRowsRef.current;
+    const orderedIndexes = [...indexes].filter((index) => index >= 0 && index < source.length).sort((a, b) => a - b);
+    const nextIndexes = new Set(orderedIndexes);
+    const nextRows = orderedIndexes.map((index) => source[index]);
+    const previousIndexes = selectedIndexesRef.current;
+    const sameSelection =
+      nextIndexes.size === previousIndexes.size && orderedIndexes.every((index) => previousIndexes.has(index));
+
+    if (!sameSelection) {
+      setSelectedIndexes(nextIndexes);
+      selectedIndexesRef.current = nextIndexes;
+      selectedRowsRef.current = nextRows;
+      onSelectRowsChangeRef.current?.(nextRows);
+    }
+
+    if (anchorIndex !== null && source[anchorIndex]) {
+      lastSelectedIndexRef.current = anchorIndex;
+      lastSelectedRowRef.current = source[anchorIndex];
+    } else if (anchorIndex === null) {
+      lastSelectedIndexRef.current = null;
+      lastSelectedRowRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const lastSelectedRow = lastSelectedRowRef.current;
+    if (lastSelectedRow) {
+      const nextAnchorIndex = processedRows.indexOf(lastSelectedRow);
+      lastSelectedIndexRef.current = nextAnchorIndex === -1 ? null : nextAnchorIndex;
+      if (nextAnchorIndex === -1) {
+        lastSelectedRowRef.current = null;
+      }
+    }
+
+    if (selectedRowsRef.current.length === 0) {
+      if (selectedIndexesRef.current.size > 0) {
+        emitSelection(new Set(), lastSelectedIndexRef.current);
+      }
+      return;
+    }
+
+    const nextIndexes = getSelectedIndexesByRows(processedRows, selectedRowsRef.current);
+    const fallbackAnchor = nextIndexes.size > 0 ? Math.max(...nextIndexes) : null;
+
+    emitSelection(nextIndexes, lastSelectedIndexRef.current ?? fallbackAnchor);
+  }, [processedRows, emitSelection]);
+
+  useEffect(() => {
+    if (!enableSelectRows && selectedIndexesRef.current.size > 0) {
+      emitSelection(new Set(), null);
+    }
+  }, [enableSelectRows, emitSelection]);
+
+  const partialFiltered = useMemo(() => {
+    const newRows = [...rows];
+    return Array.from({ length: filterBy.length + 1 }, (_, i) => recursiveFilter(newRows, filterBy.slice(0, i)));
+  }, [rows, filterBy]);
+
+  const columnsEstimateSize = useMemo(
+    () =>
+      cellWidth ??
+      ((index: number) =>
+        rowNumberColumnId && index === 0
+          ? memoizedData.length.toString().length * 8 + 24
+          : (memoizedColumns[index]?.meta?.width ?? 200)),
+    [cellWidth, memoizedColumns, memoizedData, rowNumberColumnId],
+  );
+
+  const table = useReactTable({
+    data: memoizedData,
+    columns: memoizedColumns,
+    defaultColumn: DefaultColumn,
+    manualSorting: true,
+    enableColumnPinning: true,
+    getCoreRowModel: getCoreRowModel(),
+    initialState: {
+      columnPinning: {
+        left:
+          memoizedColumns
+            .filter((_, index) => index < fixedWithNumbersCount)
+            .map((mc) => mc.id)
+            .filter((id) => id)
+            .map((id) => id!) ?? [],
+      },
+    },
+    meta: {
+      updateData: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => {
+        onChangeCell?.(rowIndex, columnId, value, original);
+      },
+      tableContainerRef,
+      additionalColumnsViews,
+    },
+  });
+
+  const { rows: rowsFromTable } = table.getRowModel();
+  const headerGroups = table.getHeaderGroups();
+
+  const rowVirtualizer = useVirtualizer({
+    count: rowsFromTable.length,
+    getScrollElement: () => tableContainerRef?.current,
+    estimateSize: () => bodyRowHeight,
+    overscan: 5,
+  });
+
+  const columnVirtualizer = useVirtualizer({
+    horizontal: true,
+    count: headerGroups[0]?.headers.length ?? 1,
+    rangeExtractor: useCallback((range: Range) => {
+      const stickyIndexes = [...Array(fixedWithNumbersCount)].map((_, index) => index);
+      const next = new Set([...stickyIndexes, ...defaultRangeExtractor(range)]);
+      return [...next].sort((a, b) => a - b);
+    }, []),
+    getScrollElement: () => tableContainerRef?.current,
+    estimateSize: columnsEstimateSize,
+    overscan: 5,
+  });
+
+  const fixedColumnsWidth = useMemo(
+    () => [...Array(fixedWithNumbersCount)].reduce((sum: number, _, index) => sum + columnsEstimateSize(index), 0),
+    [fixedWithNumbersCount, columnsEstimateSize],
+  );
+
+  const headerGroupHeight = useMemo(() => {
+    const delta = headerGroups.length - headerRowHeight.length;
+    const result = [...headerRowHeight];
+    if (delta > 0) {
+      for (let i = 0; i < delta; i++) {
+        result.push(defaultRowHeight);
+      }
+    }
+
+    return result;
+  }, [headerRowHeight, headerGroups]);
+
+  const summaryHeaderHeight = useMemo(
+    () =>
+      headerGroupHeight.reduce(
+        (sum, current, currentIndex) => (currentIndex < headerGroups.length ? sum + current : sum),
+        0,
+      ),
+    [headerGroupHeight, headerGroups],
+  );
+
+  const headerGroupY = useCallback(
+    (headerIndex: number) =>
+      headerGroupHeight.reduce((sum, current, currentIndex) => (currentIndex < headerIndex ? sum + current : sum), 0),
+    [headerGroupHeight, headerGroups],
+  );
+
+  const rowsTotalSize = rowVirtualizer.getTotalSize();
+  const columnsTotalSize = columnVirtualizer.getTotalSize();
+
+  const resetFilters = () => {
+    setFilterBy([]);
+  };
+
+  const resetSorts = () => {
+    setSortBy([{ columnName: 'isNew', direction: 'desc' }]);
+  };
+
+  useImperativeHandle(ref, () => ({
+    resetFilters,
+    resetSorts,
+  }));
+
+  useEffect(() => {
+    if (tableContainerRef?.current) {
+      const container = tableContainerRef?.current;
+      const rightBorderElement = container.querySelector(`.${styles.rightBorder}`);
+      if (rightBorderElement) {
+        const containerWidth = container.clientWidth;
+        const tableWidth = columnsTotalSize + (!!rowButtons ? rowActionWidth : 0);
+        (rightBorderElement as HTMLElement).style.left =
+          `${containerWidth > tableWidth ? tableWidth : containerWidth}px`;
+      }
+    }
+  }, [tableContainerRef?.current?.clientWidth, columnsTotalSize, rowButtons, rowActionWidth]);
+
+  useEffect(() => {
+    if (tableContainerRef?.current) {
+      const container = tableContainerRef?.current;
+      const bottomBorderElement = container.querySelector(`.${styles.bottomBorder}`);
+      if (bottomBorderElement) {
+        const containerHeight = container.clientHeight;
+        const tableHeight = rowsTotalSize + summaryHeaderHeight;
+        (bottomBorderElement as HTMLElement).style.top =
+          `${containerHeight > tableHeight ? tableHeight : containerHeight}px`;
+      }
+    }
+  }, [tableContainerRef?.current?.clientHeight, rowsTotalSize]);
+
+  useEffect(() => {
+    const scrollListener = function (this: HTMLDivElement) {
+      const marginLeftChangingElements = this.querySelectorAll(`.${styles.marginLeftChanging}`);
+      marginLeftChangingElements?.forEach(
+        (element) => ((element as HTMLElement).style.marginLeft = `${this.scrollLeft}px`),
+      );
+    };
+
+    if (tableContainerRef?.current) {
+      tableContainerRef.current.addEventListener('scroll', scrollListener);
+      if (scrollToBottom) {
+        tableContainerRef.current.scrollTo(0, tableContainerRef.current.scrollHeight);
+      }
+    }
+
+    return () => {
+      if (tableContainerRef?.current) {
+        tableContainerRef.current.removeEventListener('scroll', scrollListener);
+      }
+    };
+  }, [tableContainerRef, scrollToBottom]);
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const lastVirtualColumnIndex = virtualColumns[virtualColumns.length - 1]?.index;
+  const virtualRowsSizeByIndex = useMemo(
+    () => new Map(virtualRows.map((item) => [item.index, item.size])),
+    [virtualRows],
+  );
+
+  const getRowSizeByIndex = useCallback(
+    (index: number) => virtualRowsSizeByIndex.get(index) ?? bodyRowHeight,
+    [bodyRowHeight, virtualRowsSizeByIndex],
+  );
+
+  const getRowspanHeight = useCallback(
+    (rowIndex: number, rowspan: number) => {
+      const clampedRowspan = Math.max(1, Math.floor(rowspan));
+      const lastRowIndex = Math.min(rowsFromTable.length - 1, rowIndex + clampedRowspan - 1);
+      const rowsInRange = lastRowIndex - rowIndex + 1;
+
+      let result = 0;
+
+      for (let index = rowIndex; index <= lastRowIndex; index += 1) {
+        result += getRowSizeByIndex(index);
+      }
+
+      const bordersCompensation = borders === 'all' || borders === 'horizontal' ? Math.max(0, rowsInRange - 1) : 0;
+
+      return Math.max(0, result - bordersCompensation);
+    },
+    [borders, getRowSizeByIndex, rowsFromTable.length],
+  );
+
+  const isCellCoveredByRowspan = useCallback(
+    (rowIndex: number, columnId: string) => {
+      for (let index = rowIndex - 1; index >= 0; index -= 1) {
+        const upperCell = rowsFromTable[index]?.original?.[columnId] as TableCell | undefined;
+        const upperRowspan = Math.max(1, upperCell?.rowspan ?? 1);
+
+        if (index + upperRowspan - 1 >= rowIndex) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+    [rowsFromTable],
+  );
+
+  const getRowIndexFromTarget = (target: EventTarget | null): number | null => {
+    if (!(target instanceof Element)) {
+      return null;
+    }
+
+    const rowElement = target.closest(`.${styles.tr}`);
+    if (!rowElement) {
+      return null;
+    }
+
+    const index = Number(rowElement.getAttribute('data-index'));
+    return Number.isFinite(index) ? index : null;
+  };
+
+  const getRowIndexFromClientY = useCallback(
+    (clientY: number): number | null => {
+      const container = tableContainerRef.current;
+      const rowsCount = processedRowsRef.current.length;
+      if (!container || rowsCount === 0) {
+        return null;
+      }
+
+      const rect = container.getBoundingClientRect();
+      const offset = clientY - rect.top + container.scrollTop - summaryHeaderHeight;
+
+      if (offset < 0) {
+        return 0;
+      }
+
+      const totalSize = rowVirtualizer.getTotalSize();
+      if (offset >= totalSize) {
+        return rowsCount - 1;
+      }
+
+      const measurements = rowVirtualizer.measurementsCache;
+      if (measurements.length > 0) {
+        let low = 0;
+        let high = measurements.length - 1;
+
+        while (low <= high) {
+          const mid = (low + high) >> 1;
+          const item = measurements[mid];
+
+          if (offset < item.start) {
+            high = mid - 1;
+          } else if (offset >= item.end) {
+            low = mid + 1;
+          } else {
+            return Math.min(rowsCount - 1, item.index);
+          }
+        }
+      }
+
+      if (!dynamicRowHeight) {
+        return Math.max(0, Math.min(rowsCount - 1, Math.floor(offset / bodyRowHeight)));
+      }
+
+      const virtualItems = rowVirtualizer.getVirtualItems();
+      if (virtualItems.length === 0) {
+        return 0;
+      }
+
+      if (offset < virtualItems[0].start) {
+        return virtualItems[0].index;
+      }
+
+      return virtualItems[virtualItems.length - 1].index;
+    },
+    [bodyRowHeight, dynamicRowHeight, rowVirtualizer, summaryHeaderHeight],
+  );
+
+  const scrollContainerWhileSelecting = (clientY: number) => {
+    const container = tableContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const rect = container.getBoundingClientRect();
+    const visibleY = clientY - rect.top;
+
+    if (visibleY < rowSelectionScrollEdgePx + summaryHeaderHeight) {
+      container.scrollTop -= rowSelectionScrollStepPx;
+    } else if (visibleY > rect.height - rowSelectionScrollEdgePx) {
+      container.scrollTop += rowSelectionScrollStepPx;
+    }
+  };
+
+  const applySelectionGesture = (currentIndex: number, isDrag: boolean) => {
+    const drag = selectionDragRef.current;
+    if (!drag) {
+      return;
+    }
+
+    const result = computeRowSelection({
+      startIndex: drag.startIndex,
+      currentIndex,
+      ctrl: drag.ctrl,
+      shift: drag.shift,
+      anchorIndex: drag.anchorIndex,
+      baseIndexes: drag.baseIndexes,
+      isDrag,
+    });
+
+    emitSelection(result.indexes, result.anchor);
+  };
+
+  const handleTablePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!enableSelectRowsRef.current || event.button !== 0) {
+      return;
+    }
+
+    const rowIndex = getRowIndexFromTarget(event.target);
+    if (rowIndex === null) {
+      if (
+        isInteractiveSelectionTarget(event.target) ||
+        isScrollbarPointerEvent(event) ||
+        (event.target instanceof Element && Boolean(event.target.closest(`.${styles.th}`)))
+      ) {
+        return;
+      }
+
+      if (selectedIndexesRef.current.size > 0) {
+        emitSelection(new Set(), null);
+      }
+
+      return;
+    }
+
+    if (isInteractiveSelectionTarget(event.target)) {
+      return;
+    }
+
+    const isCellActionTarget =
+      event.target instanceof Element && event.target.closest('[data-vt-cell-action]') !== null;
+    const isModifierClick = event.ctrlKey || event.metaKey || event.shiftKey;
+
+    if (isCellActionTarget && !isModifierClick) {
+      return;
+    }
+
+    const isDragCapable = event.pointerType === 'mouse' || event.pointerType === 'pen';
+
+    selectionDragRef.current = {
+      pointerId: event.pointerId,
+      startIndex: rowIndex,
+      startX: event.clientX,
+      startY: event.clientY,
+      baseIndexes: new Set(selectedIndexesRef.current),
+      ctrl: event.ctrlKey || event.metaKey,
+      shift: event.shiftKey,
+      anchorIndex: lastSelectedIndexRef.current,
+      isDragCapable: isDragCapable && !isCellActionTarget,
+      hasDragged: false,
+    };
+
+    if (isCellActionTarget) {
+      applySelectionGesture(rowIndex, false);
+      return;
+    }
+
+    if (isDragCapable) {
+      event.currentTarget.setPointerCapture(event.pointerId);
+      applySelectionGesture(rowIndex, false);
+    }
+  };
+
+  const handleTablePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = selectionDragRef.current;
+    if (!drag || !drag.isDragCapable || event.pointerId !== drag.pointerId) {
+      return;
+    }
+
+    const deltaX = event.clientX - drag.startX;
+    const deltaY = event.clientY - drag.startY;
+    const distanceSquared = deltaX * deltaX + deltaY * deltaY;
+    if (!drag.hasDragged && distanceSquared < rowSelectionDragThresholdPx * rowSelectionDragThresholdPx) {
+      return;
+    }
+
+    drag.hasDragged = true;
+    event.preventDefault();
+    scrollContainerWhileSelecting(event.clientY);
+
+    const currentIndex = getRowIndexFromClientY(event.clientY);
+    if (currentIndex === null) {
+      return;
+    }
+
+    applySelectionGesture(currentIndex, true);
+  };
+
+  const clearSelectionDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = selectionDragRef.current;
+    if (!drag || event.pointerId !== drag.pointerId) {
+      return;
+    }
+
+    if (!drag.isDragCapable && !drag.hasDragged) {
+      applySelectionGesture(drag.startIndex, false);
+    }
+
+    selectionDragRef.current = null;
+
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+
+  const getRowBackgroundColor = useCallback(
+    (row: TableRow, rowIndex: number) => {
+      if (row?.isNew?.value === 1 || selectedIndexes.has(rowIndex)) {
+        return 'var(--theme-table-selected-row)';
+      }
+
+      return rowIndex % 2 !== 0 ? 'var(--theme-table-even-row)' : 'var(--theme-table-background)';
+    },
+    [selectedIndexes],
+  );
+  const rowZIndexByIndex = useMemo(() => {
+    const rowsCount = rowsFromTable.length;
+    const result = new Map<number, number>();
+
+    rowsFromTable.forEach((row, rowIndex) => {
+      const maxRowspan = row
+        .getAllCells()
+        .reduce(
+          (maxSpan, cell) =>
+            Math.max(maxSpan, Math.max(1, (row.original?.[cell.column.id] as TableCell | undefined)?.rowspan ?? 1)),
+          1,
+        );
+
+      const spanWeight = maxRowspan - 1;
+      const zIndex = spanWeight * (rowsCount + 1) + (rowsCount - rowIndex + 1);
+
+      result.set(rowIndex, zIndex);
+    });
+
+    return result;
+  }, [rowsFromTable]);
+  const headerBaseZIndex = useMemo(
+    () => rowsFromTable.length * rowsFromTable.length + rowsFromTable.length + 10,
+    [rowsFromTable.length],
+  );
+
+  const renderHeaderNode = (header: Header<TableRow, unknown>) => {
+    const metaLabel = (header.column.columnDef.meta as { label?: string } | undefined)?.label;
+
+    if (typeof metaLabel === 'string') {
+      const headerLines = metaLabel.split(/\r\n|\\r\\n|\n|\\n/);
+
+      if (headerLines.length > 1) {
+        return (
+          <>
+            {headerLines.map((line, index) => (
+              <Fragment key={`${header.id}_${index}`}>
+                {line}
+                {index < headerLines.length - 1 && <br />}
+              </Fragment>
+            ))}
+          </>
+        );
+      }
+    }
+
+    return flexRender(header.column.columnDef.header, header.getContext());
+  };
+
+  const [before, after] =
+    virtualColumns.length > 0
+      ? [
+          fixedWithNumbersCount && virtualColumns[fixedWithNumbersCount].index !== fixedWithNumbersCount
+            ? virtualColumns[fixedWithNumbersCount].start - fixedColumnsWidth
+            : virtualColumns[0].start,
+          columnsTotalSize - virtualColumns[virtualColumns.length - 1].end,
+        ]
+      : [0, 0];
+
+  useEffect(() => {
+    onFiltersChange?.(filterBy);
+  }, [filterBy]);
+
+  useEffect(() => {
+    onSortsChange?.(sortBy.filter((sb) => sb.columnName !== 'isNew'));
+  }, [sortBy]);
+
+  return (
+    <div
+      className={classnames(
+        styles.root,
+        styles[componentSize as keyof typeof styles],
+        styles[`borders${toFirstLetterUpperCase(borders)}` as keyof typeof styles],
+        classes?.root,
+      )}
+      style={height ? { height } : undefined}
+    >
+      <div
+        ref={tableContainerRef}
+        className={classnames(styles.tableContainer, 'styledScroll', enableSelectRows && styles.selectRows)}
+        onPointerDown={enableSelectRows ? handleTablePointerDown : undefined}
+        onPointerMove={enableSelectRows ? handleTablePointerMove : undefined}
+        onPointerUp={enableSelectRows ? clearSelectionDrag : undefined}
+        onPointerCancel={enableSelectRows ? clearSelectionDrag : undefined}
+        onDragStart={enableSelectRows ? (event) => event.preventDefault() : undefined}
+      >
+        <div
+          className={styles.table}
+          style={{
+            height: `${rowsTotalSize + summaryHeaderHeight}px`,
+          }}
+        >
+          <div
+            style={{
+              position: 'sticky',
+              top: 0,
+              zIndex: headerBaseZIndex,
+            }}
+          >
+            {headerGroups.map((headerGroup, hgi) => {
+              const innerCell = (header: Header<TableRow, unknown>) => {
+                const headerMeta = header.column.columnDef.meta;
+                const headerResultName =
+                  (headerMeta as { sortAnotherName?: string } | undefined)?.sortAnotherName ??
+                  header.column.columnDef.id ??
+                  header.id;
+                const columnFilterIndex = filterBy.findIndex((fb) => fb.columnName === headerResultName);
+                const rowsForChecklist = columnFilterIndex === -1 ? memoizedData : partialFiltered[columnFilterIndex];
+
+                return (
+                  <div className={classnames(styles.thCell)}>
+                    {header.column.columnDef.id ===
+                      header.column.columnDef['accessorKey' as keyof typeof header.column.columnDef] &&
+                    header.column.columnDef.id !== rowNumberColumnId &&
+                    (headerMeta?.sortable ||
+                      headerMeta?.selectUnique ||
+                      headerMeta?.filtrationByValue ||
+                      headerMeta?.filtrationByDate ||
+                      headerMeta?.filtrationByNumber ||
+                      (headerMeta && showUniqueValuesCount)) ? (
+                      <HeaderDropdown
+                        headerMeta={headerMeta}
+                        sortBy={sortBy}
+                        setSortBy={setSortBy}
+                        filterBy={filterBy}
+                        setFilterBy={setFilterBy}
+                        rows={rowsForChecklist}
+                        rowsForUniqueCount={memoizedData}
+                        headerName={header.column.columnDef.id ?? header.id}
+                        containerRef={useTableContainerAsRootForPopup ? tableContainerRef : undefined}
+                        showUniqueValuesCount={showUniqueValuesCount}
+                        leftAdditionalContent={leftAdditionalHeaderContent}
+                        rightAdditionalContent={rightAdditionalHeaderContent}
+                        children={(afterNode) => (
+                          <div
+                            className={classnames(
+                              styles.label,
+                              !!headerMeta?.headerAlign
+                                ? styles[`align${headerMeta?.headerAlign}` as keyof typeof styles]
+                                : styles.alignLeft,
+                            )}
+                          >
+                            {renderHeaderNode(header)}
+                            {afterNode}
+                          </div>
+                        )}
+                      ></HeaderDropdown>
+                    ) : (
+                      <div
+                        className={classnames(
+                          styles.label,
+                          !!headerMeta?.headerAlign
+                            ? styles[`align${headerMeta?.headerAlign}` as keyof typeof styles]
+                            : styles.alignLeft,
+                        )}
+                      >
+                        {renderHeaderNode(header)}
+                      </div>
+                    )}
+                  </div>
+                );
+              };
+
+              return (
+                <Fragment key={headerGroup.id}>
+                  {[...Array(fixedWithNumbersCount)].map((_a, index) => {
+                    const header = headerGroup.headers[index];
+
+                    const nextHorizontalHeaders = getNextHorizontalHeaders(
+                      headerGroup.headers,
+                      index,
+                      lastVirtualColumnIndex,
+                    );
+                    const nextVerticalHeaders = getNextVerticalHeaders(headerGroups, hgi, index);
+
+                    return (
+                      <div
+                        key={`${headerGroup.id}-${header.id}`}
+                        className={classnames(
+                          styles.th,
+                          hgi === 0 ? styles.firstThRow : undefined,
+                          !nextVerticalHeaders.length &&
+                            index !== headerGroup.headers.length - 1 &&
+                            styles.thRightBorder,
+                          index === 0 && styles.thLeftBorder,
+                          nextVerticalHeaders.length && !nextHorizontalHeaders.length && styles.thHiddenColumn,
+                          styles.marginLeftChanging,
+                        )}
+                        style={{
+                          zIndex: headerBaseZIndex + 1,
+                          width: `${columnsEstimateSize(index)}px`,
+                          height: `${headerGroupHeight[hgi]}px`,
+                          transform:
+                            `translateX(` +
+                            `${Array.from({ length: index }, (_, i) => columnsEstimateSize(i)).reduce(
+                              (sum, w) => sum + w,
+                              0,
+                            )}px` +
+                            `) ` +
+                            `translateY(${headerGroupY(hgi)}px)`,
+                        }}
+                      >
+                        {innerCell(header)}
+                      </div>
+                    );
+                  })}
+
+                  {virtualColumns.map((column) => {
+                    if (column.index > fixedWithNumbersCount - 1) {
+                      const header = headerGroup.headers[column.index];
+                      const nextHorizontalHeaders = getNextHorizontalHeaders(
+                        headerGroup.headers,
+                        column.index,
+                        lastVirtualColumnIndex,
+                      );
+                      const prevHorizontalHeaders = getPrevHorizontalHeaders(headerGroup.headers, column.index);
+                      const nextVerticalHeaders = getNextVerticalHeaders(headerGroups, hgi, column.index);
+                      const prevVerticalHeaders = getPrevVerticalHeaders(headerGroups, hgi, column.index);
+
+                      const thWidth =
+                        !nextHorizontalHeaders.length && !prevHorizontalHeaders.length
+                          ? column.size
+                          : column.size +
+                            nextHorizontalHeaders.reduce(
+                              (sum, current) => sum + (current.column.columnDef.meta?.width ?? 0),
+                              0,
+                            );
+                      const zIndex =
+                        !nextHorizontalHeaders.length && !prevHorizontalHeaders.length
+                          ? undefined
+                          : headerBaseZIndex + nextHorizontalHeaders.length + 2;
+                      const thHeight = !prevVerticalHeaders.length
+                        ? headerGroupHeight[hgi]
+                        : headerGroupHeight[hgi] +
+                          prevVerticalHeaders.reduce(
+                            (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
+                            0,
+                          );
+                      const translateY = !prevVerticalHeaders.length
+                        ? headerGroupY(hgi)
+                        : headerGroupY(hgi) -
+                          prevVerticalHeaders.reduce(
+                            (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
+                            0,
+                          );
+
+                      return (
+                        <div
+                          key={`${headerGroup.id}-${header.id}`}
+                          className={classnames(
+                            styles.th,
+                            hgi === 0 && styles.firstThRow,
+                            !nextVerticalHeaders.length &&
+                              column.index !== headerGroup.headers.length - 1 &&
+                              styles.thRightBorder,
+                            column.index === 0 && styles.thLeftBorder,
+                            nextVerticalHeaders.length && !nextHorizontalHeaders.length && styles.thHiddenColumn,
+                          )}
+                          style={{
+                            width: `${thWidth}px`,
+                            zIndex,
+                            height: `${thHeight}px`,
+                            transform:
+                              `translateX(${column.start + (!!fixedWithNumbersCount ? -1 : 0)}px)` +
+                              ` translateY(${translateY}px)`,
+                            borderTop:
+                              borders !== 'none' && translateY === 0 ? '1px solid var(--border-color)' : undefined,
+                          }}
+                        >
+                          {innerCell(header)}
+                        </div>
+                      );
+                    }
+                    return null;
+                  })}
+
+                  {!!rowButtons && (
+                    <div
+                      className={classnames(styles.th, hgi === 0 ? styles.firstThRow : undefined)}
+                      style={{
+                        width: `${rowActionWidth}px`,
+                        height: `${headerGroupHeight[hgi]}px`,
+                        transform:
+                          `translateX(${columnsTotalSize + (!!fixedWithNumbersCount ? -2 : 0)}px)` +
+                          ` translateY(${headerGroupY(hgi)}px)`,
+                      }}
+                    ></div>
+                  )}
+                </Fragment>
+              );
+            })}
+          </div>
+
+          {virtualRows.map((virtualRow) => {
+            const row = rowsFromTable[virtualRow.index];
+
+            return (
+              <div
+                key={`row-${virtualRow.key}`}
+                data-index={virtualRow.index}
+                ref={dynamicRowHeight ? rowVirtualizer.measureElement : undefined}
+                className={classnames(
+                  styles.tr,
+                  stripedRows && virtualRow.index % 2 !== 0 && styles.evenRow,
+                  (row.original?.isNew?.value === 1 || selectedIndexes.has(virtualRow.index)) && styles.selected,
+                )}
+                style={{
+                  zIndex: rowZIndexByIndex.get(virtualRow.index) ?? 1,
+                  ...(!dynamicRowHeight && {
+                    height: virtualRow.size,
+                  }),
+                  transform:
+                    `translateY(` +
+                    `${summaryHeaderHeight + virtualRow.start - rowVirtualizer.options.scrollMargin}` +
+                    `px)`,
+                }}
+              >
+                <div style={{ width: `${before}px` }} />
+
+                {virtualColumns.map((virtualCol) => {
+                  const cell = row.getAllCells()[virtualCol.index];
+                  const isSticky = cell.column.getIsPinned() === 'left';
+                  const currentCell = row.original?.[cell.column.id] as TableCell | undefined;
+                  const rowspan = Math.max(1, currentCell?.rowspan ?? 1);
+                  const isCoveredByRowspan = isCellCoveredByRowspan(virtualRow.index, cell.column.id);
+                  const hasRowspan = rowspan > 1 && !isCoveredByRowspan;
+
+                  return (
+                    <div
+                      key={`cell-${virtualRow.key}-${virtualCol.key}`}
+                      data-col-index={virtualCol.index}
+                      className={classnames(styles.td, isSticky && styles.sticky)}
+                      style={{
+                        ...(isSticky && {
+                          left: virtualCol.start,
+                          marginLeft: virtualCol.index === 0 ? -1 : 0, // чтобы появился левый бордер
+                        }),
+                        width: `${virtualCol.size}px`,
+                        ...(!dynamicRowHeight &&
+                          !hasRowspan && {
+                            overflow: 'hidden',
+                          }),
+                      }}
+                      data-index={virtualRow.index}
+                    >
+                      {!isCoveredByRowspan &&
+                        (hasRowspan ? (
+                          <div
+                            className={styles.rowspanContent}
+                            style={{
+                              height: `${getRowspanHeight(virtualRow.index, rowspan)}px`,
+                              backgroundColor: getRowBackgroundColor(row.original, virtualRow.index),
+                            }}
+                          >
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </div>
+                        ) : (
+                          flexRender(cell.column.columnDef.cell, cell.getContext())
+                        ))}
+                    </div>
+                  );
+                })}
+
+                {!!rowButtons && (
+                  <div
+                    className={classnames(styles.td)}
+                    style={{
+                      width: `${rowActionWidth}px`,
+                      justifyContent: 'flex-start',
+                      padding: '4px',
+                      ...(!dynamicRowHeight && {
+                        overflow: 'hidden',
+                      }),
+                    }}
+                  >
+                    {rowButtons?.(row.original)?.map((ab) => (
+                      <Fragment key={ab.title}>
+                        {ab.template ? (
+                          ab.template(ab)
+                        ) : (
+                          <Tooltip
+                            label={ab.title}
+                            placement="top"
+                            wrapTrigger
+                            classes={{ trigger: styles.rowButtonTrigger }}
+                          >
+                            <Button
+                              onClick={() => ab.onClick?.(virtualRow.index, row.original)}
+                              componentSize="small"
+                              variant="text"
+                              icon={ab.icon}
+                            ></Button>
+                          </Tooltip>
+                        )}
+                      </Fragment>
+                    ))}
+                  </div>
+                )}
+
+                <div style={{ width: `${after}px` }} />
+              </div>
+            );
+          })}
+        </div>
+        {borders !== 'none' && (
+          <>
+            <div className={styles.rightBorder} style={{ height: `${rowsTotalSize + summaryHeaderHeight}px` }} />
+            <div className={styles.bottomBorder} style={{ width: `${columnsTotalSize}px` }} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+});