my-simple-react-table/README.md

This is a simple React package for creating table with pagination and search box in react application

# My Simple React Table
This is a simple light weight React package for creating table with pagination and search box in react application. The package allow ease of creating reactive table by taking advantage of react hooks with negligible impact on the overall performance of your application.


[![NPM](https://img.shields.io/npm/v/my-simple-react-table.svg)](https://www.npmjs.com/package/my-simple-react-table) 

## Install

```
$ npm install --save my-simple-react-table
```


## Package Usage

Minimum basic usage with column auto generation

```js
import React from 'react';
import SimpleTable from "my-simple-react-table";

const Example = _ => {

  return <SimpleTable
          data={[
                  {
                    "id": "1",
                    "name": "Tiger Nixon",
                    "position": "System Architect"
                  },
                  {
                    "id": "2",
                    "name": "Garrett Winters",
                    "position": "Accountant"
                  }
                ]}
        />
}

export default Example;
```

Usage with column specification and format example

```js
import React from 'react';
import SimpleTable from "my-simple-react-table";

const Example = _ => {
  
  // Current row is passed
  const formatDateColumn = row => {
    const event = new Date(row?.start_date);
    const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'};
    return row?.start_date ? event.toLocaleDateString('en-US', options) : "None";  
  }
  
  return <SimpleTable
          data={[
                  {
                    "id": "1",
                    "name": "Tiger Nixon",
                    "position": "System Architect",
                    "start_date": "2011/08/25"
                  },
                  {
                    "id": "2",
                    "name": "Garrett Winters",
                    "position": "Accountant",
                    "start_date": "2011/04/25"
                  }
                ]}
                
          columns={[
                    {title:"S/N", format: row => (row._index + 1)}, // Take advantage of the auto generated index for serial Number
                    {title:"NAME", key: "name"},
                    {title:"POSITION", key: "position"},
                    {title:"DATE", format: formatDateColumn // Column method formating
                  ]} 
        />
}

export default Example;
```
## Styling
The table generated use bootstrap styling by default. if you are not currently using bootstrap in your react application, kindly import css as follow
```js
import React from 'react';
import SimpleTable from "my-simple-react-table";
import "my-simple-react-table/dist/style.css";

```
or SCSS

```js
import React from 'react';
import SimpleTable from "my-simple-react-table";
import "my-simple-react-table/dist/style.scss";

```

You can create your custom css using this as template https://github.com/successtar/my-simple-react-table/blob/master/src/style.css or scss with https://github.com/successtar/my-simple-react-table/blob/master/src/style.scss


## Props

- `data` - array of your json data objects, default is empty array
- `columns` - format and/or specify table columns, generated by default from data if not passed
- `searchBox` - show searchBox, default is true
- `rowPerPage` - specify maximum number of rows per page, default is 10

## Examples
https://successtar.github.io/my-simple-react-table

## License

MIT © [Hammed Olalekan Osanyinpeju](https://successtar.github.io)