{
       "description" : "jMaki DataTable",
         "type":"object",
         "properties": { 
          "columns" : {
             "type" : "array",
               "items" : { 
                 "type" : "object", 
                 "properties" : {
                    "id" : {"type": "string", "optional":true,},
                  "label" : {"type": "string"}
                 }
               },           
             "type" : "array",
               "rows" : { 
                 "type" : "object", 
                 "properties" : {
                    "id" : {"type": "string", "optional":true,},
                  "label" : {"type": "string"}
                 }
               }
           } 
         }      
  }

• clear - Clears all rows

jmaki.publish("/yahoo/dataTable/clear", { });

• updateRow - Updates the row with the given rowId with the data provided.

(1.3) Yahoo Data Table Extensions

TBD in jMaki 1.1

• addRows - The payload value passed to the widget is added to the the table and the filters will be applied.

(1.3) Ext and Yahoo Data Table Extensions

price'

71.72, change : 0.02, pchange : 0.03, lupdate : '9/1 12:00am'

{
     columns :[
        {'id' : 'company', 'label' : 'Company'},
        {'id' : 'price', 'label' : 'Price', sortable : false},
        {'id' : 'change', 'label' : 'Change'},
        {'id' : 'pchange', 'label' : '% Change'},
        {'id' : 'lupdate', 'label' : 'Last Updated'}
     ]
}

In the example above the column with the id price can not be sorted.

Subscribe Events

(1.3) Ext and Yahoo Data Table Extensions

jMaki Table Data Model

(1.2) Events

Note these events are still under development and are not all available as of the .9.4 release. We plan to add these soon

Rows events are published to the topic assigned to the given widget instance. Table events include:

(1.2) Data Model

(1.1) Ext and Yahoo Data TableExtensions^?

The Yahoo dataTable and the Ext Grid provide additional specialization on the core table model which allow for editors and renderers to be added on the individual columns.

{
     columns :[
        {'id' : 'company', 'label' : 'Company'},
        {'id' : 'price', 'label' : 'Price', renderer: 'usMoney'},
        {'id' : 'change', 'label' : 'Change', renderer: 'change'},
        {'id' : 'pchange', 'label' : '% Change', renderer: 'pctChange'},
        {'id' : 'lupdate', 'label' : 'Last Updated',renderer: 'italic'}
     ]}

Renderers and Editors are provided as public functions in the widgets.

Row Events

Note these events are still under development and are not all available as of the .9.4 release. We plan to add these soon

Rows events are published to the topic assigned to the given widget instance. Table events include:

r jMaki Table Data Model

(1.1) Examples

(1.1) Data Model

    columns ::= "["  {<column>} "]"
    column ::=  "{" "label : "  <string>,  "id" : <columnid> "},"
    columnid :: = <string>,
    rows :: = "["  {<row>} "]"
    row ::=  "{" [<rowid>] ,  "<columnid>"  :  <string> "}",
    rowid :: = "id : " <string>

As of version .9.5.3 To add rows at a given point you can provide an index where to add the rows like the following:

jmaki.addGlueListener("/yahoo/button/*", function(payload){
    jmaki.publish("/yahoo/dataTable/addRows", {index : 1, data : [{  title : 'Book Title y', author : 'Author 2', isbn: '4412', description : 'A Some long description'}]})
    });

Publish Events

• onSelect - Payload is {id : , topic : , type : 'onSelect' , data : }

{
  columns : [
   {id : 'company', 'label' : 'Company'}, 
   {id : 'price', 'label' : 'Price'}, 
   {id : 'change', 'label' : 'Change', 
   {id : 'pchange', 'label' : '% Change'}, 
   {id : 'lupdate', 'label' : 'Last Updated'}
  ], 
  rows : [
   {'company' : 'A Co',
      'price' : 71.72,
      'change' : 0.02,
      'pchange' : 0.03,
      'lupdate' : '9/1 12:00am'
     },
     {'company' : 'B Inc',
      'price' : 29.01,
      'change' : 0.42,
      'pchange' : 1.47,
      'lupdate' : '9/1 12:00am'
     }, 
     {'company' : 'C Group Inc',
      'price' : 83.81,
      'change' : 0.28,
      'pchange' : 0.34,
      'lupdate' : '9/1 12:00am'
     }, 
     {'company' : 'D Company',
      'price' : 52.55,
      'change' : 0.01,
      'pchange' : 0.02,
      'lupdate' : '9/1 12:00am'
     }                              
   ]
}

• addRows - The payload value passed to the widget is added to the end of the table.

jmaki.publish("/yahoo/dataTable/addRow", { index : 0 });

jmaki.publish("/yahoo/dataTable/clear", { });

TBD Subscribe Events

• insertRow - (not yet implemented)

Using Array of Values for Rows

The most common and easy case for data tables is to provide a set of column names and the data as an array of arrays where the order of the data in each row determines which column the data appears in.

Using Array of objects as Rows

You can also use an array of objects that are keyed to the column names:

 columns :[
                              {id : 'company', title : 'Company'}, 
                              {id : 'price', title : 'Price', renderer: 'usMoney'}, 
                              {id : 'change', title : 'Change', renderer: 'change'}, 
                              {id : 'pchange', title : '% Change', renderer: 'pctChange'}, 
                              {id : 'lupdate', title : 'Last Updated', renderer: 'italic'}
                              ]

The column names need a unique id which is then used in the data to associate it with a given row. The rows would be defined as an array of objects where the property names match the ids given for any given column id.

                               {'company' : 'A Co',
                                'price' : 71.72,
                                'change' : 0.02,
                                'pchange' : 0.03,
                                'lupdate' : '9/1 12:00am'
                               },
                               {'company' : 'B Inc',
                                'price' : 29.01,
                                'change' : 0.42,
                                'pchange' : 1.47,
                                'lupdate' : '9/1 12:00am'
                               }, 
                               {'company' : 'C Group Inc',
                                'price' : 83.81,
                                'change' : 0.28,
                                'pchange' : 0.34,
                                'lupdate' : '9/1 12:00am'
                               }, 
                               {'company' : 'D Company',
                                'price' : 52.55,
                                'change' : 0.01,
                                'pchange' : 0.02,
                                'lupdate' : '9/1 12:00am'
                               }                              
                              ]

This way you don't need to know the order of the data to get it to associate with the correct column.

Ext and Yahoo Data Table Renderers

• addRow - The payload value passed to the widget is added to the end of the table.

 jmaki.publish("/yahoo/dataTable/addRow", { data : [ {}, {}])

• removeRow

Subscribe Events

• addRow - The payload value passed to the widget is added to the table.
• insertRow - Insert the row which is the value of the payload at the index specified. Example :

 jmaki.publish("/yahoo/dataTable/insertRow", { index : 1, data : [ {}, {}])

Publish Events

• onSelect
• addRow
• onUpdate

Row Events

Rows events are published to the topic assigned to the given widget instance. Table events include:

args set to :

{
     columns :[
        {title : 'Company'},
        {title : 'Price'},
        {title : 'Change'},
        {title : '% Change'},
        {title : 'Last Updated'}
     ]}

and the value set to:

[
        ['A Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['B Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['C Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['D Company',52.55,0.01,0.02,'9/1 12:00am']
  ]

The Yahoo dataTable and the Ext Grid provide additional specialization on the core table model which allow for editors and renderers to be added on the individual columns.

{
     columns :[
        {title : 'Company'},
        {title : 'Price', renderer: 'usMoney'},
        {title : 'Change', renderer: 'change'},
        {title : '% Change', renderer: 'pctChange'},
        {title : 'Last Updated',renderer: 'italic'}
     ]}

Renderers and Editors are provided as public functions in the widgets.

-- Main.carlavmott - 08 Jun 2007

Discussion for jMaki Table Data Model

Example of the data model for release .9

{
   'columns' :[
        {'title' : 'Company', 'width' : 200, locked:false}, 
        {'title' : 'Price', 'width' : 75, 'renderer': 'usMoney'}, 
        {'title' : 'Change', 'width' : 75, 'renderer': 'change'}, 
        {'title' : '% Change', 'width' : 75, 'renderer': 'pctChange'}, 
        {'title' : 'Last Updated', 'width' : 85, 'renderer': 'italic'}
        ],
       rows : [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am']
    ]
}