We are using the Scroller plugin for our jquery data table to allow virtual scrolling. However, we have requirement to support text wrapping inside a cell, as user would like to view the entire text instead of truncated one. I observed that it does not wrap the text by default. Is there a way to support this feature? Any possible workaround?

Fiddler
https://jsfiddle.net/Vimalan/2koex0bt/1/

html Code:

<table id=example class=display cellspacing=0 width=100%></table>

js code:

var detailsSample = DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations.

var dataList = [];



for (var i=1; i<=500; i++)

{

    var dataRow = {};



    dataRow.ID = i;

    dataRow.FirstName = First Name  + i;

    dataRow.LastName = Last Name  + i;



    if (i%5 ==0)

    {

        dataRow.Details = detailsSample;

    }

    else

    {

        dataRow.Details = Large text +i;

    }

    dataRow.Country = Country Name;



    dataList.push(dataRow);

}



$('#example').DataTable( {

                data:                       dataList,

        deferRender:    true,

        scrollX:                true,

        scrollY:        200,

        scrollCollapse: true,

        scroller:       true,

        searching:          false,

        paging:                 true,

        info:                   false,

        columns: [

                { title: ID, data: ID },

                { title: First Name, data: FirstName },

                { title: Change Summary, data: LastName},

                { title: Details, data: Details, width: 400px  },

                { title: Country, data: Country }               

            ]

    } );

Expectation

In the above table, the Details column should always have a width of 400px and the text in that column should wrap.

Any suggestion will be greatly appreciated.