YUI3 Datatable with freez option

Here is the first draft of YUI3 datatable with freez option, more updates coming in this way!

var tabledata = [
    {"name":"Ravi","month":"January","salary":1460,"ding":490,"dong":980,"bong":950,"kong":540,"rang":1870,"bang":1980,"king":460,"sing":220,"ming":1370,"bing":400},
    {"name":"Kavi","month":"February","salary":570,"ding":10,"dong":890,"bong":1470,"kong":610,"rang":1920,"bang":1630,"king":410,"sing":170,"ming":630,"bing":850},
    {"name":"Bavi","month":"March","salary":510,"ding":580,"dong":1290,"bong":560,"kong":670,"rang":980,"bang":230,"king":570,"sing":270,"ming":30,"bing":1020},
    {"name":"Navi","month":"April","salary":540,"ding":1840,"dong":1010,"bong":200,"kong":750,"rang":1480,"bang":1500,"king":1970,"sing":1220,"ming":1050,"bing":1790},
    {"name":"Davi","month":"May","salary":1740,"ding":730,"dong":1030,"bong":1370,"kong":170,"rang":1090,"bang":1280,"king":1780,"sing":500,"ming":470,"bing":280},
    {"name":"Cavi","month":"June","salary":220,"ding":830,"dong":1040,"bong":1820,"kong":620,"rang":1130,"bang":1050,"king":290,"sing":500,"ming":20,"bing":560},
    {"name":"Aavi","month":"July","salary":1010,"ding":270,"dong":1940,"bong":900,"kong":870,"rang":1930,"bang":840,"king":1300,"sing":1160,"ming":1860,"bing":1450},
    {"name":"Eavi","month":"August","salary":1330,"ding":1560,"dong":1950,"bong":0,"kong":1800,"rang":1060,"bang":960,"king":1670,"sing":300,"ming":1590,"bing":520},
    {"name":"Favi","month":"September","salary":830,"ding":70,"dong":440,"bong":1720,"kong":1830,"rang":420,"bang":1590,"king":1780,"sing":200,"ming":1550,"bing":1040},
         {"name":"Ravi","month":"January","salary":1460,"ding":490,"dong":980,"bong":950,"kong":540,"rang":1870,"bang":1980,"king":460,"sing":220,"ming":1370,"bing":400},
    {"name":"Kavi","month":"February","salary":570,"ding":10,"dong":890,"bong":1470,"kong":610,"rang":1920,"bang":1630,"king":410,"sing":170,"ming":630,"bing":850},
    {"name":"Bavi","month":"March","salary":510,"ding":580,"dong":1290,"bong":560,"kong":670,"rang":980,"bang":230,"king":570,"sing":270,"ming":30,"bing":1020},
    {"name":"Navi","month":"April","salary":540,"ding":1840,"dong":1010,"bong":200,"kong":750,"rang":1480,"bang":1500,"king":1970,"sing":1220,"ming":1050,"bing":1790},
    {"name":"Davi","month":"May","salary":1740,"ding":730,"dong":1030,"bong":1370,"kong":170,"rang":1090,"bang":1280,"king":1780,"sing":500,"ming":470,"bing":280},
    {"name":"Cavi","month":"June","salary":220,"ding":830,"dong":1040,"bong":1820,"kong":620,"rang":1130,"bang":1050,"king":290,"sing":500,"ming":20,"bing":560},
    {"name":"Aavi","month":"July","salary":1010,"ding":270,"dong":1940,"bong":900,"kong":870,"rang":1930,"bang":840,"king":1300,"sing":1160,"ming":1860,"bing":1450},
    {"name":"Eavi","month":"August","salary":1330,"ding":1560,"dong":1950,"bong":0,"kong":1800,"rang":1060,"bang":960,"king":1670,"sing":300,"ming":1590,"bing":520},
    {"name":"Favi","month":"September","salary":830,"ding":70,"dong":440,"bong":1720,"kong":1830,"rang":420,"bang":1590,"king":1780,"sing":200,"ming":1550,"bing":1040}
];


YUI.add('freez-datatable', function(Y) {

    function FreezDataTable() {
        FreezDataTable.superclass.constructor.apply(this, arguments);
    }

    var Y = Y;
    FreezDataTable.NAME = "freez-datatable";
    FreezDataTable.ATTRS = {
        data:{
            value:tabledata,
            setter:function(value) {
                var cols = Y.Object.keys(value[0]);
                var fcols = this.get('freezedColumns');
                var ufcols = [];
                Y.Array.each(cols, function(item) {
                    if (Y.Array.indexOf(fcols, item) == -1) {
                        ufcols.push(item)
                    }
                })
               // console.log(value, cols, fcols, ufcols)
                this.set('columns', cols);
                this.set('unFreezedColumns', ufcols)
                return value;
            }
        },
        freezedColumns:{
            value:[]
        },
        unFreezedColumns:{
            value:[]
        },
        columns:{
            value:[]
        },
        height:{
            value:300
        },
        width:{
            value:600
        }


    }

    Y.extend(FreezDataTable, Y.Widget, {
        freezedTable:null,
        unFreezedTable:null,
        freezedContainer:null,
        unFreezedContainer:null,
        ftable:null,
        uftable:null,
        initializer:function() {
        },
        renderUI:function() {
            var cbox = this.get('contentBox');
            //this.set('width', cbox.get('outerHeight'))
            this.freezedContainer = Y.Node.create('<div class="fcontainer"> </div>')
            this.unFreezedContainer = Y.Node.create('<div class="ufcontainer"></div>')
            cbox.append(this.freezedContainer);
            cbox.append(this.unFreezedContainer);


        },
        bindUI:function() {
        },
        syncUI:function() {
           this.ftable = new Y.DataTable.Base({
                columnset: this.get('freezedColumns'),
                recordset: this.get('data')
            })

            this.uftable = new Y.DataTable.Base({
                columnset: this.get('columns'),
                recordset: this.get('data')
            })
            this.ftable.plug(Y.Plugin.DataTableScroll, {
                height:  (this.get('height')-16)+"px"
            });
            this.ftable.render(this.freezedContainer);
            this.freezedContainer.setStyle('width', (parseInt(this.ftable.get('contentBox').getStyle('width'))-18)+"px")
            
            this.uftable.plug(Y.Plugin.DataTableScroll, {
                width: this.get('width')+"px",
                height: this.get('height')+"px"
            });
            this.uftable.render(this.unFreezedContainer);
             this.uftable.get('contentBox').one('.yui3-datatable-bd').on("scroll",this._handleScroll, this)
        },
        _handleScroll:function(e){
            var freezedbd = this.ftable.get('contentBox').one('.yui3-datatable-bd');
            freezedbd.set('scrollTop',e.target.get('scrollTop') )
        }
    })

    Y.FreezedDataTable = FreezDataTable;

}, "0.0.1", { requires:['datatable','widget']})

YUI({filter:'min'}).use('freez-datatable', function(Y) {
    var dt = new Y.FreezedDataTable({srcNode:'#test', freezedColumns:['name','month']});
    dt.render()
})

<html>
<head>
    <title>dasfadsf</title>

     <script type="text/javascript" src="build/yui/yui-min.js"></script>
     <script type="text/javascript" src="js/datatable.js"></script>
    <style type="text/css">
        .fcontainer {
           position:absolute;
           z-index:12;
            width:155px;
            overflow:hidden;
        }
        .yui3-skin-sam .yui3-freez-datatable-content .yui3-datatable caption{padding:0}
    </style>
</head>

<body  class="yui3-skin-sam">
<div id="test">    
</div>
</body>
</html>