Update table on sitewide products to use v3 component

[laflannery]

Description

When we were doing the massive DS component upgrades earlier this year the table component did not have a v3 equivalent, it does now. We need to update everywhere we are using the current table component.

Where are we using table?

• Benefits detail pages - Examples:
  • https://www.va.gov/pension/survivors-pension-rates/past-rates-2020/
  • https://www.va.gov/disability/compensation-rates/special-monthly-compensation-rates/past-rates-2023/
• VAMC Detail pages - Examples:
  • https://www.va.gov/pittsburgh-health-care/shuttle-schedule/
  • https://www.va.gov/bedford-health-care/programs/va-new-england-shuttle-schedule/
• Landing page:
  • No examples but this does have the capability so we should be sure the template is updated
• Resources and Support Detail page - Examples:
  • https://www.va.gov/resources/approved-fields-of-study-for-the-stem-scholarship/

Additional context

• Alignment:

  • It has also been noted that the alignment of the data in the existing tables is not consistent, some cells are right aligned, some are left, etc. All cells should be left aligned to follow the default alignment of the component.
  • No classes or custom alignment should be added to these <span> tags:

• Role

  • The component should not have role="table"

Acceptance Criteria

• [x] All tables on all above templates should use v3 table component
• [x] The tables should all use the bordered table
• [x] If available, the Table Caption should be passed to the table-title component prop
• [x] No custom styles, attributes, props, or classes should be added to the table or the contents of the table
• [x] Requires design review
• [x] Requires accessibility review

[randimays]

Pulling in as stretch for sprint 13.

[randimays]

Currently in production (with v1 tables), we lose some critical contextual information on smaller screens because the headers disappear.

400px

768px

1000px

Unfortunately upgrading to v3 bordered tables, this problem still exists:

400px

768px

1000px

I created a defect in the DST backlog to address this issue: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/3327

They initially suggested we set the stacked property in the table to false, but:

1) this doesn't make the headers stick throughout breakpoints 2) in some cases, the table will need to be horizontally scrolled which is not ideal 3) content is dynamic and if we set the stacked property we're setting it for every table without knowing whether it's the right solution

Slack thread with DST: https://dsva.slack.com/archives/C01DBGX4P45/p1727883538474889

Given that this is currently an issue in production, I still plan to release the changes to the tables to production with the expectation that this will eventually be addressed by the defect ticket I created, but @FranECross @jilladams holler if you disagree.

[jilladams]

I have no horse in the race and defer to @FranECross and @thejordanwood on UX grounds

[FranECross]

@randimays I agree with releasing to prod. Thanks for ticketing the DST defect!

[thejordanwood]

@randimays Releasing to prod is also fine with me.

[randimays]

Successfully validated in production. Closing as complete.