@n3/react-fixedtable

@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