Multiline datarow

Murphy013

Hi all,

I have a DataTable with many columns. The width of all columns exceeds the display width and users have to use the scrollbar to view all columns.
Ofc, I could add new table rows, but then I can't use search in columns. Alternating row background could also be an issue.
Is it possible that the datarow will be shown in multiple lines?

Regards

P.S.: Therefore I can't provide a link/code.

Murphy013

It should look in that way:

kthorngren

Check to see if you have nowrap on the table tag. See the Styling docs for more details. Make sue you have style="width:100%" on the table tag as shown in this example.

Kevin

Murphy013

Hi Kevin,

unfortunately it keeps the datarow in a single line. My goal is to show a datarow as the image above shows.
However, i figured out a way how it works, including working search functionality:

  var table = $('#example').DataTable({
    
    data: data,
    columns: [
      { "data": "position" ,
        render: function ( data, type, row ) {
            if (type === 'display') {
              return '<b>Position</b><br/>' + row.position + '<br/><b>Office</b><br/>' + row.office;
            }
            return row.position;
        }
      },
      { "data": "office", "visible" : false },
      .
      .