jquery datatable - set column width and wrap text

Question

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.

JGV · Accepted Answer · 2016-09-28 08:28:38Z

45

Found the solution by wrapping the column data in a div and setting the white-space, width css properties for the div.

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

JS

$('#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" },
                { title: "Country", data: "Country" }               
            ],
            columnDefs: [
                {
                    render: function (data, type, full, meta) {
                        return "<div class='text-wrap width-200'>" + data + "</div>";
                    },
                    targets: 3
                }
             ]
    } );

CSS

.text-wrap{
    white-space:normal;
}
.width-200{
    width:200px;
}

answered Sep 28, 2016 at 8:28

JGV

5,2079 gold badges57 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Patrick Thorpe Over a year ago

I had no idea about "render" until I saw your answer. Extremely useful! Solved a lot of other issues I was having with columns. Seems to me to be the most reliable way to get them to behave in the way you want.

Risheekant Vishwakarma Over a year ago

After apply these , My search text box disappear from dataTable , how to work with both .

JGV Over a year ago

@Rishi, set searching: true

Risheekant Vishwakarma Over a year ago

@VimalanJayaGanesh , This will give me a global filter but before apply above propery I have filter on column basis, means there is textbox in each column

JGV Over a year ago

@Rishi, The above code does not include column level filter. How are you adding column level filter in your code? Could you please share your code in a fiddler?. I can look at how to implement column with as well as displaying column level filter.

|

Keith · Accepted Answer · 2016-09-23 18:43:49Z

17

Not sure if you add in stylesheets or not, but set your table-layout to fixed and add in the white-space. Currently you are using white-space:no-wrap which negates what you're trying to do. Also I set a max-width to all your td's so this will happen whenever there is overflow.

Add this at the end of your jQUery

https://jsfiddle.net/2koex0bt/5/

$(document).ready(function(){
    $('#example').DataTable();
    $('#example td').css('white-space','initial');
});

If you want to just use the api, do this ( add in anymore CSS to change the styling ).

If you want to do it with CSS, do this:

table {
  table-layout:fixed;
}
table td {
  word-wrap: break-word;
  max-width: 400px;
}
#example td {
  white-space:inherit;
}

edited Sep 23, 2016 at 18:43

answered Sep 23, 2016 at 18:16

Keith

4,1512 gold badges34 silver badges61 bronze badges

8 Comments

JGV Over a year ago

Is the any api available in jquery datatable to handle this? +1 from me for a possible solution.

Keith Over a year ago

so you wanna do this all in jquery and not use css?

JGV Over a year ago

$('#example td').css('white-space','initial'); seems like word wrap is not working during scroll. In the fiddler, please scroll to more than ID value 50...

Keith Over a year ago

Yes, it looks like on scrolling past 38 it takes off any CSS. Not sure how to fix that.

JGV Over a year ago

No problem. I still have this task in my list and exploring the options...

|

Shahid Malik · Accepted Answer · 2021-07-07 13:49:19Z

0

Js Code:

           'columnDefs': [{
                render: function (data, type, full, meta) {
                    let instaText = (data != null && data.length > 25) ? data.substr(0, 25) : data == null?"":data;
                    return '<div class="text-overflow" title='+'"'+ data +'"' +'>' + instaText + '</div>';
                },
                targets: [27]
            }],

CSS:

   {
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 80%;
   }

answered Jul 7, 2021 at 13:49

Shahid Malik

17115 bronze badges

Collectives™ on Stack Overflow

jquery datatable - set column width and wrap text

3 Answers 3

6 Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related