Search code examples
layoutyuiyui-datatable

Can i change the layout of YUI datatable?

My web application uses YUI datatables to show records to the user.

I dont want it to be a rows and columns layout. Can I use my own layout for example all data of a record within a single row and single column. Consider StackOverflow questions page.

Is it possible for me to do like this with YUI datatable?

Solution

  • With a single row/column, you rather lose most of the benefits of the table, but if you really want to use a DataTable, try a custom cell formatter.

    The example is a good place to start: http://developer.yahoo.com/yui/examples/datatable/dt_formatting.html

    Your DataSource can contain objects rather than stings/numbers for each cell and then you can render your complex cell markup from it.

    e.g.

    complexLookingCellFormatter = function(elLiner, oRecord, oColumn, oData) { 
     // oData is normally text, but objects work too...
     elLiner = "<h1>oData.yourTitle</h1><strong>oData.yourText</strong>";
}