react keyview

React-KeyView

---

インストール

---

NPM経由

 npm i react-keyview

糸経由

 yarn add react-keyview

CDN経由（UNPKG）

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

UMDライブラリはReactKeyViewとして公開されています

 const KV = ReactKV ;

注記。このパッケージは、スタイルシートリソースを提供していません。コンポーネントは高度にカスタマイズ可能です。また、サーバー側のレンダリングもサポートしています

デモ

• リスト
• テーブル
• グリッド

使用法

「React-KeyView」から名前付きエクスポートとして必要なコンポーネントをインポートできます。

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

または、必要なコンポーネントのみを直接インポートすることもできます。

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

umdモジュールには、reactkvのプレフィックスがあります。

 const Grid = ReactKVGrid ;
const List = ReactKVList ; 

リスト

---

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

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

小道具	タイプ	説明
レンデロー	関数	単一の行をレンダリングします
カウント	番号	要素の数
rowheight	番号	列の高さ
visiblecount	番号	可視要素がカウントされます
dom	物体	属性をHTML要素に渡します

テーブル

---

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

小道具	タイプ	説明
visiblecount	番号	目に見える行の数
カウント	番号	行数
ヘッダ	配列	文字列の配列でなければなりません
Renderheader	関数	目に見える列の数
レンデロー	関数	rowをレンダリングします
RenderRowColumn	関数	行の列をレンダリングします
dom	物体	属性をHTML要素に渡します

グリッド

---

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

小道具	タイプ	説明
columnCount	番号	列数
visiblecolumns	番号	目に見える列の数
rowcount	番号	行数
visiblerows	番号	目に見える行の数
レンダラー	関数	行と列を表示します
dom	物体	属性をHTML要素に渡します