# @unriddle/react-grid
> react-virtualized-simple-grid
Latest version **0.0.8** (published 2020-12-23) · 0 weekly downloads
## Install
```sh
npm install @unriddle/react-grid
pnpm add @unriddle/react-grid
yarn add @unriddle/react-grid
bun add @unriddle/react-grid
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.8 |
| Published | 2020-12-23 |
| First published | 2020-12-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 51.9 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | azvivek |
## Links
- npm: https://www.npmjs.com/package/@unriddle/react-grid
- npm.io page: https://npm.io/package/@unriddle/react-grid
## Dependencies (12)
- [react](https://npm.io/package/react.md) 16.5.2
- [enzyme](https://npm.io/package/enzyme.md) 3.7.0
- [react-dom](https://npm.io/package/react-dom.md) 16.5.2
- [classnames](https://npm.io/package/classnames.md) 2.2.6
- [prop-types](https://npm.io/package/prop-types.md) latest
- [highlight.js](https://npm.io/package/highlight.js.md) 9.12.0
- [react-markdown](https://npm.io/package/react-markdown.md) 4.0.2
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) 7.0.0
- [react-virtualized](https://npm.io/package/react-virtualized.md) 9.22.3
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) 2.10.0
- [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) 1.6.0
- [react-custom-scrollbars](https://npm.io/package/react-custom-scrollbars.md) ^4.2.1
## Recent versions
- 0.0.8 (latest) — 2020-12-23
- 0.0.7 — 2020-12-23
- 0.0.6 — 2020-12-23
- 0.0.5 — 2020-12-23
## README
react-virtualized-simple-grid
This is built upon React Virtualized by bvaughn
Demo @ Codesandbox
## How to use
```js
import { Table } from "library-name";
import { colDef, data } from "./somewhere";
const App = () => ;
```
---
## Step by step
With this data below we want to have a table with _id_, _name_ and _age_.
**Data:**
```js
[
{
id: "1",
name: "Steve",
age: "29"
},
{
id: "2",
name: "Roger",
age: "33"
},
{
id: "3",
name: "Sarah",
age: "27"
}
];
```
For this to work we will have to create a _column definition_.
**Column Definition** defines how we want to map the respective values from the data:
```json
const columnDefinition = [
{
key: "id",
label: "Id",
size: 50
},
{
key: "name",
label: "User Name",
size: 150
},
{
key: "age",
label: "User Age",
size: 50
}
];
```
As we can see from above it has three important characteristics: _key_, _size_ and _label_.
| key | Description | required? |
| --------- | --------------------------------------------------------------- | --------- |
| `key` | What key we want to map with from the data. | YES |
| `size` | the size of the column | YES |
| label | The label in the header that will be shown for the mapped value | NO |
| checkbox | if we want to render checkboxes for a column | NO |
| component | to render a custom component with the data | NO |
**Checkbox column and a custom component:**
```js
export const customColDef = [
{
key: "checkbox",
size: 50
},
{
label: "Hotel",
key: "hotel",
size: 250,
component: ({ rowData }) => {
return {rowData.hotel};
}
}
];
```
## Props
| key | Description | default |
| ------------------ | ---------------------------------------------------------------- | ------------------- |
| `list` | Your data. | |
| `colDef` | Defines how to map the values into the grid | |
| `fixedRowCount` | number | |
| `fixedColumnCount` | number | |
| `fixedHeight` | number | |
| `fixedWidth` | number | |
| `rowHeight` | number | |
| `headerHeight` | number | |
| `isBoxShadow` | boolean, | true |
| `hoverOnX` | boolean | false |
| `hoverOnY` | boolean | false |
| `isZebra` | boolean | false |
| `isSortOn` | boolean | false |
| `isEditable` | boolean | false |
| `onCellChange` | function callback with changed cell (only when using isEditable) | |
| `onLabelClick` | function callback with clicked label info | |
| `footer` | function | example: lib/footer |
## CSS Classes
| key | Description |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| Table | has to be set on style prop |
| Row | `.table--row-even` `.table--row-odd` |
| th | `.c-table--th` |
| td | `.c-table--td` |
| th when sorting (when active) | `.c-table--th-sort` `.c-table--th-sort-active` |
| sort icon button (when active) | `.c-sort-button` `.c-sort-button--active` |
| hover cell (when active) | `.c-table--td-hover-cell` |
| Fixed rows styles (when active) | `.c-table--top-left-grid` `.c-table--top-right-grid` `.c-table--bottom-left-grid` `.c-table--bottom-right-grid` |
| editable cell input (when active) | `.c-editable-cell--input` |
| sub header (when active) | `.c-table--sub-header` `.c-table--sub-header-title` |
| Checkbox (when active) | `.c-checkbox-cell` `.c-checkbox-cell--input` `id="c-checkbox-label-checkboxKey` `for="c-checkbox-label-checkboxKey` |
## Build
---
`npm run build`
---
_Source: https://npm.io/package/@unriddle/react-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._