react-keyview

Installation

via NPM

npm i react-keyview

via Yarn

yarn add react-keyview

via CDN (unpkg)

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

UMD library exposed as ReactKeyView

const KV = ReactKV;

Note. This package does not provide any stylesheet resources, the components are highly customizable. It is also supports Server-side rendering

Demos

• List
• Table
• Grid

Usage

You can import any component you want as a named export from 'react-keyview', eg.

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

Or you can directly import only the components you need, like so.

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

UMD modules has prefix ReactKV, eg.

const Grid = ReactKVGrid;
const List = ReactKVList;

List

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

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

| Prop | Type | Description | | ------------ | :------: | ---------------------------------: | | renderRow | Function | Renders a single row | | count | Number | Number of elements | | rowHeight | Number | Row height | | visibleCount | Number | The visible elements count | | dom | Object | Pass attributes to an HTML element |

Table

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

| Prop | Type | Description | | --------------- | :------: | ---------------------------------: | | visibleCount | Number | Number of visible rows | | count | Number | Number of rows | | header | Array | Must be an array of strings | | renderHeader | Function | Number of visible columns | | renderRow | Function | Renders row | | renderRowColumn | Function | Renders the columns of the row | | dom | Object | Pass attributes to an HTML element |

Grid

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

| Prop | Type | Description | | -------------- | :------: | ---------------------------------: | | columnCount | Number | Number of columns | | visibleColumns | Number | Number of visible columns | | rowCount | Number | Number of lines | | visibleRows | Number | Number of visible rows | | renderer | Function | Displays the row and column | | dom | Object | Pass attributes to an HTML element |