Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement
Sign In

@n3/react-fixedtable

Package Overview
Dependencies
Maintainers
5
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@n3/react-fixedtable

Table with fixed headers, columns and scrollbars for react applications

npmnpm
Version
0.3.8
Version published
Weekly downloads
122
-32.97%
Maintainers
5
Weekly downloads
 
Created
Source

@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

НазваниеОбязательностьТипЗначение по умолчаниюОписание
classNamestring''Класс корневого элемента
stickyHeadClassNamestring''Класс шапки в зафиксированном состоянии
stickyFootClassNamestring''Класс футера в зафиксированном состоянии
children+funcФункция рендера таблицы
@param {Object} renderProps
@param {React ref} renderProps.ref - ref таблицы
@param {?Number} renderProps.leftCols - количество колонок таблицы, используется для оптимизации рендера таблицы с фиксированными колонками слева. Если рендерится основная таблица, принимает null
topnumber0Отступ от верхнего края экрана до фиксированной шапки
bottomnumber0Отсутп от нижнего края экрана до фиксированного футера
fixedLeftColsnumber0Количество левых колонок для фиксации
fixedLeftColsClassNamestring''Класс обёртки блока фиксированных колонок
fixedLeftColsStickyClassNamestring''Класс обёртки блока фиксированных колонок в зафиксированном состоянии
getScrollableWrapperfunc() => documentФункция получения элемента, скролл которого отслеживается таблицей
checkCanInitfunc() => trueФункция проверки возможности инициализации. Если определена, инициализация не начнётся до того момента, пока не вернёт true
checkCanInitIntervalnumber5Интервал между вызовами checkCanInit в мс
initDelaynumber0Задержка инициализации в мс
horizontalScrollDeltanumber5Контрольное значение разницы ширины таблицы и ширины области в пикселях, начиная с которой появляется горизонтальный скролл
scrollbarWidthnumber15Ширина скроллбара
updateUniqsarrayOf [
  any
]
[]Набор значений, при изменении хотя бы одного будет произведена перерисовка фиксированных элементов
tableRefRefref для получения таблицы

Keywords

react

FAQs

Package last updated on 18 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts