AutoWidth - prefer last column

AutoWidth - prefer last column

tobias1985tobias1985 Posts: 4Questions: 1Answers: 0

Hey,
I'm happy with the autoWidth feature and I also know, how to set specified width for a column.

My problem is, that I want to autoWidth the last column. Sometimes, the data in the table is to much and the autoWidth for the first X columns is correct. Then, the last column has not enough space and line breaks the data.
But I want to autoWidth the last column and it's better to line breaks the first column.

Is it possible to do this? I didn't find any solution. I don't want to set a fixed width for the last column, because I don't know the possible width for the last column, because data can change.

Hope, somebody has a solution for this.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited February 2020 Answer ✓

    Without seeing what you have its hard to say specifically what to do. One option is to apply the white-space property. For example:
    http://live.datatables.net/yilovuni/1/edit

    Kevin

  • tobias1985tobias1985 Posts: 4Questions: 1Answers: 0

    Thx, this doesn't work for me. I don't know, why.
    It is not possible for me to create an example here, because I use serverside etc.

    But I can show you the live website:
    Go to: https://www.coinsbee.com/de/shop (you must use the german version of the website)
    Select "DE" from the region filter.
    Refresh the website.

    You see, the last column line breaks. But this is ugly because the 3 buttons must stay together.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    I might be missing it but did you add this to your style?

    td.no-wrap {
        white-space: nowrap;
      
    }
    

    Kevin

  • tobias1985tobias1985 Posts: 4Questions: 1Answers: 0

    Like you see in the source code:
    <td class=" no-wrap">...</td>

    This was done by your example-code:
    columnDefs: [
    {
    targets: -1,
    className: 'no-wrap'
    }
    ]

    But like you see, without any effect.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    That is not what I'm asking. Look at the CSS tab in my example. Did you add the below into your style section of the page?

    td.no-wrap {
        white-space: nowrap;
       
    }
    

    Just adding that class using className isn't the complete solution.

    Kevin

  • tobias1985tobias1985 Posts: 4Questions: 1Answers: 0

    Really sorry for my false. I know the nowrap attribute and didn't recognize, that the code add only a class name.

    I've added the css and this works! Thank you very much!

    If somebody has a similar problem:
    Afterwards, there was a problem with the responsive view, because it is not a column anymore, you need to fix this another way. I use bootstrap und fixed this with the row/col-classes.

This discussion has been closed.