Prevent DataTable from collapsing Columns?

pgorbas

I set my dataTable to scroll:

$('#data-table').DataTable({
    destroy: true,
    aaData: res.data,
    aoColumns: [
        { "sTitle": "Order ID", "mData": "OrderID", "sClass": "left" },
        { "sTitle": "Order Date", "mData": "OrderDate", "sClass": "left" },
        { "sTitle": "First Name", "mData": "FirstName", "sClass": "left" },
        { "sTitle": "Last Name", "mData": "LastName", "sClass": "left" },
        { "sTitle": "Patient ID", "mData": "LicenseNumber", "sClass": "left" },
        { "sTitle": "Quantity", "mData": "Quantity", "sClass": "right" },
        { "sTitle": "Total Amount", "mData": "TotalAmount", "sClass": "right" },
        { "sTitle": "Application Type", "mData": "PersonType", "sClass": "left" },
        { "sTitle": "Expiration Date", "mData": "ExpiryUtc", "sClass": "right" },
        { "sTitle": "Reason", "mData": "Reason", "sClass": "left" },
    ],
    scrollX: true,   //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<         
    scrollY: 300,   //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    scrollCollapse: true,
    responsive: true,
    colReorder: false,
    keys: true,
    select: true
});

But often if the initial view is too narrow, instead of presenting the data with a horizontal scroll bar. instead the data is shown with the first column have the detail "+" button and one or more columns are hidden. How can I force the dataTable NEVER to collapse data columns into the detail "+" section?

Also something is often hiding the horizontal scroll bar. If I have the dataTable showing with the horizontal scrollbar and no columns collapse, then manually resize the browser, often the H scrollbar disappears and then never comes back except WHILE resizing I will see a brief flash of the H scrollbar. Do you know what css draws the H scrollbar and how to force it to always show when present?"

P,S, - please update this forum to allow pasting of images directly into the post like you can do on Stack Overflow, or at least allow files and images to be uploaded from local storage, don't make us have to find some hosting service to upload our files and images to. Your "Attach image/file" button is grossly misnamed as it dosn't allow you to attach anything, instead it mearly is another name for an url link to another hosting service.

kthorngren

How can I force the dataTable NEVER to collapse data columns into the detail "+" section?

I might be missing something but having responsive: true, will cause columns to be removed (or inserted) as the page size changes. I've not used responsive with scrollX so not sure what the expected behavior is. Have you tried removing this form the config to see if the page behaves as you desire?

https://datatables.net/extensions/responsive/

Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.

BTW I was able to drag and drop the above image without the need to find a hosting service.

Kevin

allan

How can I force the dataTable NEVER to collapse data columns into the detail "+" section?

You can tell DataTables not to collapse columns using the classes described here.

Do you know what css draws the H scrollbar and how to force it to always show when present?"

I'm a little confused. It will show when present. Do you mean you want it to show even when it isn't actually active (i.e. no scrolling)?

Your "Attach image/file" button is grossly misnamed as it dosn't allow you to attach anything, instead it mearly is another name for an url link to another hosting service.

Click the button next to that one (looks like a file rather than the picture icon). The forum allows either.

In response to Kevin's point:

I've not used responsive with scrollX so not sure what the expected behavior is. Have you tried removing this form the config to see if the page behaves as you desire?

They kind of solve the same issue to my mind. Responsive should "win" since it will collapse columns to the point when scrolling isn't required. Only if you have enough columns which are forced to be shown, would scrolling become active.

Allan

pgorbas

kthorngren, if I set responsive: true, then while the columns expand, the Header no longer syncs with the table.

Allen, either the button that looks like a pic or looks like a page has the same functionality pasting an image from clipboard has no response, saving the file locally and then dragging the file into the message, or either of the button.upload sections has no response, and the upload button inputs will not accept a local path.

tangerine

Error - sorry.

kthorngren

Looks like you are using Bootstrap. I built a basic responsive test case with Bootstrap:
http://live.datatables.net/mukomonu/1/edit

The headers seem to stay inline with the columns when resizing the page. Maybe you can update or create a test case showing the issue.

With Chrome the I'm able to drag an image to the page:

What browser are you using?

Kevin

pgorbas

Closing Issue.

No solution found.

allan

As Kevin pointed out, if you have responsive: true then the correct behaviour is for DataTables never to have a horizontal scrollbar. If you want the scrollbar, use responsive: false or simply don't set it (since false is the default).

If that isn't then laying out correctly for you, please link to a test case showing the issue so I can check it out. The key thing would be to make sure you have width="100%" or style="width:100%" in the table tag.

Allan