cds-snc
contribution: responsive data tables
Prerequisites | Prérequis
- [x] I've read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions
- [x] I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
Which component or pattern is this contribution for? | Quel composant ou quelle configuration cette contribution vise-t-elle?
Data Table | Tableau de données
Describe your contribution. | Décrivez votre contribution
Back in 2018 DTO partnered with HC/CFIA/TC/EC to work on their health and safety recalls and this led to a mobile first solution exploration for tables. The following year DTO partnered with CRA on their contact us page and continued to refine the design. During the development of the contribution model with PP, DTO pushed forward with a simple CSS solution to meet basic, core needs and could be used by all departments. Unfortunately, this valuable solution isn't widely adopted due to it's provisional nature.
Mobile first table cards in GCWeb:
- https://wet-boew.github.io/GCWeb/components/gc-table/gc-table-en.html
The responsive cards are currently used by CRA in their contact us table, see the Assistance by telephone section and open an expand-collapse:
- https://www.canada.ca/en/revenue-agency/corporate/contact-information.html
We're currently proposing this mobile card table solution for the tariff searchable table, so users on mobile can easily search while out shopping:
- Proposal: https://test.canada.ca/experimental/jmtesting/can-us-tariffs/list-of-products-25-tariffs.html
- Live (have to right scroll on a small device): https://www.canada.ca/en/department-finance/news/2025/03/list-of-products-from-the-united-states-subject-to-25-per-cent-tariffs-effective-march-4-2025.html
Research summaries from related projects (not specifically about the just table as they cover everything contributing to success)
- https://design.canada.ca/research-summaries/recalls-research-summary.html
- https://design.canada.ca/research-summaries/cra-contact-us-research-summary.html
Jennifer Mealing (me!) at DTO was the design lead on this piece and has been part of the project since the start, so feel free to contact with any questions or additional information requests.
Hello!
I'm currently working on a GCDS DataTable component in a separate repository.
I'm building it in each of the frameworks separately since it seemed more straight-forward than wrapping it in stenciljs.
What is the full set of features that would be useful in a GC DataTable?
