react keyview

React-keyview

---

Instalação

---

via npm

 npm i react-keyview

via Yarn

 yarn add react-keyview

via CDN (unpkg)

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

Biblioteca UMD exposta como ReactKeyView

 const KV = ReactKV ;

Observação. Este pacote não fornece recursos de folha de estilo, os componentes são altamente personalizáveis. Também é suporta a renderização do lado do servidor

Demos

• Lista
• Mesa
• Grade

Uso

Você pode importar qualquer componente que desejar como exportação nomeada de 'React-keyview', por exemplo.

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

Ou você pode importar diretamente apenas os componentes necessários, como assim.

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

Os módulos UMD possuem reactkv prefixo, por exemplo.

 const Grid = ReactKVGrid ;
const List = ReactKVList ; 

Lista

---

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

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

Prop	Tipo	Descrição
renderrow	Função	Renderiza uma única linha
contar	Número	Número de elementos
ROWHESET	Número	Altura da linha
visibleCount	Número	Os elementos visíveis contam
dom	Objeto	Passar atributos para um elemento HTML

Mesa

---

 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 }
/> ;

Prop	Tipo	Descrição
visibleCount	Número	Número de linhas visíveis
contar	Número	Número de linhas
cabeçalho	Variedade	Deve ser uma variedade de cordas
RenderHeader	Função	Número de colunas visíveis
renderrow	Função	Renderiza a linha
renderRowColumn	Função	Renderiza as colunas da linha
dom	Objeto	Passar atributos para um elemento HTML

Grade

---

 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 }
/> ;

Prop	Tipo	Descrição
ColumnCount	Número	Número de colunas
VisibleColumns	Número	Número de colunas visíveis
rowcount	Número	Número de linhas
Visiblerows	Número	Número de linhas visíveis
renderizador	Função	Exibe a linha e a coluna
dom	Objeto	Passar atributos para um elemento HTML