twtable

Reactjs table module

Why to use twtable module ?

Steps to configure twtable in project

import TWTable from "@twister19/twtable";

<TWTable
  headers="{headers}"
  data="{data}"
  filter="{true}"
  pagination="{true}"
  pageSize="{4}"
  heading="Demo Table"
/>

const headers = [{"column": "name","displayname": "Name", "display": true},
{"column": "job","displayname": "Job", "display": true},
{"column": "department","displayname": "Depertment", "display": true},
{"column": "team","displayname": "Team Strenth", "display": true},
{"column": "empId", "display":false},
{"button": true, "displayname":"Button1", "display":true, "column":buttonClicked}];

Headers attributes

NOTE: There can be multiple button type columns in a table

const data = [{"name":"Ashish", "job":"SoftWare Engineer", "department":"MB", "team":3, "empId":1},
{"name":"Nishant","job":"Business","department":"Data2C", "team":4, "empId":2},
{"name":"Mukesh","job":"Banker","department":"Data2C", "team":5, "empId":3},
{"name":"Shashi","job":"Home Maker","department":"Data2C", "team":7, "empId":4},
{"name":"Kanika","job":"Business","department":"Data2C", "team":9, "empId":5}];

Server Side Pagination

Twtable tag

<TWTable
  headers="{headers}"
  data="{getdata}"
  filter="{true}"
  pagination="{true}"
  pageSize="{4}"
  heading="Demo Table"
  serversidePagination="{true}"
/>

'data' will be a function

const getdata = async (twtrequest) => {
  var data = await axios.post(
    "http://yourwebsite.com/api/employee/info",
    twtrequest
  );

  var res = {
    data: data.data.empdata, // Data type Array
    recordCount: 40, // Total record count
  };

  return res;
};

'twtrequest' Strucure

{
  "pageSize": 10,
  "currentpage": 1, // For fist page currentpage will be 0
  "userfilters": { "name": "Ashish", "designation": "developer" },
  "arrangement": { "column": "name", "order": "asc" }
}

Sever-side pagination example

Website Link: https://ashishtondon.github.io/twtable-serversidepaging-demo/

Source Code: https://github.com/AshishTondon/twtable-serversidepaging-demo

To Do List