<rtable> component Demos
Sample data used for the demos
[
{ "id": 1, "name": "Fay May", "age": 24, "card": "red", "gender": "female", "email": "faymay@enersave.com", "credit": 3429.92},
{ "id": 11,"name": "Estelle Palmer", "age": 24, "card": "green", "gender": "female", "email": "estellepalmer@enersave.com", "credit": 825.87 },
{ "id": 21, "name": "Lacy Holt", "age": 21,"card": "blue", "gender": "female","email": "lacyholt@enersave.com","credit": 3956.81},
{ "id": 31, "name": "Antoinette Grant", "age": 49, "card": "blue", "gender": "female", "email": "antoinettegrant@enersave.com", "credit": 1849.77},
{ "id": 41, "name": "Sherri Franco", "age": 54, "card": "red", "gender": "female", "email": "sherrifranco@enersave.com", "credit": 3495.8},
{ "id": 51, "name": "Bell Patterson", "age": 25, "card": "blue", "gender": "male", "email": "bellpatterson@enersave.com", "credit": 386.41},
{ "id": 61, "name": "Chris Holder", "age": 53, "card": "green", "gender": "female", "email": "chrisholder@enersave.com","credit": 3131.99},
{ "id": 71, "name": "Beasley Shaw", "age": 30, "card": "red", "gender": "male", "email": "beasleyshaw@enersave.com", "credit": 1986.29 },
{ "id": 81, "name": "Lesley Shelton", "age": 51, "card": "green", "gender": "female", "email": "lesleyshelton@enersave.com", "credit": -220.54},
{ "id": 91, "name": "Mccall Santos", "age": 26, "card": "blue", "gender": "male", "email": "mccallsantos@enersave.com", "credit": 3846.88},
{ "id": 101, "name": "Hardy Weaver", "age": 55, "card": "blue", "gender": "male", "email": "hardyweaver@enersave.com", "credit": 2414.67},
{ "id": 111, "name": "Kerry Douglas", "age": 59, "card": "blue", "gender": "female", "email": "kerrydouglas@enersave.com", "credit": 3559.74},
{ "id": 121, "name": "Ella Wallace", "age": 40, "card": "red", "gender": "female", "email": "ellawallace@enersave.com", "credit": -946.34},
{ "id": 131, "name": "Knox Wooten", "age": 20, "card": "green", "gender": "male", "email": "knoxwooten@enersave.com","credit": 3095.09},
{ "id": 141, "name": "Kellie Mccullough", "age": 57, "card": "green", "gender": "female", "email": "kelliemccullough@enersave.com", "credit": -120.03},
{ "id": 151, "name": "Lorrie Harding", "age": 49, "card": "green", "gender": "female", "email": "lorrieharding@enersave.com", "credit": 2241.86},
{ "id": 161, "name": "Nannie Woodward", "age": 32, "card": "green", "gender": "female", "email": "nanniewoodward@enersave.com", "credit": 353.26},
{ "id": 171, "name": "Tyler Mccoy", "age": 48, "card": "blue", "gender": "male", "email": "tylermccoy@enersave.com","credit": -371.47},
{ "id": 181, "name": "Herminia Roach", "age": 57, "card": "red", "gender": "female","email": "herminiaroach@enersave.com","credit": 577.87},
{ "id": 191, "name": "Salinas Graham", "age": 41, "card": "blue", "gender": "male","email": "salinasgraham@enersave.com","credit": 1711.81}
]
;
Loading required javascript libraries
<script src="javascripts/libs/underscore-min.js"></script>
<script src="javascripts/libs/riot.min.js"></script>
<script src="javascripts/tags/rtable.js" ></script>
Example 1 : Basic usage
HTML
<rtable id="tab1"></rtable>
CSS
#table-tab1 .col-id {background-color:#A4A4A4}
Javascript
var rtable = riot.mount('rtable#tab1', {data:list});
Result :
Example 2 : using sort and filter
HTML
<rtable id="tab2"
sort = "column:'credit', order: 'Up'"
filter = "column:'gender', value:'male'"
></rtable>
CSS
#table-tab2 .col-id {background-color:#A4A4A4, text-align:right}
#table-tab2 .header-sortUp {color:green; font-weight:bold}
#table-tab2 .header-sortDown {color:red; font-weight:bold}
Javascript
var rtable = riot.mount('rtable#tab2', {data:list});
Result :
Example 3 : renaming columns header and reordering
HTML
<rtable id="tab3"
sort = "column:'credit', order: 'Up'"
filter = "column:'gender', value:'male'"
colTitle = "name:Employee, id: Badge"
colList = "name, age, gender, id"
></rtable>
CSS
#table-tab3 .col-id {background-color:#A4A4A4, text-align:right}
#table-tab3 .header-sortUp {color:green; font-weight:bold}
#table-tab3 .header-sortDown {color:red; font-weight:bold}
Javascript
var rtable = riot.mount('rtable#tab3', {data:list});
Result :
Example 4 : Excluding some info
colExcluded is different of colList option.
colList permits you to rearrange the order of columns and let you 'not display' columns not specified
colExcluded removes the specified column from the array of data.
HTML
<rtable id="tab4"
sort = "column:'credit', order: 'Up'"
filter = "column:'gender', value:'male'"
colExcluded = "credit, email"
></rtable>
CSS
#table-tab4 .col-id {background-color:#A4A4A4, text-align:right}
#table-tab4 .header-sortUp {color:green; font-weight:bold}
#table-tab4 .header-sortDown {color:red; font-weight:bold}
Javascript
var rtable = riot.mount('rtable#tab4', {data:list});
Result :
Example 5 : <rtable> manipluation with javascript
HTML
<rtable id="tab5" styles="activeSortClass: SortedCol"></rtable>
<button onclick="sort('name');">Sort on Name</button>
<button onclick="sort('age');">Sort on Age</button>
Filter "Card" column on :
<select name="filterValue" onchange="filter(this.value);">
<option>---</option>
<option>red</option>
<option>green</option>
<option>blue</option>
</select>
CSS
#table-tab5 .col-id {background-color:#A4A4A4, text-align:right}
#table-tab5 .header-sortUp {color:green; font-weight:bold}
#table-tab5 .header-sortDown {color:red; font-weight:bold}
#table-tab5 .SortedCol {font-weight: bold; background-color: beige}
Javascript
var rtable = riot.mount('rtable#tab5', {data:list});
function sort(colName) {
rtable5[0].sortTable({column: colName, order:'Up' }).update();
};
function filter(filterValue) {
if (filterValue === '---') {
rtable5[0].clearFilter().update();
}else{
rtable5[0].filterTable({column:'card', value:filterValue}).update();
}
}
Result :
Filter "Card" column on :
Example 1 : Basic usage
HTML
<rtable id="tab1"></rtable>
CSS
#table-tab1 .col-id {background-color:#A4A4A4}
Javascript
var rtable = riot.mount('rtable#tab1', {data:list});
Result :
Example 2 : using sort and filter
HTML
<rtable id="tab2" sort = "column:'credit', order: 'Up'" filter = "column:'gender', value:'male'" ></rtable>
CSS
#table-tab2 .col-id {background-color:#A4A4A4, text-align:right} #table-tab2 .header-sortUp {color:green; font-weight:bold} #table-tab2 .header-sortDown {color:red; font-weight:bold}
Javascript
var rtable = riot.mount('rtable#tab2', {data:list});
Result :
Example 3 : renaming columns header and reordering
HTML
<rtable id="tab3" sort = "column:'credit', order: 'Up'" filter = "column:'gender', value:'male'" colTitle = "name:Employee, id: Badge" colList = "name, age, gender, id" ></rtable>
CSS
#table-tab3 .col-id {background-color:#A4A4A4, text-align:right} #table-tab3 .header-sortUp {color:green; font-weight:bold} #table-tab3 .header-sortDown {color:red; font-weight:bold}
Javascript
var rtable = riot.mount('rtable#tab3', {data:list});
Result :
Example 4 : Excluding some info
colExcluded is different of colList option.
colList permits you to rearrange the order of columns and let you 'not display' columns not specified
colExcluded removes the specified column from the array of data.
HTML
<rtable id="tab4" sort = "column:'credit', order: 'Up'" filter = "column:'gender', value:'male'" colExcluded = "credit, email" ></rtable>
CSS
#table-tab4 .col-id {background-color:#A4A4A4, text-align:right} #table-tab4 .header-sortUp {color:green; font-weight:bold} #table-tab4 .header-sortDown {color:red; font-weight:bold}
Javascript
var rtable = riot.mount('rtable#tab4', {data:list});
Result :
Example 5 : <rtable> manipluation with javascript
HTML
<rtable id="tab5" styles="activeSortClass: SortedCol"></rtable> <button onclick="sort('name');">Sort on Name</button> <button onclick="sort('age');">Sort on Age</button> Filter "Card" column on : <select name="filterValue" onchange="filter(this.value);"> <option>---</option> <option>red</option> <option>green</option> <option>blue</option> </select>
CSS
#table-tab5 .col-id {background-color:#A4A4A4, text-align:right} #table-tab5 .header-sortUp {color:green; font-weight:bold} #table-tab5 .header-sortDown {color:red; font-weight:bold} #table-tab5 .SortedCol {font-weight: bold; background-color: beige}
Javascript
var rtable = riot.mount('rtable#tab5', {data:list}); function sort(colName) { rtable5[0].sortTable({column: colName, order:'Up' }).update(); }; function filter(filterValue) { if (filterValue === '---') { rtable5[0].clearFilter().update(); }else{ rtable5[0].filterTable({column:'card', value:filterValue}).update(); } }
Result :
Filter "Card" column on :