react keyview

React-KeyView

---

Instalación

---

a través de NPM

 npm i react-keyview

a través de hilo

 yarn add react-keyview

a través de CDN (impkg)

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

Biblioteca UMD expuesta como ReactKeyView

 const KV = ReactKV ;

Nota. Este paquete no proporciona ningún recurso de hoja de estilo, los componentes son altamente personalizables. También es compatible con la representación del lado del servidor

Población

• Lista
• Mesa
• Red

Uso

Puede importar cualquier componente que desee como exportación nombrada de 'React-KeyView', por ejemplo.

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

O puede importar directamente solo los componentes que necesita, así.

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

Los módulos UMD tienen prefijo reactkv, por ejemplo.

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

Apuntalar	Tipo	Descripción
renderrow	Función	Representa una sola fila
contar	Número	Número de elementos
royheight	Número	Altura de la fila
Visiblecount	Número	Los elementos visibles cuentan
domina	Objeto	Pasar atributos a un 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 }
/> ;

Apuntalar	Tipo	Descripción
Visiblecount	Número	Número de filas visibles
contar	Número	Número de filas
encabezamiento	Formación	Debe ser una variedad de cuerdas
repositador	Función	Número de columnas visibles
renderrow	Función	Renders Row
renderrowcolumn	Función	Rendera las columnas de la fila
domina	Objeto	Pasar atributos a un elemento HTML

Red

---

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

Apuntalar	Tipo	Descripción
columna	Número	Número de columnas
VisibleColumns	Número	Número de columnas visibles
cuenta	Número	Número de líneas
visibles	Número	Número de filas visibles
renderizador	Función	Muestra la fila y la columna
domina	Objeto	Pasar atributos a un elemento HTML