Simpltry Grid Demo

This is a simple grid component that takes a set of data builds a normal table, then adds sorting, grouping, summing and averaging. It is still very much a work in progress. I would like to add asynchronous updating and a whole host of features

example markup:

<p id="grid" simpltry_widget="grid" simpltry_options='
    data:{headers: ["cat","hat","count"],
    rows: [
            ["red","baseball", "1"],
            ["black", "fedora", "3"],
            ["blue", "fedora", "3"],
            ["blue", "bowler", "2"],
            ["red", "bowler", "5"],
            ["black", "baseball", "101"]
          ]},
    beforeEachRow: 
        function(tr, i) {
            tr.appendChild(Builder.node("td", {}, [i+1]))
        },
    beforeHeaderRow: 
        function(tr) {
            tr.appendChild(Builder.node("th"))
        },
    beforeFooterRow: 
        function(tr) {
            tr.appendChild(Builder.node("td"))
        }'>
</p>

Above you can see what the "data" format should look like. It has two properties headers and rows. headers is an array of strings, those get built as the table headers. rows is an array of arrays where each array represents a row in your table. You can also pass in some callbacks to be called while the table is being rendered. For instance beforeEachRow gets called before the data is put into the tr, in our example we are simply printing out the row number.

css classes

The color picker is builds a dynamic table. Simpltry tries to put css classes on different parts of the widget. Here are a list of the classes that you can use. For any information about which element these classes get placed on there is two things you have to do. First use Firefox and second install the firebug extension. That allows your to inspect your DOM after it has been built, not just the page source that gets downloaded.

A good starting off point is the style sheet we used for this demo. demo style sheet

Simpltry Widget

Simpltry Grid Widget

simpltry_widget="grid"

css classes