Package Exports

vs-react-datatable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vs-react-datatable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VS React Data Table

VS React Datatable is a fast and flexible DataTable which provides lot of custom filtering options like Overall Search Filter, Column Wide Search Filter and Column Wide Range Filter.

VS React Data Table

Installation

npm i vs-react-datatable
    (or)
yarn add vs-react-datatable

Simple Implementation

 import React from  'react';
 import DataTable from  'vs-react-datatable'
 
 function  App()  {
    let  pageCount  = [10,  20,  50];
    let  rowData  = [
        {  title:  "name",  sortable:  true,  width:  10  },
        {  title:  "age",  width:  10  },
    ];
    let  columnData  = [
        ["John",  "30"],
        ["Eric",  "43"],
    ];
    return (
        <div>
            <DataTable
                rowData={rowData}
                columnData={columnData}
                pageCount={pageCount}
                overallSearch
            />
        </div>
        );
}
export default App;

Simple Implementation of VS React Data Table

Advanced Implementation

import React from  "react";
import DataTable from  "vs-react-datatable";
import datas from  "./data.json";
function  App()  {
    let  pageCount  = [10,  20,  50];
    let  rowData  = [
        {  title:  "Name",  sortable:  true,  filter:  'search'  },
        {  title:  "Date",  sortable:  true,  filter:  'search'  },
        {  title:  "Company",  sortable:  true,  filter:  'search'  },
        {  title:  "Email",  sortable:  true,  filter:  'search'  },
        {  
            title:  "Values",  
            sortable:  true,  
            filter:  'search',  
            textAlign:  'center'  
        },
        {  
            title:  "Large_values", 
            sortable:  true,  
            filter:  'range',  
            placeholder: ['min',  'max'],  
            textAlign:  'center',  minifValue:  true  
        },
    ];
    let  columnData  =  datas.data;
    return (
        <div>
            <DataTable
                rowData={rowData}
                columnData={columnData}
                pageCount={pageCount}
                displayIndex
            />
        </div>
    );
}
export default App;

Advanced Implementation of VS React Data Table

Usage

Props

Prop Name	Type	isRequired	Note
rowData	ArrayOfObject	Required	Header Data Values
columnData	ArrayOfArray	Required	List Of Column Values
pageCount	Array	Optional	List Of Values for Page Count
displayIndex	Boolean	Optional	If true will Display SerialNumber
overallSearch	Boolean	Optional	Enables Table wide search
columnfilter	Boolean	Optional	Enables column wide search

RowData Object Properties

Note:

minifyValues: Minify Values Thousand(k) and Millions(M).
textAlign: This is used to align text for each column. Pre defined values center | right.
filter: This Properity is used to enable column level search. Pre defined values search | range search -> enables Text Search in Picrular Column | range -> enabled Numeric range search between two values

ColumnData Array Properties

Format:

    [
        ["value1", "value2", "value3", .....],
        ["value1", "value2", "value3", .....],
        ["value1", "value2", "value3", .....],
        .
        .
        .
    ]