Responsive rules based on table width
Responsive rules based on table width
I've read through all the documentation, but I'm not seeing a way to accomplish what I'm trying to do.
I have a table that I'm attaching the responsive extension to. The table has 15 columns. 7 of the columns, I always want to show when the table width is above a certain breakpoint. The responsive breakpoint system works based on the viewport, not the table size so it does not do what I need.
I looked into using the responsive-resize
event, but it fires after the resize and you can't use the columns
argument to override the column behavior. Also, there's no API for manually overriding the column to show up as a column.
Is there a good way to accomplish this?
Also, is there a way to apply a max-width to a column at various table width breakpoints?
I ask because one of the related problems I'm having is I have a particular column that at times can contain some long strings. The responsive extension ends up making the column much wider than I'd prefer, which ends up causing other columns to drop. I'd really like to set some max constraints to columns based upon the table width.
For example, if the table is less 800px, make column 2 have a max width of 200px.
If I could constrain the columns based on the parent table width, this would resolve my issues.
Thanks!