Responsive Mobile

[flexsoluciones]

Responsive datatable on mobile like

https://www.tailwindtoolbox.com/components/responsive-table thanks

[flexsoluciones]

new DataTable('#example', { responsive: true, rowReorder: { selector: 'td:nth-child(2)' } });

[pereorga]

This can be done easily with CSS. Example: https://pccd.dites.cat/fonts (code):

table td,
table th {
    display: none;
}

/* Show only the title column on the smallest devices */
table td:nth-child(3),
table th:nth-child(3) {
    display: table-cell;
}

/* For screens that are a bit bigger, show the author column too */
@media (min-width: 400px) {
    table td:nth-child(1),
    table th:nth-child(1) {
        display: table-cell;
    }
}

/* For larger screens, show all columns */
@media (min-width: 640px) {
    table td,
    table th {
        display: table-cell;
    }
}

[johanneswilm]

@pereorga So should this be added to the CSS in the library somehow? As a separate stylesheet or alike? Or is this something you think individual projects should use themselves? @flexsoluciones Is that what you were looking for?

[pereorga]

I'm not sure if this should be added to the library, I would say it can be implemented by the projects themselves.

Maybe it could be added as an example, as part of the documentation.

[pereorga]

FWIW, my code example works with JS disabled too (Simple DataTables is obviously not initialized, but the HTML table is rendered responsive without the need of JS). I imagine that wouldn't work if the responsiveness is provided by the library.

[johanneswilm]

Maybe it could be added as an example, as part of the documentation.

Yes, I think maybe we should add a demo that includes this CSS as an example.

Btw - @pereorga if you specify either the scrollY or the fixedWidths option, it will render the table in the dom and take measurements on each column to see the size of everything. It does that whenever update() is being called (given certain settings). If you haven't done that yet, I think we need to test whether hiding columns with CSS will influence that. Measurements are automatically retaken when resizing the browser window, so that part should be covered.,

[pereorga]

Btw - @pereorga if you specify either the scrollY or the fixedWidths option, it will render the table in the dom and take measurements on each column to see the size of everything. It does that whenever update() is being called (given certain settings). If you haven't done that yet, I think we need to test whether hiding columns with CSS will influence that. Measurements are automatically retaken when resizing the browser window, so that part should be covered.,

I could not find fixedWidths in the documentation. I found fixedColumns, which I tested locally and at least in my example it does nothing (so it works well with this CSS, but I fail to understand what this is supposed to do)

I tried scrollY, and it worked well with these CSS rules, but for some reason it duplicated the filters I have in the headings (but this behavior seems to be unrelated to this CSS example)

[johanneswilm]

@pereorga Thanks for the contribution and the testing. I have now added a demo with this.

[lorvent]

but since most people using mobiles than PCs these days, responsiveness should be default...not optional imo.

we should add that somewhere inside the project css or if people use bootstrap framework, atleast its responsiveness should be utilized.

thanks,

[johanneswilm]

@lorvent Datatables are used in many scientific and business production systems where mobile phones are rather irrelevant. I think we better not push a specific ideology on all users.

[lorvent]

ok...i get your point (eventhough i don't agree with it as i don't have knowledge of what you are saying, thats my fault, not yours)

how about a seperate style sheet? those who need it, can add.