# react-use-datatable

> Common hooks to craft data tables

Latest version **0.4.0** (published 2020-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-datatable
pnpm add react-use-datatable
yarn add react-use-datatable
bun add react-use-datatable
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2020-03-24 |
| First published | 2019-11-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 34.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | osioalberto@gmail.com |
| Maintainers | bianchimro, magikgiova, osioalberto |

## Links

- npm: https://www.npmjs.com/package/react-use-datatable
- Repository: https://github.com/inmagik/datatable
- Homepage: https://github.com/inmagik/datatable#readme
- Issues: https://github.com/inmagik/datatable/issues
- npm.io page: https://npm.io/package/react-use-datatable

## Dependencies (1)

- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2

## Recent versions

- 0.4.0 (latest) — 2020-03-24
- 0.3.0-rc5 (next) — 2020-03-16
- 0.3.0 — 2020-03-19
- 0.3.0-rc4 — 2020-03-16
- 0.3.0-rc3 — 2020-03-09
- 0.3.0-rc2 — 2020-01-21
- 0.2.1 — 2019-11-20
- 0.2.0 — 2019-11-20

## README

# react-use-datatable
Common hooks and components to craft data tables


## Install

```bash
npm install --save react-use-datatable
```

## Example
```jsx
import SomeWonderfulRj from "./my-rjs"
import { qpInt } from "magik-react-hooks/qpUtils"
import DataTable from "react-use-datatable"

const Component = () => {
  return (
    <div>
      <DataTable
        withQueryString
        rj={SomeWonderfulRj}
        config={() => ({
          name: {
            field: 'name_like',
            value: undefined
          },
          age: {
            value: undefined,
            encdec: qpInt(10)
          }
        })}>
        {({ people, pagination, loading }, { page, ...filters }, { onFilterChange, onFilterChangeDebounced, goToPage }) => (
          people ? 
            <div>
              <table border={1} style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid black' }}>
              <thead>
                <tr>
                <th>ID</th>
                <th>
                  {'Name'}
                  <br />
                  <input type="text" name="title" value={filters.title || ''} onChange={onFilterChangeDebounced} />
                </th>
                <th>
                  {'Age'}
                  <br />
                  <input type="text" name="title" value={filters.title || ''} onChange={onFilterChangeDebounced} />
                </th>
                </tr>
              </thead>
              <tbody>
                {people.map(person => (
                <tr key={todo.id}>
                  <td>{todo.id}</td>
                  <td>{todo.name}</td>
                  <td>{todo.age}</td>
                </tr>
                ))}
              </tbody>
              </table>
              <p>
              {page > 0 && pagination.numPages > 0 &&
                <button type="button" onClick={() => { goToPage(page - 1) }}>Prev page</button>
              }
              <span style={{ marginLeft: 10, marginRight: 10 }}>Current page: {page}/{Math.max(1, pagination.numPages)}</span>
              {page < pagination.numPages &&
                <button type="button" onClick={() => { goToPage(page + 1) }}>Next page</button>
              }
              </p>
            </div> 
          : null
        )}
      </DataTable>
    </div>
  )

}
```

## License

MIT © [InMagik srl](https://github.com/inmagik)

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