Change styling based on screen size about active-table HOT 1 CLOSED

We primarily recommend developers to use the following approaches:

• The tableStyle property can be set with width and maxWidth properties that use %/vh/vw metrics that will automatically react to the parent dimensions. Make sure to also check out the preserveNarrowColumns property that defines the rule for preserving columns which exceed the minimum markup width.
• The cellStyle property can be set with fontSize that uses em/rem metrics which can help adjust the cell font size to the desired one.

A non reactive - but effective approach is to pre-compute the styling properties before passing them to the table, which enables the parent app to use any means of calculating the best values.

If you want to use media queries, they can be add to the component via the auxiliaryStyle property. (However, we do not recommend this approach as it may intervene with other styling properties and may result in undesirable styling) e.g:

auxiliaryStyle = `
  @media (max-width: 600px) {
    .cell {
      font-size: 10px;
      height: 38px;
    }
  }
`

If you have questions about reactive styling or suggestions for improvements, do not hesitate to add them in this thread or open up a new GitHub issue. Thanks!

from active-table.