For this exercise, Create new Javascript class (MyDataTable) that extendsYAHOO.widget.ScrollingDataTable class (see http://yui.github.io/yui2/docs/yui_2.9.0_full/docs/YAHOO.widget.DataTable.html)

Create new class in a separate Javascript file MyDataTable.js

Implement following functionality in the derived class:

1. Implement data formatter to display data ion each cell in an editable input box

(see http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/datatable/dt_quickedit.html)

The data inside of each cell should be displayed (formatted) in editable input box (not when you click on the cell)

2. a. After the datatable is created, and the data is loaded, add a div inside the table following all data rows, with text Click here to add new row

The "Add new row" button/div (it does not have to be a button, just a div with the text inside it) should be displayed inside the table after all data rows are displayed, and directly bellow them.

2.b. Add event handler on click on this div to dynamically add new row of data to the datasource associate with it.

The new row should be added to the table immediately on click on that "Add new row" button/div. The event handler should update the datasource and refresh/update the data table to reflect data with the new row.