Table update

[flacoman91]

Changes

• fixed bug with right aligned column class
• fixed bug with scrollable table class
• added story to clearly show column options
• Added link to valid values for the column widths

How to test this PR

1. Go to demo link table example

Screenshots

Notes

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-04-15 15:55 UTC

[natalia-fitzgerald]

@flacoman91

Can you make a slight formatting change to that story to make it complete sentences and just 2 paragraphs?

Column configuration options

Columns accept objects with header, isAlignRight, width (percent as string), isCellWordBreak, isCellDisableWordWrap, isHeaderWordWrap.

Column width maps to the CFPB width utility classes (u-w{n}pct). Valid values for width are 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 75, 65, 25, 15, 66, 33.

Source: https://cfpb.github.io/design-system/development/helper-classes-and-mixins#width-utilities-helper-classes.

And, can you change "Long Character Set" to sentence case: "Long character set"?

For the left navigation and the in-page naming, change the naming for consistency with DSR standards. Do not repeat the name of the core component in the story name.

Current content in DSR:

Update:

• Table

  • Standard
  • Responsive stacked
  • Responsive with horizontal scroll
  • Striped
  • Right-aligned
  • Pagination
  • Fixed-width columns
  • Long character sets
  • Column configuration options

  See example here: https://cfpb.github.io/design-system-react/?path=/docs/components-verified-links--overview