Table column widths

scottbdr

https://live.datatables.net/paforuve/2/edit?html,css,output

Hi. I'm struggling to understand how datatables calculates column widths when they are specified in the Javascipt. I've linked to an example where they are not even close - not only to the specified value, but in proportion to one another. I know table formatting is imprecise at best - I've dealt with it in many development contexts so I'm not at all expecting perfection - just some relative control, which is not what I feel like I'm getting from datatables currently. The sample above in particular has an issue with a wrapped column ("Description") collapsing to a width much smaller than the width specified for it, and I've found no way to work around it yet.

Questions:
- are there best practices with regard to setting the table width, or the space that contains it if the table is 100%?
- do some CSS units of measure work better than others? i.e. percent vs px vs em
- is it best to set all columns if you set any, or better to just set ones you want to make sure are set in a particular way?
- does it help to set all columns to a total width that is expected width of the table itself? (say table is going to be 500px, should all of the column widths add up to 500px?)
- any other best practices for getting this right?

Thanks in advance for any suggestions you might have - appreciate your help!

Scott

rf1234

Just to share my personal experience with you, Scott.

I never set fixed column widths but let Data Tables decide on it. In certain cases I want a minimum column width that corresponds with one line of text for example. In those cases I render the column content with style "white-space:nowrap" and set the line breaks manually. Hence Data Tables will size the column so that each line fits in neatly.

You can also set a minimum column width like this:
You replace all spaces within the first x characters with non-breaking spaces. This also works really well.

Here is an example for the first case: I want to display categories with their name and their value. A new line for each category. Each category must fit in one line.

{   data: "ctr_category",
    render: function ( data, type, row ) {
        var ix=0;
        var returnString = '';
        while (row.ctr_category[ix]) {
            if (ix !== 0) {
                returnString += ',<br>';
            }
            returnString +=
                ( row.ctr_category[ix].category_name + ': ' +
                  row.ctr_category[ix].value );
            ix++;       
        }
        if (returnString <= '') {
            return lang === 'de' ? '<p class="text-danger-plus">Bitte mindestens \n\
                   eine Kategorie auswählen.</p>' : '<p class="text-danger-plus">\n\
                   Please select at least one catgegory.</p>';
        }
        return '<span style="white-space:nowrap">' + returnString + "</span>";
    }
},

And an example for the latter: Minimum column width should be 40 chars in case the content is at least 40 chars in any of the lines of the columns. If not it is of course less than that.

{   data: "ctr.ctr_name",
    render: function ( data, type, row ) {
        var namePartlyNBS = data.substr(0,40).replace(/ /g, ' ') + data.substr(40);
....

Make sure your column headings match with whatever you choose in column rendering.

allan

I'm struggling to understand how datatables calculates column widths when they are specified in the Javascipt.

There are a whole bunch of things that happen to affect column widths in the browser. The first is that you have width: 100% on the table. So the browser is always going to attempt to make the table that size, overriding column widths as needed. Even that simple fact isn't cut and dry though - in your example when I open it up, the table content cannot fit in 100% width of the standard viewport, so it overflows horizontally.

The defined column widths are a "guide" to both DataTables and the browser - they are not considered to be absolute - if you want that, then you need to use table-layout: fixed in your CSS. That will give you absolute control over the table columns and can be see in this updated example.

The way DataTables works out column widths is it creates a "worst case" table and applied the assigned widths to it. The "worst case" is the header cells, plus a single row that contains the longest string from each column. With the widths assigned to it, DataTables renders that in the browser (hidden) so as to utalise the browser's table layout algorithm. It will then read the column widths back and apply them to the table the user sees. That's why the widths for the columns, if you "Inspect" them, do not match the ones assigned (unless you use a fixed layout table).

In short it is difficult and there are a lot of competing factors!

Allan

scottbdr

Allan, rf1234, thanks for taking the time to response - you have given me a few avenues to further explore. I think the fixed layout will definitely help, but I'll need to experiment more. My biggest challenge is that I don't know what content I'll be rendering - it comes from an external source and can have any number of columns with cell values from a couple characters to longer paragraphs. So padding the cells to a minimum width isn't a great option.

Any other folks out there with more ideas on formatting table widths? I was surprised to see the relative lack of content on this in the forum - any references to a good thread would be appreciated as well.

Thanks, Scott

rf1234

So padding the cells to a minimum width isn't a great option.

The option I suggested only does that for strings that are longer than the minimum. If you define 40 characters and all strings you want in one line are shorter the 40 characters won't be relevant. Only for strings that are longer than that.

If you don't know the contents' structure or its meaning I would simply do nothing and rely on the default column rendering of Data Tables. You should also consider using the "responsive" extension.

allan

Agreed. I think the relative lack of threads on the topic is because DataTables handles it in a reasonably sensible way, particularly for unknown content (it's all unknown to me as the DataTables author - I don't know what data devs are going to use it to display!). There are options such as controlling the wrapping via CSS, scrolling or Responsive. To my mind, a width would only be used when you know what the content is going to be.

If you want a min-width for a column, use a renderer to put the content in a div and assign a min-width to it. That's how I've handled larger blocks of text before, when you don't want it collapsing down to fit into the viewport.

Allan

allan

Another option that comes to mind, if you don't know how large a block of data for a column is going to be, is to use the ellipsis renderer.

Allan