# react-table-lib

> React responsive table library

Latest version **0.1.0** (published 2023-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-table-lib
pnpm add react-table-lib
yarn add react-table-lib
bun add react-table-lib
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-01-18 |
| First published | 2023-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 0 |
| Unpacked size | 237.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | smartameer |
| Maintainers | smartameer |

## Links

- npm: https://www.npmjs.com/package/react-table-lib
- Repository: https://github.com/smartameer/react-table-lib
- Homepage: https://github.com/smartameer/react-table-lib#readme
- Issues: https://github.com/smartameer/react-table-lib/issues
- npm.io page: https://npm.io/package/react-table-lib

## Recent versions

- 0.1.0 (latest) — 2023-01-18

## README

# React Table

### Installation

```sh
yarn add react-table-lib
```

### Usage

```js
import Table from 'react-table-lib'

```


- Basic Table

  ```js
  const data = [
    { name: "Earline Stokes", age: 30 },
    { name: "Amina Bergstrom", age: 25 },
    { name: "Kattie Hoppe", age: 20 }
  ]

  return (
    <Table data={data}>
  )
  ```
- Column mapped
  ```js
  const data = [
    { name: "Earline Stokes", age: 30 },
    { name: "Amina Bergstrom", age: 25 },
    { name: "Kattie Hoppe", age: 20 }
  ]

  const columns = {
    name: { label: "Full Name", sortable: true },
    age: { label: "Age", format: (data) => data + 'yrs' }
  }

  return (
    <Table data={data} columns={columns}>
  )
  ```
- Selectable
  ```js
  const data = [
    { name: "Earline Stokes", age: 30 },
    { name: "Amina Bergstrom", age: 25 },
    { name: "Kattie Hoppe", age: 20 }
  ]

  const columns = {
    name: { label: "Full Name", sortable: true },
    age: { label: "Age", format: (data) => data + 'yrs' }
  }

  const handleSelect = (data) => {
    // do something
    // data [{ name: "Earline Stokes", age: 30 }]
  }

  return (
    <Table data={data} columns={columns} selectable="multiple" onSelect={handleSelect}>
  )
  ```

### Table Properties

| Props/Methods | Default | Type | Required | Details |
|---|---|---|---|--|
| data | - | array | true | Table Records in array format with each entry holding `key : value` pair |
| columns | {} | object | false |Each property for data's entry's header property <br/>Ref: [Columns](#columns)|
| selectable | - | 'single'<br/> 'multiple' | false | Selectable option to select table record based on type single or multiple |
| onSelect | - | function | false | Callback to get selected records details.<br/> `callback data`: record (or) array of records |


### Columns Properties

| Property | type | Details |
|---|---|---|
| `label` | string | Table Header column name |
| `sortable` | boolean | Column sortable property |
| `format` | function | Formatting table record for the same column |



### Demo

[Code Sandbox](http://codesandbox.io/p/github/smartameer/react-table-lib/master)

> Note: Please run `yarn storybook` to see demo. You can run this in your local too to check the same

---
_Source: https://npm.io/package/react-table-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._