Edit Table
A simple React table to edit tabular data either with a REST API or through variables and functions:
Another simple example:
; var data = id: '1' name: 'Test1' email: 'test1@test.com' description: 'Bla 1' id: '2' name: 'Test2' email: 'test2@test.com' description: 'Bla 2' id: '3' name: 'Test3' email: 'test3@test.com' description: 'Bla 3' ; Component { var fields = name: 'Name *' email: 'Email *' description: 'Description' ; return <EditTable name="users" url="/api/users" fields=fields data=data />; }
Fields
There are many fields that can be used by default and new ones can be created easily. This is the most important configurable part of your app. They will manipulate and display your data for better integration. Full list of properties for reference:
var fields = first: // any name here header: 'first' // For the table header name: 'first' // The field (and data key) name placeholder: 'first' // The text to show as placeholder type: 'text' // For validation and manipulation required: false // Self-explanatory. Parses the 'header *' if omitted readonly: false // Only display it, but cannot edit it // Validates the data as it's edited // Transformation for displaying data ;
Read the full fields documentation to know how to use them properly:
Data format
The data retrieved should have a particular format: an array of elements, where each element is an object with keys as the field name and value as the value for that instance. Each element is required to have a unique id (the format of it doesn't matter):
var data = id: '1' name: 'Test1' email: 'test1@test.com' description: 'Bla 1' id: '2' name: 'Test2' email: 'test2@test.com' description: 'Bla 2' id: '3' name: 'Test3' email: 'test3@test.com' description: 'Bla 3' id: '4' name: 'Test4' email: 'test4@test.com' description: 'Bla 4' ;
This format is the one expected in case you pass down the data as a property or in case you retrieve it through the API.
API
By default it is a simple REST API:
var api { this; } { this; } { this; } { this; };
Use Cases (Examples)
Edit Table is really flexible, and while it was initially thought for a simple REST API now it's configurable deeply. Let's start with the default and easy case though:
REST API
For a simple REST API you can pass only the url:
; Component { var fields = name: 'Name *' email: 'Email *' description: 'Description' ; return <EditTable url="/api/users" fields=fields />; }
To make it token-based, you can do it just passing the token (code simplified):
var token = ; // Using http://github.com/franciscop/cookies.js<EditTable url="/api/users" token=token fields=fields />;
And to use your own authentication method, you would overwrite the method auth
within the API:
var { data = data || {}; if // Using http://github.com/franciscop/cookies.js dataauthtoken = ; ;}<EditTable url="/api/users" auth=auth fields=fields />;
Local Manipulation
We also support not using a REST API. For instance, let's store the data within a variable (no persistence):
; Component { super; thisstate = data: id: '1' name: 'Test1' email: 'test1@test.com' description: 'Bla 1' id: '2' name: 'Test2' email: 'test2@test.com' description: 'Bla 2' id: '3' name: 'Test3' email: 'test3@test.com' description: 'Bla 3' id: '4' name: 'Test4' email: 'test4@test.com' description: 'Bla 4' ; } { this; } { var fields = name: 'Name *' email: 'Email *' description: 'Description' ; var data = thisstatedata; var update = thisupdate; return <EditTable fields=fields data=data update=update />; }
Bake your own
To make your own persistence model, just overwrite the API. This is the footprint of them:
var api = { /* write your own */ } { /* write your own */ } { /* write your own */ } { /* write your own */ };<EditTable fields=fields api=api />;