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

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.