This widget provides an easy to use and accessible grid for data organization with screen reader support.
Widget based on HtmlTable of the Mootools More Package!
Similar to Mootools HtmlTable. Create a new grid by using the following command:
var grid = new AccessibleGrid({ properties: { border: 1, cellspacing: 3 }, gridContainer : container, gridname:'Bodydata', headers: ['Name', 'Firstname', 'Sex', 'Height (cm)', 'Weight (kg)'], rows: [['Porter', 'Oliver', 'male', '172', '87'], ['Cooper', 'Jack', 'male', '145', '56'], ['Brown', 'Ruby', 'female', '189', '110'], ['Bush', 'Alfie', 'male', '175', '75'], ['Fletcher', 'Jessica', 'female', '112', '45']], zebra: true });
To integrate the grid into your site define a container
var container = $('tabl');
and then add the grid to this container
grid.inject(container);
Sorting is also possbile.
grid.enableSort();
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus