Last Column Width

[BrentHParticipant]

Is there a way to make the last column fill the rest of the table width? I have my table set to 100% width. I have actual pixel widths for most columns.

[Peter StoevKeymaster]

Hi BrentH,

Don’t set its width setting.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[BrentHParticipant]

Sorry, this doesn’t work for me. It just gives me a little column about 24 pixels wide.

  ...
        sortable: true,
        pageable: false,
        altRows: true,
        columnsResize: true,
        height: '100%',
        width: '100%',
        theme: 'ui-smoothness',
      columns: [
          { text: 'STRAP', dataField: 'strap', width: 200, align: 'center' },
          { text: 'Owner Name', dataField: 'name', width: 250, align: 'center' },
          { text: 'Site Address', dataField: 'sortableadd', displayField: 'address', width: 250, align: 'center' },
          { text: 'Last Trans. Date', dataField: 'lastsaledt', width: 105, align: 'center', cellsalign: 'center' },
          { text: 'Last Trans. Amt', dataField: 'lastsaleamt', width: 105, align: 'center', cellsalign: 'center' },
          { text: 'Just Value',      dataField: 'justval',     width: 100, align: 'center', cellsalign: 'center' },
          { text: 'Taxable Value', dataField: 'taxable', width: 100, align: 'center', cellsalign: 'center' },
          { text: 'Notes',                 dataField: 'note' }
        ]
...

[Peter StoevKeymaster]

Hi BrentH,

The last column fills the available space of the table. If it is small, then this simply means that you don’t have available space i.e your table’s current width is smaller or equal to the sum of your other columns width.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[BrentHParticipant]

Well, the scroll bar for the table is all the way to the right, but the column and table styling doesn’t reach that far.

If I were to remove the “width: ‘100%'”, the line showing the right edge of the table appears at the end of my last column. But I need the table to be 100%, so I can’t use this solution.

You will want to test this – because I don’t think it does what you think it should do with a width: ‘100%’.

In any case, I changed all of my column widths to percentages and it does fill the width of the table and is acceptable for my case.

Brent

[Peter StoevKeymaster]

Hi Brent,

Actually, I know what happens, but may be you expect something different. The last column without width fills the remaining space of the Table, if there is such. It does not matter whether your DataTable’s width is in percentages or not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[BrentHParticipant]

Here is what I am doing. It leaves a gap between the end of the last column and the right side of the table.

HTML
<div id="parcelTable"></div>

Jscript

$(document).ready(function () {
     $("#parcelTable").jqxDataTable(
    {
        sortable: true,
        pageable: false,
        altRows: true,
        columnsResize: true,
        height: 200,
        width: '100%',
        theme: 'ui-smoothness',
        rendered: function () {
            $(".viewDetails").click(function () { ViewDetails(); });
        },
        columns: [
          { text: 'STRAP', dataField: 'strap', width: 80, align: 'center' },  
          { text: 'Owner Name', dataField: 'name', width: 80, align: 'center' }, 
          { text: 'Site Address', dataField: 'address', width: 80, align: 'center' },
          { text: 'Last Trans. Date', dataField: 'lastsaledt', width: 40, align: 'center', cellsalign: 'center' }, 
          { text: 'Last Trans. Amt', dataField: 'lastsaleamt', width: 40, align: 'center', cellsalign: 'right' }, 
          { text: 'Just Value', dataField: 'justval', width: 40, align: 'center', cellsalign: 'right' }, 
          { text: 'Taxable Value', dataField: 'taxable', width: 40, align: 'center', cellsalign: 'right' },
          { text: '', dataField: 'note', cellClassName: 'notecolumn' }

        ]
    });
});

[BrentHParticipant]

It looks like I can’t use "text: ''", I have to use "text: ' '" .

When I do that it seems to work.

[Author]

Posts