React Antd Dynamic Data Table

This is a React component developed based on antd ui.

Features

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

Installation

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

Usage

App.js

import Datatable from 'react-antd-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} />
      </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 --- | --- | --- 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