react keyview

React-KeyView

---

Installation

---

via npm

 npm i react-keyview

via le fil

 yarn add react-keyview

via CDN (UNPKG)

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

Bibliothèque UMD exposée comme ReactKeyView

 const KV = ReactKV ;

Note. Ce package ne fournit aucune ressource de feuille de style, les composants sont hautement personnalisables. Il prend également en charge le rendu côté serveur

Démos

• Liste
• Tableau
• Grille

Usage

Vous pouvez importer n'importe quel composant que vous souhaitez en tant qu'exportation nommée à partir de «React-KeyView», par exemple.

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

Ou vous ne pouvez importer directement que les composants dont vous avez besoin, comme ainsi.

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

Les modules UMD ont le préfixe reactkv, par exemple.

 const Grid = ReactKVGrid ;
const List = ReactKVList ; 

Liste

---

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

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

Soutenir	Taper	Description
rendez-vous	Fonction	Rend une seule ligne
compter	Nombre	Nombre d'éléments
ride	Nombre	Hauteur de rangée
VisibleCount	Nombre	Les éléments visibles comptent
dom	Objet	Passer des attributs à un élément HTML

Tableau

---

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

Soutenir	Taper	Description
VisibleCount	Nombre	Nombre de lignes visibles
compter	Nombre	Nombre de lignes
tête	Tableau	Doit être un éventail de chaînes
rendu	Fonction	Nombre de colonnes visibles
rendez-vous	Fonction	Rown Row
RenderrowColumn	Fonction	Rend les colonnes de la ligne
dom	Objet	Passer des attributs à un élément HTML

Grille

---

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

Soutenir	Taper	Description
choux	Nombre	Nombre de colonnes
VisibleColumns	Nombre	Nombre de colonnes visibles
compte de ligne	Nombre	Nombre de lignes
visibles	Nombre	Nombre de lignes visibles
rendu	Fonction	Affiche la ligne et la colonne
dom	Objet	Passer des attributs à un élément HTML