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
  • Simple Implementation
  • Advanced Implementation
  • Usage
    • Props
    • RowData Object Properties - Note:
    • ColumnData Array Properties

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

| Prop Name | Type | isRequired | Default |--|--|--|--|-- | Title | String | Required | - | minifyValue | Boolean | Optional | False | sortable | Boolean | Optional | False | width | Number | Optional | - |filter | Pre Defined Values | Optional | null | placeholder | String | Optional | null | textAlign | Pre Defined Values | Optional | null

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", .....],
		.
		.
		.
	]