vista-table-react

1.1.10 • Public • Published

Vista Table React

Vista table react is React table component which can be setup very easily. One can simply use Vista table react and reduce the burden of writing lot many lines of javascript code to achieve table functionality.


Installation

$ npm i vista-table-react
$ yarn add vista-table-react

Key notes

  • Easy installation.
  • Quick customization.
  • Filter the data very easily, supports type like date, number.
  • Pagination
  • Classy look for the table.
  • Table with 3 themes available --> Classic, Dark and Basic
  • Coders Point Team is ready to help and resolve the issue whenever needed.

Implementation instructions

import React from "react";
import { VistaTable } from "vista-table-react";

const ReactComponent = () => {
    const SAMPLE_HEADER = [
        {key:"date_column", title: "Date", type: "date", format: "DD/MM/YYYY", sorting: false},
        {key:"column1", title: "Column 1", filter: false},
        {key:"column2", title: "Column 2", type: "number"},
        {key:"column3", title: "Column 3", filter: true}
    ];

    const CONFIG = {
        pagination: true,
        itemsPerPage: 8,
        filter: true,
        sorting: true
    }
    const SAMPLE_DATA = [
        {"date_column":"1/6/2021", "column1":"Test", "column2":5,"column3":"sample 1"},
        {"date_column":"2/6/2021", "column1":"Test1", "column2":6,"column3":"sample 2"},
        {"date_column":"3/6/2021", "column1":"Test2", "column2":7,"column3":"sample 2"},
    ];
    return (
        <VistaTable headers={SAMPLE_HEADER} data={SAMPLE_DATA} className="classic" config={CONFIG}/>
    );
}
export default ReactComponent;

Props details

Props Oject Keys Accepted Values Default values Description
#header #Array of Object Array of headers to be passed as props. Below is the accepted array key valye pairs
. key string Mandatory* unique value
. title string Mandatory* title to show in the column name
. filter boolean -> true/false true false if filter is not needed for column
. sort boolean -> true/false true false if sorting is not required for column
. hidden boolean -> true/false false true if column need to be hidden (in-progress)
. type string -> string, number, date string type of the column
. format string DD/MM/YYYY format of the date if the type is date
#data # Array of object Array of objects matching the key in header (key) --> [{"key":""}]
#className string classic/dark/empty style for the table "classic" for classic table, "" for basic table, "dark" for dark theme
#config # Object
. pagination boolean -> true/false false set to true if Pagination is required
. itemsPerPage number Mandatory* if pagination is true tells the number of rows per page
. filter boolean -> true/false false set to true if filter is required for table
. sorting boolean -> true/false false set to true if sorting is required for table

Demo

I'm sure I will develop a better demo page, but for now a simple demo page is here. to show the vista table look and feel.

Feel free to contact us for any help.


Contributors

Coderz Point

License

Licensed under MIT

Package Sidebar

Install

npm i vista-table-react

Weekly Downloads

1

Version

1.1.10

License

ISC

Unpacked Size

4.68 MB

Total Files

5

Last publish

Collaborators

  • coderz.point01