- Issue created by @alan.cole
- 🇦🇺Australia alan.cole
PR: https://github.com/civictheme/uikit/pull/639
- Options to solve this were either split the JS implementation so table JS is a base utility that can be applied in any component, or implement a dependency on table for basic-content so that any time basic-content is used it will include table libraries.
- Implementing the JS split (given the current structure of civictheme) would likely require adding a [data-table] attribute to any div that is, or may contain a table. This attribute could be added to both atom/table and molecule/basic-content and anywhere else a table may be used (this could also include paragraph components as they too use basic-content styling).
- The benefit on tables in base is the dependencies within components are simplified, but the drawback is that more styles and JS exist within the base library whether they are used or not.
- This implementation has a drawback of needing to use the drupal theme machine name core/components.civictheme--table within the SDC. Up until now the drupal theme name is not assumed to be civictheme and could change without affecting the UI Kit, however as SDC is a drupal concept and dependencies rely on providing the theme name, this is likely to get murkier the more we include drupalisms in UI Kit.
- 🇦🇺Australia danielgry
Verified and tested on latest dev version
Testing Results:
1. Confirmed that tables render correctly for desktop devices as well as mobile devices without any issues
2. Verified the behaviour matches the expected appearance shown in the UI Kit Storybook for all viewports (XXL-XS)Screenshots:
Desktop view
Mobile view