# bs-retable

> A sortable selectable *table for ReasonReact.

Latest version **0.2.0** (published 2018-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install bs-retable
pnpm add bs-retable
yarn add bs-retable
bun add bs-retable
```

## 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.2.0 |
| Published | 2018-11-14 |
| First published | 2018-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 14.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Thibaut Mattio |
| Maintainers | tmattio |
| Keywords | reason, bucklescript, react, table |

## Links

- npm: https://www.npmjs.com/package/bs-retable
- Repository: git@github.com:tmattio/retable
- Homepage: https://github.com/tmattio/retable#readme
- Issues: https://github.com/tmattio/retable/issues
- npm.io page: https://npm.io/package/bs-retable

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.6.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.1
- [reason-react](https://npm.io/package/reason-react.md) ^0.5.3

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2018-11-14
- 0.1.0 — 2018-11-12

## README

# ReTable

A sortable selectable *table for ReasonReact.

## Usage

```reason
type president = {
  name: string,
  year: int,
  city: string,
  state: string,
};

module PresidentTable =
  ReTable.Make({
    type t = president;
    let getItemID = president => president.name;
    let columns = [
      ReTable.textColumn("Name", el => el.name),
      ReTable.intColumn("Year", el => el.year),
      ReTable.textColumn("City", el => el.city),
      ReTable.textColumn("State", el => el.state),
    ];
  });

let presidents: list(president) = [
  {
    name: "George Washington",
    year: 1732,
    city: "Westmoreland County",
    state: "Virginia",
  },
  {name: "John Adams", year: 1735, city: "Braintree", state: "Massachusetts"},
  {name: "Thomas Jefferson", year: 1743, city: "Shadwell", state: "Virginia"},
];

let component = ReasonReact.statelessComponent(__MODULE__);

let make = (_children: array(ReasonReact.reactElement)) => {
  ...component,
  render: _self => <PresidentTable data=presidents />,
};
```

For more usages examples, see the [examples](./examples) folder.

## Installation

```shell
yarn add bs-retable
```

Then add it to `bsconfig.json`

```json
"bs-dependencies": [
  "bs-retable"
]
```

## Design Decisions

**Q: Why a module type?**

I went through a lot of design phase for the selection of components. The table data is a parametrized type, and so it is impossible to store it in a state. Alternative solutions were to store the IDs of the items, or delegate the selection state to the user. The former is a less-than optimal solution and the latter gives a really bad UX.

**Q: How does it deal with the updates of the parent components?**

A problem occurs when the parent component re-renders. To solve this issue, we match previous items in the state of the table to new ones. For instance, if you have a selectable table with an option to fetch more data from the server, when the new data is received and sent to the table, we try to match previous item ID to new ones so that previously selected items keep their state.


## TODO

- [X] Implement selection
- [ ] Implement sorting
- [ ] Implement pagination
- [ ] Implement filtering

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