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