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