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.

Install

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

Package Usage

Minimum basic usage with column auto generation

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

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

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

or SCSS

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