@n3/react-fixedtable NPM

@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