react keyview

React-Keyview

---

Установка

---

через NPM

 npm i react-keyview

через пряжу

 yarn add react-keyview

через CDN (UNPKG)

 https://unpkg.com/react-keyview@latest

Библиотека UMD выставлена как ReactKeyView

 const KV = ReactKV ;

Примечание. Этот пакет не предоставляет никаких ресурсов стиля, компоненты очень настраимы. Он также поддерживает рендеринг на стороне сервера

Демо

• Список
• Стол
• Сетка

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

Вы можете импортировать любой компонент, который вы хотите в качестве названного экспорта из «React-Keyview», например.

 import { Grid , Table } from "react-keyview" ;

Или вы можете напрямую импортировать только те компоненты, которые вам нужны, так же.

 import Grid from "react-keyview/build/Grid" ;
import Table from "react-keyview/build/Table" ;

Модули UMD имеют префикс ReactKV, например.

 const Grid = ReactKVGrid ;
const List = ReactKVList ; 

Список

---

 function renderRow ( rowIndex , currentIndex ) {
  return < div > { rowIndex } </ div > ;
}

< List renderRow = { this . renderRow } count = { YOUR_DATA . length } visibleCount = { 5 } rowHeight = { 50 } /> ;

Проп	Тип	Описание
reenderrow	Функция	Рендешат один ряд
считать	Число	Количество элементов
Роуйт	Число	Высота строки
visiblecount	Число	Видимые элементы считаются
дом	Объект	Передайте атрибуты элементу HTML

Стол

---

 function renderHeader ( item ) {
  return item ;
}
function renderRowColumn ( i , j ) {
  var getRowColumn = DATA [ i ] [ header [ j ] ] ;
  return < td key = { UNIQUE_KEY } > { getRowColumn } </ td > ;
}

function renderRow ( rowIndex , currentIndex , col ) {
  return < tr key = { UNIQUE_KEY } > { col } </ tr > ;
}

< Table
  header = { header }
  renderHeader = { this . renderHeader }
  renderRow = { this . renderRow }
  columnCount = { 3 }
  count = { YOUR_DATA . length }
  visibleCount = { 5 }
  rowHeight = { 50 }
  renderRowColumn = { this . renderRowColumn }
/> ;

Проп	Тип	Описание
visiblecount	Число	Количество видимых рядов
считать	Число	Количество рядов
заголовок	Множество	Должен быть множество струн
renderheader	Функция	Количество видимых столбцов
reenderrow	Функция	Рендерирует ряд
renderrowcolumn	Функция	Отдает столбцы строки
дом	Объект	Передайте атрибуты элементу HTML

Сетка

---

 function renderer ( { rowIndex , columnIndex , yIndex , xIndex } ) {
  return (
    < td key = { UNIQUE_KEY } >
      Item { columnIndex } , { rowIndex }
    </ td >
  ) ;
}

< Grid
  renderer = { this . renderer }
  visibleRows = { 6 }
  rowCount = { 100 }
  rowWidth = { 30 }
  columnCount = { 100 }
  visibleColumns = { 6 }
  columnHeight = { 50 }
/> ;

Проп	Тип	Описание
Columncount	Число	Количество столбцов
VISIBLECOLUNMS	Число	Количество видимых столбцов
rowcount	Число	Количество строк
Visiblerows	Число	Количество видимых рядов
рендерер	Функция	Отображает строку и столбец
дом	Объект	Передайте атрибуты элементу HTML