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}];
-
- 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 |