react keyview

React-keyview

---

Instalasi

---

melalui NPM

 npm i react-keyview

melalui benang

 yarn add react-keyview

Via CDN (UNPKG)

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

Perpustakaan UMD Diekspos sebagai ReactKeyView

 const KV = ReactKV ;

Catatan. Paket ini tidak menyediakan sumber daya stylesheet apa pun, komponennya sangat dapat disesuaikan. Itu juga mendukung rendering sisi server

Demo

• Daftar
• Meja
• Kisi

Penggunaan

Anda dapat mengimpor komponen apa pun yang Anda inginkan sebagai ekspor bernama dari 'React-Keyview', misalnya.

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

Atau Anda hanya dapat mengimpor hanya komponen yang Anda butuhkan, seperti itu.

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

Modul UMD memiliki awalan reactkv, mis.

 const Grid = ReactKVGrid ;
const List = ReactKVList ; 

Daftar

---

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

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

Menopang	Jenis	Keterangan
Renderrow	Fungsi	Membuat satu baris
menghitung	Nomor	Jumlah elemen
RowHeight	Nomor	Tinggi baris
visiblecount	Nomor	Hitung Elemen yang Terlihat
dom	Obyek	Lulus atribut ke elemen html

Meja

---

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

Menopang	Jenis	Keterangan
visiblecount	Nomor	Jumlah baris yang terlihat
menghitung	Nomor	Jumlah baris
header	Array	Harus berupa serangkaian string
Renderheader	Fungsi	Jumlah kolom yang terlihat
Renderrow	Fungsi	Render Row
RenderrowColumn	Fungsi	Membuat kolom baris
dom	Obyek	Lulus atribut ke elemen html

Kisi

---

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

Menopang	Jenis	Keterangan
Columncount	Nomor	Jumlah kolom
Visiblecolumns	Nomor	Jumlah kolom yang terlihat
rowcount	Nomor	Jumlah baris
visiblerows	Nomor	Jumlah baris yang terlihat
renderer	Fungsi	Menampilkan baris dan kolom
dom	Obyek	Lulus atribut ke elemen html