react-material-dynamic-data-table v0.2.6

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

Propertys Object

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

Dropdown Referance Function Perameters

License

MIT