How to use React Composite Table
The package gives you a general table component for ReactJS projects.
Table uses async actions to filter, order and edit table data.
Define a table
Let's create your first table (eg.: UserTable for list and edit users).
These are the steps:
- define your table columns with an array
- collect your table data
- call your table with previously defined columns and collected data
Rules:
- You need to define your update action for each editable field separately
Example (UserTable)
If you have the following data (e.g.: list of users) for the table:
[
0: {
id: 9,
username: "testadmin",
email: "admin@example.net",
name: "Test Admin",
roles: {
"SUPER_ADMIN",
"MANAGER"
}
}
1: {
id: 13,
username: "firsteditor",
email: "editor@example.net",
name: "First Editor",
roles: {
"EDITOR"
}
}
]
And want to show ID, username and name attributes in the table:
; // You have to write all of your actions and add to the as a props; { ifthispropsallUsers const columns = label: 'ID' name: 'Id' value: 'Id' filterable: true filterType: 'text' filterableProperty: 'Id' editable: false sortable: true sortableProperty: 'Id' label: 'Username' name: 'username' value: 'username' filterable: true filterType: 'text' filterableProperty: 'username' editable: false sortable: true sortableProperty: 'username' label: 'Name' name: 'name' value: 'name' filterable: true filterType: 'text' filterableProperty: 'name' editable: true updateFunction: thispropsupdateUserNameField sortable: true sortableProperty: 'name' ; return <Table2 data=thispropsallUsers columns=columns onDeleteRow=thispropsdeleteRow /> ; else return <span className="icon-spinner icon-spinner-large"></span> ; } null updateUserNameField deleteRowUserTable;
For package developers
Steps:
- Clone github repository to your local computer
- Go to the library folder and run 'npm run build' to make a build and watch modification
- Open your project and include the library with 'npm link react-composite-table'