Datatables on small mobile device

tacman1123

Link to test case:
https://dt-demo.survos.com/congress/api_grid
Description of problem:

I'd like to run datatables on a smaller screen, and am wondering if there's anything in 2.0 that might be helpful. In particular, column widths and thinks like wrap-lines and ellipsis currently happen within the td itself, wrapping the content in a div (from https://codepen.io/walickialbert/pen/eYEoRvj)

/*//https://codepen.io/walickialbert/pen/eYEoRvj*/
.modern-way {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

/*//https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text*/
.line-limit-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-24rem {
    max-width: 24rem;
}

And then in each td:

<div class="modern-way line-limit-4 max-24rem ">

Is there a way to apply these classes on the td via the api? All of my columns are created in javascript.

And in general, is there anything else to think about regarding rendering on a small screen? For example, on a small screen I might want only show fewer columns, or reorder then so that the 'responsive' plugin renders differently?

I usually use datatables for administrative tasks that happen on a desktop, but as more people use their phones for everything, I'd love to make sure I'm using datatables in the best way for small screens.

Obviously, in my particular case, I need to move the searchPanes to the top, or re-think searchPanes altogether and maybe use searchBuilder. I love datatables+searchPanes, but that combo is tough on small screens.

Thanks for any insights.

allan

Is there a way to apply these classes on the td via the api?

A rendering function which wraps the content in the div you want would be the way I would recommend doing this.

For example, on a small screen I might want only show fewer columns, or reorder then so that the 'responsive' plugin renders differently?

As you say, Responsive is the plugin to remove columns as needed for mobile display. You can use classes or priority to tell it what to show / hide on small screens.

SearchPanes does need some work for responsive display. It is on my radar.

Allan

allan

Also, if you haven't seen it already, you might be interested in this blog post on using ellipsis from a rendering function.

Allan

tacman1123

Thanks -- I can't believe I missed the 'classes' and 'priority' configuration in the responsive plugin.

On a related note, as you're updating the documentation, please consider showing alternatives to the indexed-based configuration. Because my columns are dynamic (and created in javascript), I never know what the column number is. I would much rather reference the column by a data attribute, e.g. targets: ['name','age'].

  { responsivePriority: 1, targets: 0 },

I realize when I create the column, I can also set things like responsivePriority, but there are few examples of that, and I end up with code like

        columnDefs: this.columnDefs(searchFieldsByColumnNumber),

because the examples are show with column numbers. Anyway, I digress.

Regarding ellipsis, while it's interesting to do string manipulation in the javascript, it seems like there should be a css-only way to do it as well, in the same way you dropped the stripe classes in favor of the css n-th element.

tacman1123

Is there a way to dynamically handle searchpanes based on screen size? The examples here are hard-coded (columns-1, then in javascript move the whole searchPanes block).

https://datatables.net/extensions/searchpanes/layout#Displaying-Panes-Vertically

This works on the desktop, but when it's mobile I think searchPanes need to be different. I know you mentioned it's on your radar, but if there's an solution in the meantime, it'd be great to be in the docs.

My gut feeling is that I should hide searchPanes altogether in mobile, and use searchBuilder, even though it lacks the cool cascading totals. Alas, while it's possible to create searchPane values from the facet data, I haven't been able to figure out how to do that same with searchBuilder.