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 모듈에는 Prefix 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	숫자	가시 요소는 계산됩니다
돔	물체	속성을 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	숫자	가시 행의 수
세다	숫자	행의 수
헤더	정렬	문자열 배열이어야합니다
렌더 헤드	기능	가시 열 수
렌더로	기능	행을 렌더링합니다
렌더 로우 컬럼	기능	행의 열을 렌더링합니다
돔	물체	속성을 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	숫자	가시 행의 수
렌더러	기능	행과 열을 표시합니다
돔	물체	속성을 HTML 요소로 전달하십시오