react keyview

React-Keyview

---

Installation

---

über NPM

 npm i react-keyview

über Garn

 yarn add react-keyview

über CDN (UNPKG)

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

UMD -Bibliothek als ReactKeyView ausgesetzt

 const KV = ReactKV ;

Notiz. Dieses Paket bietet keine Stylesheet -Ressourcen, die Komponenten sind sehr anpassbar. Es unterstützt auch das serverseitige Rendering

Demos

• Liste
• Tisch
• Netz

Verwendung

Sie können jede gewünschte Komponente als benannten Export von 'React-Keyview', z.

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

Oder Sie können nur die von Ihnen benötigten Komponenten importieren.

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

UMD -Module haben Präfix Reactkv, z.

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

Stütze	Typ	Beschreibung
Renderrow	Funktion	Rendert eine einzelne Reihe
zählen	Nummer	Anzahl der Elemente
RowHeight	Nummer	Reihenhöhe
VisibleCount	Nummer	Die sichtbaren Elemente zählen
Dom	Objekt	Übergeben Sie Attribute an ein HTML -Element

Tisch

---

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

Stütze	Typ	Beschreibung
VisibleCount	Nummer	Anzahl der sichtbaren Zeilen
zählen	Nummer	Anzahl der Zeilen
Kopfball	Array	Muss eine Reihe von Saiten sein
Renderheader	Funktion	Anzahl der sichtbaren Spalten
Renderrow	Funktion	Renders Row
RendErrowcolumn	Funktion	Rendert die Spalten der Zeile
Dom	Objekt	Übergeben Sie Attribute an ein HTML -Element

Netz

---

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

Stütze	Typ	Beschreibung
Säulencount	Nummer	Anzahl der Spalten
Visiblecolumns	Nummer	Anzahl der sichtbaren Spalten
RowCount	Nummer	Anzahl der Zeilen
Visiblerows	Nummer	Anzahl der sichtbaren Zeilen
Renderer	Funktion	Zeigt die Zeile und die Spalte an
Dom	Objekt	Übergeben Sie Attribute an ein HTML -Element