Ocr-table-p14 NPM

OCR-Table-P14

This student project is a React Table library converted from this jQuery plugin.

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

[
  { 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 :

[
  { 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

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} />
}