@n3/react-fixedtable

Таблица с фиксированными заголовками и колонками.

Установка

yarn add @n3/react-fixedtable
npm install @n3/react-fixedtable --save

Использование

Нужно обернуть компонент таблицы компонентом FixedTable. ref из render props должен указывать на dom-элемент таблицы.

import { FixedTable } from '@n3/react-fixedtable';

// ...

<FixedTable>
  {({
    ref,
  }) => (
    <table
      ref={ref}
    >
      ...
    </table>
  )}
</FixedTable>

Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание | |----------|----------------|-----|-----------------------|----------| | className | | string | '' | Класс корневого элемента | | stickyHeadClassName | | string | '' | Класс шапки в зафиксированном состоянии | | stickyFootClassName | | string | '' | Класс футера в зафиксированном состоянии | | children | + | func | | Функция рендера таблицы@param {Object} renderProps@param {React ref} renderProps.ref - ref таблицы@param {?Number} renderProps.leftCols - количество колонок таблицы, используется для оптимизации рендера таблицы с фиксированными колонками слева. Если рендерится основная таблица, принимает null | | top | | number | 0 | Отступ от верхнего края экрана до фиксированной шапки | | bottom | | number | 0 | Отсутп от нижнего края экрана до фиксированного футера | | fixedLeftCols | | number | 0 | Количество левых колонок для фиксации | | fixedLeftColsClassName | | string | '' | Класс обёртки блока фиксированных колонок | | fixedLeftColsStickyClassName | | string | '' | Класс обёртки блока фиксированных колонок в зафиксированном состоянии | | getScrollableWrapper | | func | () => document | Функция получения элемента, скролл которого отслеживается таблицей | | checkCanInit | | func | () => true | Функция проверки возможности инициализации. Если определена, инициализация не начнётся до того момента, пока не вернёт true | | checkCanInitInterval | | number | 5 | Интервал между вызовами checkCanInit в мс | | initDelay | | number | 0 | Задержка инициализации в мс | | horizontalScrollDelta | | number | 5 | Контрольное значение разницы ширины таблицы и ширины области в пикселях, начиная с которой появляется горизонтальный скролл | | scrollbarWidth | | number | 15 | Ширина скроллбара | | updateUniqs | | arrayOf [  any] | [] | Набор значений, при изменении хотя бы одного будет произведена перерисовка фиксированных элементов | | tableRef | | Ref | | ref для получения таблицы | | isNativeStickyPositioning | | boolean | false | Использовать нативное sticky-позиционирование через css |