@twister19/twtable

twtable

Reactjs table module

Why to use twtable module ?

• Client-side Pagination
• Server-side Pagination
• Search filter
• Download option excel, csv
• support custom styling

Steps to configure twtable in project

• Import twtable in project repository

  import TWTable from "@twister19/twtable";

• Adding table view

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

• headers and data are only two required attributes. In headers attribute twtable requires header struture if the table and data attribute is used for data set input.

  • 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

    Attribute	Require	Describtion
    Column	true	The Column value should be same as one of the attribute name in 'data'. And in case of button or link it should be evet object.
    displayname	false	Disply header of the column
    display	true	if True, Column will be displayed.
    button	false	This attribute should be added for button or link column. 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}];

    Client side Paging Example

    
• TWTable tag attributes

  Attribute	Require	Describtion	Version support
  headers	true	Json, As described in above point	1.5.4 +
  data	true	Json OR Function, JSON for client-side pagination and Function for Server-side pagination	1.5.4 +
  pagination	false	Boolean, defualt value false. True for adding pagination in table	1.5.4 +
  filter	false	Boolean, defualt value false. True for adding serach box in table.	1.5.4 +
  tableClass	false	String, Can add custom CSS to table using classes	1.5.4 +
  serversidePagination	false	Boolean, if true table will fetch data from API	1.5.4 +
  defaultstyle	false	Boolean, Default value true. If false twtable will include default css	1.5.4 +
  heading	false	String, Table heading	1.5.4 +
  pageoption	false	Array, array of number	1.5.4 +
  downloadableConfig	false	JSON, three optional attributes Attribute Description download Boolean, Default is True. If false, Download option will be off. reportfn String OR Function, Defualt value 'twtable' then twtable will handle download options. If function, the function will be called on download option click. reportOption Array, Array of type of report you want to have download options. Defulat value is ['csv', 'excel'] (only these two type of report handled by twtable. User can have more options. But with 'reportfn' attribute as function.).	1.6.0 +

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

Functionality	Work Status
Server side Pagination	In Progress
Table Style	TO DO
Convert html table to twtable	TO DO
user defined field for sleep time before sending out request to server on keystroke in server side pagination. Functionlity will contol request to be sent to server after each keystroke.	TO DO