Semantic-ui: [Table] Add "Device Only" Classes

[ShimShamSam]

Something along the lines of "[desktop|tablet|mobile] only [table|row|column]"

Often you want to hide extraneous info columns on mobile and tablet, but show a lot of info columns on desktop.

[rodsnjr]

Any progress or work around in this ?

In mobile devices you dont always need a lot of the information show on the table.

[jlukic]

Use media queries, standard CSS works great here

[timothyarmes]

While we _can_ use media queries it's a really shame that Semantic UI doesn't offer this basic requirement. It would be nice to simply do this:

<div class="computer only">...</div>

Just as we can when laying out columns. As it is we have to manually create them by searching through the semantic code in order to find the various cut off points variables for mobile, tablet and computer devices.

[brendon]

I agree, and not just for tables. I wanted to have Icon + Text buttons on an indexbar at the top of the page on tablet or greater devices and just Icons for mobile devices. I ended up having to add these rules in manually:

@media only screen and ( max-width: @largestMobileScreen ) {
  .not.mobile {
    display: none !important;
  }
}
@media only screen and ( min-width: @tabletBreakpoint ) {
  .only.mobile {
    display: none !important;
  }
}

I can't see a reason why the grid device visibility functionality couldn't be loosened so that it can apply to any element? http://semantic-ui.com/collections/grid.html#device-visibility

[andrewleith]

I totally agree that this is needed. It seems quite natural to me that SUI would offer this by default.

[squareleaf]

I submitted a PR to help address this after dealing with it in a project. https://github.com/Semantic-Org/Semantic-UI/pull/4378

[brendon]

Thanks @squareleaf :) That looks great!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.