search

vincjo / datatables

A toolkit for creating datatable components with Svelte
https://vincjo.fr/datatables
MIT License
372 stars 15 forks source link

Column visibility #35

Closed jt196 closed 1 year ago

jt196 commented 1 year ago

Is there any way to change the visibility of a column? I'm working with about 5 columns, and would like to hide 2 of them when the screen with is reduced to mobile/tablet size.

I seem to be able to pass class into the Th components, but CSS display: none doesn't apply for some reason.

vincjo commented 1 year ago

It seems to work with media queries I made an example: https://vincjo.fr/datatables/test/media-query (you must downsize the viewport to see the change)

".maskbable" class is added in Th, ThFilters and td

    @media (max-width: 1200px) {
        .resizable {
            width: 280px;
        }
        .resizable :global(.maskable) {
            display: none;
        }
    }
jt196 commented 1 year ago

Awesome dude, I got it working too - little mix up with the "resizeable"/"resizable" spelling there. Nice! This would be super helpful in the docs.

Tabulator I think has a column collapse option in their API from memory, but this is just fine.

vincjo commented 1 year ago

thanks for the advice will think about it