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