react-material-dynamic-data-table

React Material Dynamic Data Table

This is a React component developed based on material ui.

Features

• Pagination
• Filters
  • string, number, date, date range
  • Static dropdown
  • Dynamic dropdown
  • Multi Select
  • Reset Filters

Installation

npm i --save react-material-dynamic-data-table

Usage

App.js

import Datatable from 'react-material-dynamic-data-table/dist';
import Service from './service';

function App() {
  const propertys = [
    {key: "employee_id", value: "Employee ID", search: {type: 'string'}},
    {key: "created_date", value: "Created Date", search: {type: 'date-range'}},
    {key: "age", value: "Age", search: {type: 'number'}},
    {key: "city", value: "City", search: {type: 'dropdown',value:"city_id", label: "city_name", api: (new Service()).citysData}},
    {key: "gender", value: "Gender", search: {type: 'select', options:[{value:'male', label:'Male'},{value:'female', label: 'Female'}]}}
];

  return (
      <div>
          <Datatable propertys={propertys} api={(new Service()).getAllData} search={true} />
      </div>
  );
}

export default App;

service.js

import axios from 'axios';

export default class Service {
    api = "http://your-domain-name/";
    
    /*
        this function is used to get all grid data.
        @parms start int (start page number)
        @parms limit int (records per page)
        @parms search object (it is a object contains search information)
        @returns callback(status, rows, totalRecords) if status false send error
    */
    getAllData = (start, limit, search, callback) => {
        axios.post(this.api+'getAll', {"start": start*limit, "length": limit, "search": search}) 
        .then(function(data) {
            callback(true, data.data.data, data.data.totalRecords);
        })
        .catch(function(err) {
            callback(false, err, 0);
        });
    }

    /*
        this function is used to get dropdown information
        @returns callback(status, rows) - if status false send error
    */
    citysData = (callback) => {
        axios.get(this.api+'getCitys')
        .then(function(data) {
            callback(true, data.data.data);
        })
        .catch(function(err) {
            callback(false, err);
        });
    }
}

props send to component

Prop	data type	Description
search	boolean	if it true show the search block else not.
api	function	Pass function Referance. This function should be like this -- APIFunctionName(start, limit, search, callback)
propertys	array of objects	check below keys are the property object keys.

Propertys Object

Prop	data type	Description
key	string	Response Json Keys Place Here
value	string	This is a display label
search(optional)	Search Object	if it is not set Search is not applied for this key

Search Object

Prop	data type	Description
type	ENUM(string, number, date, date-range, dropdown, select)
value	string	if type is dropdown you have to pass value to use in dropdown
label	string	if type is dropdown you have to pass value to show in dropdown
api	function	Pass function Referance. This function should be like this -- DropdownFunctionName(callback).
options	array of objects	each object contains label and value

API Referance Function Perameters

key	data type	Description
start	number	this is page number - page number starts from 0
limit	number	Howmany records show in a page
search	object	this is a dynamic object. this is constructed based on key in properts object
callback	function	callback(status: boolean, data: [Objects], totalRecords: number) -- if status false send data empty([]) and totalRecords is Zero(0).

Dropdown Referance Function Perameters

key	data type	Description
callback	function	callback(status: boolean, data: [Objects]) -- if status false send data empty([]).

License

MIT