@n3/react-fixedtable

Table with fixed headers, columns and scrollbars for react applications

Stats

StarsIssuesVersionUpdatedCreatedSize
@n3/react-fixedtable
0.3.7a year ago4 years agoMinified + gzip package size for @n3/react-fixedtable in KB

Readme

@n3/react-fixedtable

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

Установка

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

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

Нужно обернуть компонент таблицы компонентом 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 для получения таблицы

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.