Responsive table - Want no columns hidden unless viewing in smaller view-ports

leeopold

Hi there,

Really love the responsive table. I've run into a problem, however, and I hope someone can help me out:

The table I'm using only allows me to have 6 columns. But I have 7 columns in total, and thus the 7th column collapses in all cases, even when viewing on wider screens. I want the table to be as responsive as possible and collapse what it needs to when viewing with smaller screens, but I wish for the 7th column to show in all cases otherwise. So far, I can make the 7th column visible by using:

responsive: {
            details: false
        }

But then, when viewing on a smaller screen, all of the extra columns and rows which don't fit into the screen are no longer collapse-able or expand-able. They just hide completely.

I can't quite figure out my way around this.
Any thoughts? Thanks!

colin

Hi @leeopold ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

leeopold

Sorry about that---

Here's what I have:
http://live.datatables.net/pinixigu/1/

If the "details" bit is removed, it'll collapse as desired on smaller view-ports, but force the 7th column to hide even on the widest screens.
It doesn't seem to act this way in the test, unfortunately I may have to come back to it later to see what I can do about that. (Time to go to work.)

colin

Hi @leepold ,

Sorry if I'm being dim, but that test case looks like I'd expect. All seven columns are presents, the fixedHeader is behaving - and if I shrink the screen, either vertically or horizontally, both are still working as expected.

Please could you provide a step by step guide on how to reproduce the issue, and say what the results are at the end and what you'd expect it to be.

Cheers,

Colin

leeopold

Something new occurred to me, in that perhaps even though the div container in which the datatable is placed is large enough to accommodate all 7 columns, this table is designed to make everything collapsible at a certain width. In which case, the container perhaps is slightly too small, and I can't emulate what I'm asking about with the test case. I'd have to share my project instead (which I'd rather not, since it is a client's site and I'm a bit protective). I also can't make the container more wide as that'd just offset the entire layout.

So, my next question is, is there a way to alter in which width the datatable will begin collapsing so that I can make it able to be more wide? This would be fine on smaller view-ports too, because the table itself seems to shrink more than it needs to. (doesn't seem to take up 100% of the container width that it should, it also won't center)

I have thought of a different workaround but I'm still looking for something less gimmicky.

Thanks for reading!

leeopold

No worries about seeming dim, Colin, I'm very happy that you're willing to help. I must apologize for double-posting (last time I refreshed was 30 minutes before you posted, ach) and I also must apologize for having minimal time to create tests. I thought my description would've been enough but clearly I'm not completely understanding datatables, so we must go further.

If you're willing to check back later, I may simply create a mock page which is mostly the same as what I'm creating for my client. My above explanation might be exactly what you come up with though. (So if you think of any answers in the meantime I'm happy to hear it.)

Thanks again, I'll check back and post some more links later.

colin

Hi @leeopold ,

Ah, that's why I wasn't seeing it then. It shouldn't shrink the table until it needs to - it's possible perhaps that at some point it thinks it does need to, and then the container holding the table expands without Responsive realising. What you could try is adding a call to responsive.rebuild() and/or responsive.recalc() to get Responsive doing its sums again. Maybe add that into an initComplete, or some other point in your code when the page is fully loaded.

Hope that helps,

Cheers,

Colin

leeopold

Hi @colin ,

Hope you're still floating around. I tried what you suggested above with no changes. I managed to put together a test in the template I'm using, as well as some screenies with examples of what I'm seeing, and notes on the behavior I want. I'll start with those.

Here is a screenshot of what I see on my PC (larger view-ports), vs what I WANT to be seeing: https://i.imgur.com/ZgmQbti.png (top and bottom respectively). I can obtain the bottom example by turning off the collapsing ability (details) which is of course not feasible for mobile viewers, since the rest of the information hides.

Here's a screenshot of what I'm seeing on smaller view-ports or mobile view: https://i.imgur.com/PBfwZIb.png
This one is a huge problem because it's extremely inconsistent. At this point I can't tell if it's the table at fault or its container. Either way, it will not spread to 100% width despite it being told to. There is 15px padding on either side as per bootstrap, but that's not enough to account for how it looks. I also can't seem to center it. It's a shame because I don't think I'll be able to find or make something as responsive as this!

Here it is live: http://darasu.xyz/DatatableExample/datatable-ex.html
You'll notice that even if you hit inspect and close it, the tables width will change. Not the kind of behavior I want, haha.

I'm using this guy: https://datatables.net/extensions/fixedheader/examples/integration/responsive-bootstrap.html

allan

It looks like you are using Bootstrap 4.0.0 (it would be worth updating btw, they've fixed a bunch of stuff), but using the DataTables / Bootstrap 3 styling. If you use the download builder, select the Bootstrap 4 option for styling to get the right files.

Allan

leeopold

Hah, of course it'd be that! You're the best, @allan . Thanks so much for spotting that.

All of my width issues are solved, although the last column "Favourite?" still does not show when viewing on PC. My workaround is more feasible now, but I'm still open to any solutions regarding that.