feat: create css-only responsive table #8098

araujogui · 2025-08-21T02:06:12Z

Description

Create CSS-only responsive table

Validation

Related Issues

Fixes #7656

Check List

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run pnpm format to ensure the code follows the style guide.
I have run pnpm test to check if all tests are passing.
I have run pnpm build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

vercel · 2025-08-21T02:06:19Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
nodejs-org	Error		Aug 27, 2025 9:36pm

Copilot

Pull Request Overview

This PR implements CSS-only responsive tables that adapt to different screen sizes using media queries and data attributes. The main change transforms tables from traditional grid layout on desktop to card-based layout on mobile screens.

Creates mobile-friendly table layouts that stack information vertically on small screens
Adds automatic data-label attributes to table cells via a remark plugin
Updates existing table component to use internationalized labels

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/ui-components/src/styles/markdown.css	Implements responsive table CSS with mobile card layout and desktop grid styles
apps/site/util/table.ts	Creates remark plugin to automatically add data-label attributes to table cells
apps/site/package.json	Adds required dependencies for markdown processing utilities
apps/site/next.mdx.plugins.mjs	Integrates the new table plugin into the MDX processing pipeline
apps/site/components/Releases/PreviousReleasesTable.tsx	Updates table component to use internationalized data-labels and fix rendering issues

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

apps/site/components/Releases/PreviousReleasesTable.tsx

apps/site/util/table.ts

packages/ui-components/src/styles/markdown.css

codecov · 2025-08-21T02:07:40Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.90%. Comparing base (a5ea254) to head (d9f70ff).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8098      +/-   ##
==========================================
+ Coverage   75.89%   75.90%   +0.01%     
==========================================
  Files         113      113              
  Lines        9459     9459              
  Branches      307      307              
==========================================
+ Hits         7179     7180       +1     
+ Misses       2279     2278       -1     
  Partials        1        1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

araujogui · 2025-08-21T02:10:26Z

apps/site/components/Releases/PreviousReleasesTable.tsx

-          <>
-            <tr key={release.major}>
-              <td data-label="Version">v{release.major}</td>
+          <Fragment key={release.major}>


This fixes the error Each child in a list should have a unique "key" prop.

avivkeller · 2025-08-21T11:00:36Z

apps/site/util/table.ts

(Shameless plug here, disclaimer: I wrote this package, so no need to use it if you don't want)

https://www.npmjs.com/package/remark-table-cell-titles

I think it's a good idea. Your implementation already has tests, etc., but let's see what the rest of the team thinks first

+1 for this package

avivkeller · 2025-08-21T11:04:03Z

Can you add text wrapping on the title?

araujogui · 2025-08-27T21:36:12Z

CC @nodejs/nodejs-website

avivkeller · 2025-08-27T21:43:22Z

apps/site/next.mdx.plugins.mjs

@@ -30,4 +32,5 @@ export const REMARK_PLUGINS = [
  remarkHeadings,
  // Calculates the reading time of the content
  readingTime,
+  remarkTableTitles,


nit: Add a comment above explain this, like all the other plugins do:

Suggested change

remarkTableTitles,

// Adds a `data` attribute to table cells for our custom CSS

remarkTableTitles,

ovflowd · 2025-08-28T12:27:03Z

apps/site/util/table.ts

+ * Remark plugin that adds data-label attributes to table cells (td)
+ * based on their corresponding table headers (th).
+ */
+export default function remarkTableTitles() {


Excellent approach!

github-actions · 2025-08-28T12:27:09Z

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 97	🟢 100	🟢 100	🟢 100	🔗
/en/about	🟢 97	🟢 97	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 97	🟢 93	🟢 100	🟢 100	🔗
/en/download	🟢 93	🟢 100	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 100	🟢 100	🟢 100	🟢 100	🔗
/en/blog	🟢 98	🟢 100	🟢 96	🟢 100	🔗

ovflowd

LGTM! Good stuff and great effort put in here :)

Appreciate you going back-and-forth on this. Looking back, this bec came much simpler and easier than the original PR :)

ovflowd · 2025-08-28T12:29:09Z

I just looked the latest commit, is it supposed to look like this?

ovflowd · 2025-08-28T12:29:38Z

(Looks a bit weird tho)

araujogui · 2025-08-28T12:38:11Z

I just looked the latest commit, is it supposed to look like this?

It's a bug, i'll take a look

AugustinMauroy

LGMT

Copilot AI review requested due to automatic review settings August 21, 2025 02:06

araujogui requested review from a team as code owners August 21, 2025 02:06

Copilot AI reviewed Aug 21, 2025

View reviewed changes

apps/site/components/Releases/PreviousReleasesTable.tsx Outdated Show resolved Hide resolved

apps/site/util/table.ts Show resolved Hide resolved

packages/ui-components/src/styles/markdown.css Show resolved Hide resolved

araujogui mentioned this pull request Aug 21, 2025

feat: create responsive table #8079

Closed

5 tasks

vercel bot deployed to Preview August 21, 2025 02:09 View deployment

araujogui commented Aug 21, 2025

View reviewed changes

vercel bot deployed to Preview August 21, 2025 02:10 View deployment

avivkeller approved these changes Aug 21, 2025

View reviewed changes

vercel bot deployed to Preview August 25, 2025 15:33 View deployment

araujogui force-pushed the feat/responsive-table2 branch from 01ba72a to 38cccee Compare August 25, 2025 15:34

vercel bot deployed to Preview August 25, 2025 15:35 View deployment

araujogui added 9 commits August 27, 2025 18:35

feat: create responsive css-only table

73af326

feat: create remark table plugin

109cf27

fix: better row label

dae9a24

fix: remove flex container

d24d86a

refactor: organize rules

691a5ff

feat: some stylish

f041b36

fix: oops

9deb3a7

fix: array boundaries

7a468fb

fix: break words

d9f70ff

araujogui force-pushed the feat/responsive-table2 branch from 38cccee to d9f70ff Compare August 27, 2025 21:36

vercel bot deployed to Preview August 27, 2025 21:36 View deployment

avivkeller reviewed Aug 27, 2025

View reviewed changes

ovflowd added the github_actions:pull-request Trigger Pull Request Checks label Aug 28, 2025

ovflowd deployed to Storybook August 28, 2025 12:26 — with GitHub Actions View deployment

github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Aug 28, 2025

ovflowd reviewed Aug 28, 2025

View reviewed changes

ovflowd approved these changes Aug 28, 2025

View reviewed changes

AugustinMauroy approved these changes Aug 28, 2025

View reviewed changes

	remarkTableTitles,
	// Adds a `data` attribute to table cells for our custom CSS
	remarkTableTitles,

Uh oh!

feat: create css-only responsive table #8098

Are you sure you want to change the base?

feat: create css-only responsive table #8098

Conversation

araujogui commented Aug 21, 2025

Description

Validation

Related Issues

Check List

Uh oh!

vercel bot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

araujogui Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

araujogui Aug 21, 2025

Choose a reason for hiding this comment

Uh oh!

AugustinMauroy Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

avivkeller commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

araujogui commented Aug 27, 2025

Uh oh!

avivkeller Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ovflowd left a comment

Choose a reason for hiding this comment

Uh oh!

ovflowd commented Aug 28, 2025

Uh oh!

ovflowd commented Aug 28, 2025

Uh oh!

araujogui commented Aug 28, 2025

Uh oh!

AugustinMauroy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

vercel bot commented Aug 21, 2025 •

edited

Loading

codecov bot commented Aug 21, 2025 •

edited

Loading

avivkeller Aug 21, 2025 •

edited

Loading

avivkeller commented Aug 21, 2025 •

edited

Loading

github-actions bot commented Aug 28, 2025 •

edited

Loading