Design System Table Styles

[chachasikes]

Feature

Have a suggestion for a feature?

• [X] Describe the feature DCC needs an HTML table for rendering content.

The Design System needs a table component for rendering tables

Here is a brainstorm of features that have come up for different kinds of tables so far:

• good UX on mobile & tablet devices
• accessible
• translatable
• appropriate for different volumes of content
• sticky headers (side and top)
• easy to use
• easy to integrate - works in Design System WordPress stacks - static sites (a.k.a. headless), current State Template themes, WordPress 5.9+, Design System Publishing, Classic editor, React UIs and many other editors currently & planned to be in use at the State
• A single class addition will enable valid, accessible HTML markup to render
• attributable - easy to
• downloadable as CSV
• printer-friendly
• convertible to PDF (if you print it out - need to confirm accessibility of Save as PDF on multiple devices & hardware)
• header colors
• header layouts - subtle, legible
• table style guide for the design system
• programmable

We use a data table in the DCC Cannabis Local Ordinances data viz. Would like a base table style + ability to provide custom code "underneath it"

• Main table styles = design system table styles (versioned)
• Custom styles = special modifications to the table that will not cause scope competition when users are applying CSS on a variety of systems - where the markup for the entire project may be available on every page due to system & resource limitations.

Team

• [ ] Scope out how much effort it will take to build

• We need something up and working today that has at least decent mobile behavior & some QA testing.

• Then: need a design review

• Inquire with the Design System governance group on asking various Design System teams if they have created a table yet & aggregate those examples here or in the Design System github.

• Confirm if the name and class are going to be ds-table

• Make the CSS includable and versionable in npm if not already

• Document this & include how to access or alter the header or styles using the accessible color system of the CA Design System.

[chachasikes]

Update:

We need this now for the campaign toolkit.

The plan:

• take latest version of DS table component code: https://github.com/cagov/design-system/tree/main/components/table
• align with table work from 514-table work: https://github.com/cagov/cannabis.ca.gov/tree/514-table/src/css/table
• put component in this new dist structure - (see https://github.com/cagov/design-system/issues/324#issuecomment-1205808177)
• adjust for client needs
• after launching v1 of feature ... document it
• this will likely include refinement on the component with a site update or two
• if DS knows that there are others making tables, hope that they connect us - (if we had a contrib airtable or coda doc from a coda form, this could be DIY - hopefully this is going to come from CDT/Yesenia this or next quarter)
• submit PR to design system repo, possibly collide with another contribution
• require facilitation to negotiate the feature - request some sort of thread, discussion or working group on just one component: tables.
• hope the PM will help facilitate documentation to publish the feature

[chachasikes]

See also https://github.com/cagov/design-system/issues/923

[chachasikes]

Did some more work on this in 514-table branch.

Still no code instances that really want this table, we are releasing a grid layout instead for the campaign toolkit.