Resizable on Table (should be able to resize the column)

Resizable on Table (should be able to resize the column)

Need help with Resizable for the table. I am trying to resize the column width by placing the cursor in the <th>  I have the following piece of code to do the same
 

$(

 "#sampleTable>thead>tr>th" ).resizable({

create:

function (event, ui) { },

handles:

'e' ,

autoHide:

true ,

// set correct COL element and original size

start:

function (event, ui) {

var colIndex = ui.helper.index() + 1;

colElement = table.find(

 "colgroup > col:nth-child(" + colIndex + ")" );

colWidth = parseInt(colElement.get(0).style.width, 10);

originalSize = ui.size.width;

},

 // set COL width

resize:

function (event, ui) {

var resizeDelta = ui.size.width - originalSize;

var newColWidth = colWidth + resizeDelta;

colElement.width(newColWidth);

$(

 this ).css( "height" , "auto" );

}

});
 
 
But it does not work and getting the following error