Accessible Grid 1.3

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!



Details

Author
3i1a4o
Current version
1.3
GitHub
mashalla/grid
Downloads
3913
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/Hash
    • /HtmlTable
    • /HtmlSort
    • /HtmlZebra
    • /Class.refactor
    • /Element.Delegation
    • /String.Extras
    • /Date
    • Core/MooTools

How to use

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

Parameters

  • properties: specify useful html properties
  • gridContainer: the containing DOM element of this grid
  • gridname: heading above the grid
  • headers: the column headers of the grid
  • rows: content of the cells in the rows
  • zebra: if neighbour grid rows should be coloured differently for enhanced visibility

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();

Discuss

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