Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vaheqelyan/react-keyview
React components to display the list, table, and grid, without scrolling, use the keyboard keys to navigate through the data
https://github.com/vaheqelyan/react-keyview
components data grid keyboard keys list navigation react table tabular-data
Last synced: 2 months ago
JSON representation
React components to display the list, table, and grid, without scrolling, use the keyboard keys to navigate through the data
- Host: GitHub
- URL: https://github.com/vaheqelyan/react-keyview
- Owner: vaheqelyan
- License: mit
- Created: 2018-11-30T10:42:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-02T12:27:12.000Z (about 6 years ago)
- Last Synced: 2024-10-24T20:20:21.630Z (3 months ago)
- Topics: components, data, grid, keyboard, keys, list, navigation, react, table, tabular-data
- Language: TypeScript
- Homepage:
- Size: 38.1 KB
- Stars: 17
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-keyview
---
### Installation
---
**via NPM**
```code
npm i react-keyview
```
**via Yarn**
```code
yarn add react-keyview
```
**via CDN (unpkg)**
```code
https://unpkg.com/react-keyview@latest
```
UMD library exposed as `ReactKeyView`
```js
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](http://react-keyview.surge.sh/List/dist/)
- [Table](http://react-keyview.surge.sh/Table/dist/)
- [Grid](http://react-keyview.surge.sh/Grid/dist/)
### Usage
You can import any component you want as a named export from 'react-keyview', eg.
```jsx
import { Grid, Table } from "react-keyview";
```
Or you can directly import only the components you need, like so.
```jsx
import Grid from "react-keyview/build/Grid";
import Table from "react-keyview/build/Table";
```
UMD modules has prefix ReactKV, eg.
```jsx
const Grid = ReactKVGrid;
const List = ReactKVList;
```
#### List
---
```jsx
function renderRow(rowIndex, currentIndex) {
return
{rowIndex};
}
;
```
| 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
---
```jsx
function renderHeader(item) {
return item;
}
function renderRowColumn(i, j) {
var getRowColumn = DATA[i][header[j]];
return {getRowColumn};
}
function renderRow(rowIndex, currentIndex, col) {
return {col};
}
;
```
| 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
---
```jsx
function renderer({ rowIndex, columnIndex, yIndex, xIndex }) {
return (
Item {columnIndex},{rowIndex}
);
}
;
```
| 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 |