# ocr-table-p14

> Table rendering P14 App list

Latest version **0.1.7** (published 2023-10-10) · 0 weekly downloads

## Install

```sh
npm install ocr-table-p14
pnpm add ocr-table-p14
yarn add ocr-table-p14
bun add ocr-table-p14
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2023-10-10 |
| First published | 2023-10-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | nc81 |

## Links

- npm: https://www.npmjs.com/package/ocr-table-p14
- Repository: https://github.com/NC81/Table-P14
- Homepage: https://github.com/NC81/Table-P14#readme
- Issues: https://github.com/NC81/Table-P14/issues
- npm.io page: https://npm.io/package/ocr-table-p14

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Recent versions

- 0.1.7 (latest) — 2023-10-10
- 0.1.6 — 2023-10-10
- 0.1.5 — 2023-10-09
- 0.1.4 — 2023-10-09
- 0.1.3 — 2023-10-06
- 0.1.2 — 2023-10-04
- 0.1.1 — 2023-10-03
- 0.1.0 — 2023-10-03

## README

# OCR-Table-P14

This student project is a React Table library converted from this [jQuery plugin](https://github.com/DataTables/DataTables.git).

It's optimized to render live data updates without re-rendering rows.

## Technologies

- JS
- React

## Dependencies

- React ^18.2.0

## Features

- Columns sorting (texts, numbers and dates)
- Pagination with corresponding info text
- Entries selection
- Search
- Deep accessibility
- Optimized live updates rendering

## Installation

`npm install ocr-table-p14`

## Usage

### Define data prop

```js
[
  { title: 'Alien ', releaseDate: '09/12/1979', rating: '5' },
  { title: 'Blade Runner', releaseDate: '09/15/1982', rating: '5' },
  { title: 'Brazil', releaseDate: '12/18/1985', rating: '5' },
  { title: 'Soylent Green', releaseDate: '04/19/1973', rating: '5' },
]
```

**data** is an array of objects representing rows.

Each property refers to a column.

To make dates sorting work, just be careful to :

- Include _date_ (case insensitive : e.g., _releaseDate_) in property key
- Format values as _MM/DD/YYYY_ strings

### Define columns prop

Provided you have passed the previous **data** array, you should set your **columns** array as following :

```js
[
  { key: 'title', header: 'Title' },
  { key: 'releaseDate', header: 'Release Date' },
  { key: 'rating', header: 'Our review' },
]
```

- **key** serves as accessor providing access to data object properties
- **header** defines corresponding column title

### Place Table in your App

```js
import { Table } from 'ocr-table-p14'

function App() {

  const dataArray = [
    { title: 'Alien ', releaseDate: '09/12/1979', rating: '5' },
    { title: 'Blade Runner', releaseDate: '09/15/1982', rating: '5' },
    { title: 'Brazil', releaseDate: '12/18/1985', rating: '5' },
    { title: 'Soylent Green', releaseDate: '04/19/1973', rating: '5' },
  ]

  const columnsArray = [
    { key: 'title', header: 'Title' },
    { key: 'releaseDate', header: 'Release Date' },
    { key: 'rating', header: 'Our review' },
  ]

  return <Table data={dataArray} columns={columnsArray} />
}
```

### Update live data

When data is updated, **ocr-table-p14** will render last addition without re-rendering previous rows.

Just make sure one object is added at a time to render it live.

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