From 2e58cf7def7244a6ed4daf558d9be23714164686 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 11 Nov 2026 07:21:03 +0100
Subject: [PATCH 1/3] chore(deps): bump vue-data-ui from 3.28.7 to 3.29.1

---
 package.json        |  2 +-
 pnpm-lock.yaml      | 10 +++++-----
 pnpm-workspace.yaml |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 57243f1d29..d4d7c45d72 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
     "vite-plugin-pwa": "2.0.0",
     "vite-plus": "catalog:vite-plus",
     "vue": "3.5.42",
-    "vue-data-ui": "3.28.7",
+    "vue-data-ui": "3.29.1",
     "vue-router": "5.2.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62df4acf20..5808e48986 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -277,8 +277,8 @@ importers:
         specifier: 3.5.42
         version: 3.5.42(typescript-native-bridge@6.0.3-bridge.13.tsgo.7.0.2)
       vue-data-ui:
-        specifier: 3.28.7
-        version: 3.28.7(vue@3.5.42)
+        specifier: 3.29.1
+        version: 3.29.1(vue@3.5.42)
       vue-router:
         specifier: 5.2.0
         version: 5.2.0(@voidzero-dev/vite-plus-core@1.4.0)(@vue/compiler-sfc@3.5.42)(esbuild@0.28.1)(rolldown@1.2.4)(rollup@4.62.2)(vue@3.5.42)(webpack@5.108.4)
@@ -10806,8 +10806,8 @@ packages:
   vue-component-type-helpers@3.3.12:
     resolution: {integrity: sha512-HwCqmgTfLFskQc4P5TRnbduCMyPat2Ezu0elLWOGn0dD/6BKHP15B5bxce6aDi+E4kblPtru8amIBQzu0Di3qQ==}
 
-  vue-data-ui@3.28.7:
-    resolution: {integrity: sha512-QZP0SYW/7RoKVdvER1hDcQSnXfkIIpqde3zc6X6m0c8mP0UNS5MwP+/VJtDtsfnijhWz8BTDUZG7ij6Rwx+M+A==}
+  vue-data-ui@3.29.1:
+    resolution: {integrity: sha512-jEYmsZH94Pv6bHWlDf3tgzvJdCAxcNSLuL/4GuwQ5TrXHLmvwXxcID7HYyDbGnQUwXXMIBqrWD96qTZnoc+cbg==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: 3.5.42
@@ -23846,7 +23846,7 @@ snapshots:
 
   vue-component-type-helpers@3.3.12: {}
 
-  vue-data-ui@3.28.7(vue@3.5.42):
+  vue-data-ui@3.29.1(vue@3.5.42):
     dependencies:
       vue: 3.5.42(typescript-native-bridge@6.0.3-bridge.13.tsgo.7.0.2)
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index c7e313844c..35041352bb 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -51,7 +51,7 @@ minimumReleaseAgeExclude:
   - '@nuxt/nitro-server@4.5.2'
   - '@nuxt/schema@4.5.2'
   - '@nuxt/vite-builder@4.5.2'
-  - vue-data-ui@3.28.7
+  - vue-data-ui@3.29.1
 
 minimumReleaseAgeExcludePrune: true
 

From 387d8411525925e849e9177ab9e2df4833e3effc Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 11 Nov 2026 07:21:41 +0100
Subject: [PATCH 2/3] chore: add translations

---
 i18n/locales/en.json    | 2 ++
 i18n/locales/fr-FR.json | 2 ++
 i18n/schema.json        | 6 ++++++
 3 files changed, 10 insertions(+)

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index babf83d554..acb9f3e050 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -779,9 +779,11 @@
         "table_available": "A data table for this chart is available below.",
         "table_caption": "Chart data table"
       },
+      "table_view": "Table view",
       "chart_view_toggle": "Toggle view",
       "chart_view_combined": "Combined view",
       "chart_view_split": "Split view",
+      "date": "Date",
       "granularity": "Granularity",
       "granularity_daily": "Daily",
       "granularity_weekly": "Weekly",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 4a1c6efd80..909d3f375a 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -649,9 +649,11 @@
         "table_available": "Un tableau de données pour ce graphique est disponible ci-dessous.",
         "table_caption": "Tableau de données du graphique"
       },
+      "table_view": "Afficher le tableau",
       "chart_view_toggle": "Changer de vue",
       "chart_view_combined": "Vue groupée",
       "chart_view_split": "Vue séparée",
+      "date": "Date",
       "granularity": "Granularité",
       "granularity_daily": "Par Jour",
       "granularity_weekly": "Par Semaine",
diff --git a/i18n/schema.json b/i18n/schema.json
index cb101c8a59..fcc89367f2 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -2341,6 +2341,9 @@
               },
               "additionalProperties": false
             },
+            "table_view": {
+              "type": "string"
+            },
             "chart_view_toggle": {
               "type": "string"
             },
@@ -2350,6 +2353,9 @@
             "chart_view_split": {
               "type": "string"
             },
+            "date": {
+              "type": "string"
+            },
             "granularity": {
               "type": "string"
             },

From ce0d6507d33e12ba64edb9d560b5e30e3b8dcb15 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 11 Nov 2026 07:22:39 +0100
Subject: [PATCH 3/3] feat(a11y): replace chart hidden data tables with a
 togglable table view

---
 app/components/Compare/FacetBarChart.vue      |   1 +
 app/components/Compare/FacetScatterChart.vue  |   3 +
 .../Package/DailyDownloadsHeatmap.vue         | 397 +++++++-----
 app/components/Package/TimelineChart.vue      |   6 +
 app/components/Package/TrendsChart.vue        | 591 ++++++++++--------
 app/components/Package/TrendsDataTable.vue    | 113 ++++
 .../Package/VersionDistribution.vue           |   3 +
 test/nuxt/a11y.spec.ts                        | 179 ++++++
 8 files changed, 857 insertions(+), 436 deletions(-)
 create mode 100644 app/components/Package/TrendsDataTable.vue

diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index bc52fda4f2..79e373888d 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -142,6 +142,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
     a11y: {
+      includeTable: true,
       translations: {
         keyboardNavigation: $t('package.trends.chart_assistive_text.keyboard_navigation_vertical'),
         tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 634a2cbaab..dd87cd8a91 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -136,6 +136,9 @@ function buildExportFilename(extension: string): string {
 
 const config = computed<VueUiScatterConfig>(() => {
   return {
+    a11y: {
+      includeTable: true,
+    },
     theme: isDarkMode.value ? 'dark' : '',
     userOptions: {
       buttons: {
diff --git a/app/components/Package/DailyDownloadsHeatmap.vue b/app/components/Package/DailyDownloadsHeatmap.vue
index ab4bdef01b..0991d6fb1d 100644
--- a/app/components/Package/DailyDownloadsHeatmap.vue
+++ b/app/components/Package/DailyDownloadsHeatmap.vue
@@ -26,6 +26,13 @@ type DailyDataPoint = {
 
 const props = defineProps<{ packageName: string }>()
 const chartRef = useTemplateRef('chartRef')
+const showDataTable = shallowRef(false)
+const chartPanel = useTemplateRef('chartPanel')
+const { height: renderedChartHeight } = useElementSize(chartPanel)
+const lastChartHeight = shallowRef(0)
+watch(renderedChartHeight, height => {
+  if (height > 0) lastChartHeight.value = height
+})
 
 const { locale, localeProperties } = useI18n()
 const isRTL = computed(() => localeProperties.value.dir === 'rtl')
@@ -219,6 +226,40 @@ const heatmap = computed(() => {
 
 const dataset = computed<VueUiHeatmapDatasetItem[]>(() => heatmap.value.dataset)
 
+const tableRows = computed(() => {
+  const yesterday = addDays(toUtcDay(new Date()), -1)
+  const { weekStarts, dataset: rows, reportedDates, anomalousDates } = heatmap.value
+  const maximum = Math.max(0, ...rows.flatMap(row => row.values))
+
+  return weekStarts.flatMap((weekStart, weekIndex) =>
+    WEEK_DAYS.flatMap((_, dayIndex) => {
+      const date = addDays(parseIsoDate(weekStart), dayIndex)
+      if (date > yesterday) return []
+      const key = toIsoDate(date)
+      const rawValue = rows[dayIndex]?.values[weekIndex] ?? 0
+      const value =
+        reportedDates.has(key) && !anomalousDates.has(key) && rawValue > 0 ? rawValue : null
+      return [
+        {
+          date: date.getTime(),
+          value,
+          color:
+            value == null
+              ? colors.value.bg
+              : `color-mix(in srgb, ${accent.value} ${maximum > 0 ? (value / maximum) * 100 : 0}%, ${colors.value.bg})`,
+        },
+      ]
+    }),
+  )
+})
+
+const tableDataset = computed(() => [
+  {
+    name: props.packageName,
+    series: tableRows.value.map(row => row.value),
+  },
+])
+
 function computeMinMax(value: number, maxVal: number, date: string | null) {
   return {
     value: compactNumberFormatter.value.format(value),
@@ -607,174 +648,208 @@ function getLegendContent(svg: VueUiHeatmapSvgSlotProps['svg']) {
     </div>
     <SkeletonBlock v-else-if="isLoading" class="aspect-[676/172]" />
     <div v-else-if="source.length" class="w-full overflow-visible">
-      <ClientOnly>
-        <div>
-          <VueUiHeatmap ref="chartRef" :dataset="dataset" :config="config" class="[direction:ltr]">
-            <!-- Keyboard navigation hint -->
-            <template #hint="{ isVisible }">
-              <p
-                v-if="isVisible"
-                class="text-accent text-xs -mt-5 text-center px-2"
-                aria-hidden="true"
-              >
-                {{ $t('package.trends.downloads_heatmap.nav_hint') }}
-              </p>
-            </template>
-
-            <template #svg="{ svg }">
-              <template v-for="cell in svg.cells" :key="cell.datapoint.id">
-                <g v-if="isUnrecorded(cell)" pointer-events="none">
-                  <rect
-                    :x="cell.x + 2"
-                    :y="cell.y + 2"
-                    :width="Math.max(0, cell.width - 4)"
-                    :height="Math.max(0, cell.height - 4)"
-                    :fill="colors.bg"
-                  />
-                  <path
-                    :d="getMissingDaySymbol(cell)"
-                    :stroke="isDarkMode ? colors.borderHover : colors.border"
-                    stroke-linecap="round"
-                    :stroke-width="showUnknownDay(cell) ? 1.5 : 2"
-                    fill="none"
-                  />
-                </g>
+      <div class="flex justify-end mb-3">
+        <SettingsToggle v-model="showDataTable" :label="$t('package.trends.table_view')" />
+      </div>
+      <PackageTrendsDataTable
+        v-if="showDataTable"
+        :dataset="tableDataset"
+        :package-names="[packageName]"
+        :dates="tableRows.map(row => row.date)"
+        :metric-label="$t('package.trends.items.downloads')"
+        :date-formatter="tooltipDateFormatter"
+        :max-height="lastChartHeight || 269"
+      >
+        <template #before-value="{ index }">
+          <span
+            class="h-3.5 w-3.5 shrink-0 border border-border inline-flex items-center justify-center"
+            :style="{ backgroundColor: tableRows[index]?.color }"
+            aria-hidden="true"
+          >
+            <span
+              v-if="tableRows[index]?.value == null"
+              class="i-lucide:x h-3 w-3 text-fg-subtle"
+            />
+          </span>
+        </template>
+      </PackageTrendsDataTable>
+      <div v-else ref="chartPanel">
+        <ClientOnly>
+          <div>
+            <VueUiHeatmap
+              ref="chartRef"
+              :dataset="dataset"
+              :config="config"
+              class="[direction:ltr]"
+            >
+              <!-- Keyboard navigation hint -->
+              <template #hint="{ isVisible }">
+                <p
+                  v-if="isVisible"
+                  class="text-accent text-xs -mt-5 text-center px-2"
+                  aria-hidden="true"
+                >
+                  {{ $t('package.trends.downloads_heatmap.nav_hint') }}
+                </p>
               </template>
 
-              <!-- BOTTOM LEGEND -->
-              <template v-for="legend in [getLegendContent(svg)]" :key="'legend'">
-                <!-- Anomalies -->
-                <path v-bind="legend.anomalies.marker" />
-                <text v-bind="legend.anomalies.text">
-                  {{ $t('package.trends.downloads_heatmap.legend.anomalies') }}
-                </text>
-
-                <!-- Max -->
-                <rect v-bind="legend.max.marker" />
-                <text v-bind="legend.max.text">
-                  {{
-                    $t('package.trends.downloads_heatmap.legend.max', {
-                      value: minMax.max.value,
-                      date: minMax.max.date,
-                    })
-                  }}
-                </text>
-
-                <!-- Min -->
-                <rect v-bind="legend.min.marker" />
-                <text v-bind="legend.min.text">
-                  {{
-                    $t('package.trends.downloads_heatmap.legend.min', {
-                      value: minMax.min.value,
-                      date: minMax.min.date,
+              <template #svg="{ svg }">
+                <template v-for="cell in svg.cells" :key="cell.datapoint.id">
+                  <g v-if="isUnrecorded(cell)" pointer-events="none">
+                    <rect
+                      :x="cell.x + 2"
+                      :y="cell.y + 2"
+                      :width="Math.max(0, cell.width - 4)"
+                      :height="Math.max(0, cell.height - 4)"
+                      :fill="colors.bg"
+                    />
+                    <path
+                      :d="getMissingDaySymbol(cell)"
+                      :stroke="isDarkMode ? colors.borderHover : colors.border"
+                      stroke-linecap="round"
+                      :stroke-width="showUnknownDay(cell) ? 1.5 : 2"
+                      fill="none"
+                    />
+                  </g>
+                </template>
+
+                <!-- BOTTOM LEGEND -->
+                <template v-for="legend in [getLegendContent(svg)]" :key="'legend'">
+                  <!-- Anomalies -->
+                  <path v-bind="legend.anomalies.marker" />
+                  <text v-bind="legend.anomalies.text">
+                    {{ $t('package.trends.downloads_heatmap.legend.anomalies') }}
+                  </text>
+
+                  <!-- Max -->
+                  <rect v-bind="legend.max.marker" />
+                  <text v-bind="legend.max.text">
+                    {{
+                      $t('package.trends.downloads_heatmap.legend.max', {
+                        value: minMax.max.value,
+                        date: minMax.max.date,
+                      })
+                    }}
+                  </text>
+
+                  <!-- Min -->
+                  <rect v-bind="legend.min.marker" />
+                  <text v-bind="legend.min.text">
+                    {{
+                      $t('package.trends.downloads_heatmap.legend.min', {
+                        value: minMax.min.value,
+                        date: minMax.min.date,
+                      })
+                    }}
+                  </text>
+                </template>
+
+                <!-- Print watermark-->
+                <g
+                  v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
+                  v-html="
+                    drawSmallNpmxLogoAndTaglineWatermark({
+                      svg: {
+                        ...svg,
+                      },
+                      colors: watermarkColors,
+                      translateFn: $t,
                     })
-                  }}
-                </text>
+                  "
+                />
               </template>
 
-              <!-- Print watermark-->
-              <g
-                v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
-                v-html="
-                  drawSmallNpmxLogoAndTaglineWatermark({
-                    svg: {
-                      ...svg,
-                    },
-                    colors: watermarkColors,
-                    translateFn: $t,
-                  })
-                "
-              />
-            </template>
-
-            <!-- Custom tooltip -->
-            <template #tooltip="{ datapoint, seriesIndex, series }">
-              <div class="px-1 text-start font-mono">
-                <div class="mt-0.5 text-xs text-gray-900 dark:text-gray-100">
-                  {{ getTooltipDate(datapoint, seriesIndex, series) }}
-                </div>
-                <div class="mt-2 flex items-center gap-2">
-                  <span
-                    class="h-3.5 w-3.5 shrink-0 relative"
-                    :style="{
-                      backgroundColor: datapoint.color,
-                      border: `0.5px solid ${adaptColorToBackground(datapoint.color, {
-                        dark: isDarkMode ? '#3A3A3A' : '#6A6A6A',
-                        light: isDarkMode ? '#6A6A6A' : '#CCCCCC',
-                      })}`,
-                    }"
-                  >
-                    <svg
-                      v-if="
-                        !isUnknownTooltipDay(datapoint, seriesIndex, series) && !datapoint.value
-                      "
-                      viewBox="0 0 16 16"
-                      class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 w-full p-0.25"
+              <!-- Custom tooltip -->
+              <template #tooltip="{ datapoint, seriesIndex, series }">
+                <div class="px-1 text-start font-mono">
+                  <div class="mt-0.5 text-xs text-gray-900 dark:text-gray-100">
+                    {{ getTooltipDate(datapoint, seriesIndex, series) }}
+                  </div>
+                  <div class="mt-2 flex items-center gap-2">
+                    <span
+                      class="h-3.5 w-3.5 shrink-0 relative"
+                      :style="{
+                        backgroundColor: datapoint.color,
+                        border: `0.5px solid ${adaptColorToBackground(datapoint.color, {
+                          dark: isDarkMode ? '#3A3A3A' : '#6A6A6A',
+                          light: isDarkMode ? '#6A6A6A' : '#CCCCCC',
+                        })}`,
+                      }"
                     >
-                      <path
-                        d="M8 8 1 1M8 8 15 15M1 15 15 1"
-                        :stroke="isDarkMode ? colors.borderHover : colors.border"
-                        stroke-width="2"
-                        fill="none"
-                      />
-                    </svg>
-                  </span>
-                  <span class="text-sm text-gray-700 dark:text-gray-300">
-                    {{
-                      isUnknownTooltipDay(datapoint, seriesIndex, series)
-                        ? '-'
-                        : compactNumberFormatter.format(Number(datapoint.value) || 0)
-                    }}
-                  </span>
+                      <svg
+                        v-if="
+                          !isUnknownTooltipDay(datapoint, seriesIndex, series) && !datapoint.value
+                        "
+                        viewBox="0 0 16 16"
+                        class="absolute top-1/2 inset-is-1/2 -translate-x-1/2 -translate-y-1/2 w-full p-0.25"
+                      >
+                        <path
+                          d="M8 8 1 1M8 8 15 15M1 15 15 1"
+                          :stroke="isDarkMode ? colors.borderHover : colors.border"
+                          stroke-width="2"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                    <span class="text-sm text-gray-700 dark:text-gray-300">
+                      {{
+                        isUnknownTooltipDay(datapoint, seriesIndex, series)
+                          ? '-'
+                          : compactNumberFormatter.format(Number(datapoint.value) || 0)
+                      }}
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </template>
-
-            <!-- Chart context menu -->
-            <template #menuIcon="{ isOpen }">
-              <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
-              <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
-            </template>
-            <template #optionCsv>
-              <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
-            </template>
-            <template #custom-menu-before>
-              <ChartCopyPngButton
-                :copied="copiedPng"
-                :copying="isCopyingPng"
-                @click="copyChartPng"
-              />
-            </template>
-            <template #optionFullscreen="{ isFullscreen }">
-              <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
-            </template>
-            <template #optionImg>
-              <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
-            </template>
-            <template #optionSvg>
-              <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
-            </template>
-
-            <template #optionAltCopy>
-              <span
-                class="w-6 h-6"
-                :class="
-                  copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
-                "
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-            </template>
-
-            <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
-              <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
-            </template>
-          </VueUiHeatmap>
-        </div>
-        <template #fallback>
-          <SkeletonBlock class="aspect-[676/172]" />
-        </template>
-      </ClientOnly>
+              </template>
+
+              <!-- Chart context menu -->
+              <template #menuIcon="{ isOpen }">
+                <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+                <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
+              </template>
+              <template #optionCsv>
+                <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
+              </template>
+              <template #custom-menu-before>
+                <ChartCopyPngButton
+                  :copied="copiedPng"
+                  :copying="isCopyingPng"
+                  @click="copyChartPng"
+                />
+              </template>
+              <template #optionFullscreen="{ isFullscreen }">
+                <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
+              </template>
+              <template #optionImg>
+                <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
+              </template>
+              <template #optionSvg>
+                <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
+              </template>
+
+              <template #optionAltCopy>
+                <span
+                  class="w-6 h-6"
+                  :class="
+                    copied
+                      ? 'i-lucide:check text-accent'
+                      : 'i-lucide:person-standing text-fg-subtle'
+                  "
+                  style="pointer-events: none"
+                  aria-hidden="true"
+                />
+              </template>
+
+              <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
+                <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
+              </template>
+            </VueUiHeatmap>
+          </div>
+          <template #fallback>
+            <SkeletonBlock class="aspect-[676/172]" />
+          </template>
+        </ClientOnly>
+      </div>
     </div>
     <p v-else class="py-6 text-sm text-fg-subtle">
       {{ $t('package.trends.no_data') }}
diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue
index 89f27934ed..f312cbfce1 100644
--- a/app/components/Package/TimelineChart.vue
+++ b/app/components/Package/TimelineChart.vue
@@ -451,6 +451,9 @@ const xAxisLabelsModulo = computed(() => {
 
 const config = computed<VueUiXyConfig>(() => {
   return {
+    a11y: {
+      includeTable: true,
+    },
     theme: isDarkMode.value ? 'dark' : '',
     transitions: {
       pauseOnDatasetChange: true, // prevents transitions on axis labels when switching from install size to dependencies
@@ -721,6 +724,9 @@ const indexSelection = computed(() => {
 })
 
 const stackbarConfig = computed<VueUiStackbarConfig>(() => ({
+  a11y: {
+    includeTable: true,
+  },
   theme: isDarkMode.value ? 'dark' : '',
   useCssAnimation: false,
   userOptions: {
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 09acdd2877..a8789c36c3 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -83,6 +83,14 @@ const isZoomed = shallowRef(false)
 const zoomStartIndex = shallowRef(0)
 const zoomEndIndex = shallowRef<number | null>(null)
 
+const showDataTable = shallowRef(false)
+const chartPanel = useTemplateRef('chartPanel')
+const { height: renderedChartHeight } = useElementSize(chartPanel)
+const lastChartHeight = shallowRef(0)
+watch(renderedChartHeight, height => {
+  if (height > 0) lastChartHeight.value = height
+})
+
 const chartRef = useTemplateRef('chartRef')
 const { copiedPng, isCopyingPng, copyChartPng } = useCopyChartPng(chartRef)
 
@@ -219,6 +227,10 @@ const normalisedDataset = computed(() => {
   return data
 })
 
+const hasEstimatedTableEndpoint = computed(
+  () => supportsEstimation.value && !isEndDateOnPeriodEnd.value,
+)
+
 function getPackageNameForSeriesIndex(index: number): string {
   return (
     effectivePackageNamesForMetric.value[index] ??
@@ -1658,7 +1670,7 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
     :aria-busy="activeMetricState.pending ? 'true' : 'false'"
   >
     <TabRoot
-      v-if="isMultiPackageMode"
+      v-if="isMultiPackageMode && !showDataTable"
       v-model="chartLayout"
       id-prefix="chart-layout"
       class="mt-4 mb-8"
@@ -1905,294 +1917,323 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
       {{ $t('package.trends.title') }} — {{ activeMetricDef?.label }}
     </h2>
 
+    <div v-if="chartData.dataset" class="flex justify-end mb-3">
+      <SettingsToggle v-model="showDataTable" :label="$t('package.trends.table_view')" />
+    </div>
+
     <!-- Chart panel (active metric) -->
     <div role="region" aria-labelledby="trends-chart-title">
-      <ClientOnly v-if="chartData.dataset">
-        <div
-          v-if="isSparklineLayout"
-          id="split-chart-layout-panel"
-          :role="isMultiPackageMode ? 'tabpanel' : undefined"
-          :aria-labelledby="isMultiPackageMode ? 'split-chart-layout-tab' : undefined"
-        >
-          <ChartSplitSparkline
-            :dataset="normalisedDataset"
-            :dates="chartData.dates"
-            :datetimeFormatterOptions
-            :showLastDatapointEstimation="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd"
-            :granularity="selectedGranularity"
-            :large-package-series="largePackageSeries"
-          />
-        </div>
-
-        <div
-          :data-pending="pending"
-          :data-minimap-visible="maxDatapoints > 6"
-          v-else
-          id="combined-chart-layout-panel"
-          :role="isMultiPackageMode ? 'tabpanel' : undefined"
-          :aria-labelledby="isMultiPackageMode ? 'combined-chart-layout-tab' : undefined"
-        >
-          <VueUiXy
-            ref="chartRef"
-            :dataset="normalisedDataset"
-            :config="chartConfig"
-            :class="{
-              '[direction:ltr]': true,
-              'no-transition': isResizing,
-            }"
-            @zoomStart="setZoomStart"
-            @zoomEnd="setZoomEnd"
-            @zoomReset="resetZoomTracking"
+      <PackageTrendsDataTable
+        v-if="showDataTable && chartData.dataset"
+        :dataset="normalisedDataset"
+        :package-names="effectivePackageNamesForMetric"
+        :dates="chartData.dates"
+        :metric-label="activeMetricDef?.label ?? ''"
+        :date-formatter="tooltipDateFormatter"
+        :max-height="lastChartHeight || chartHeight"
+        :estimated-last-value="hasEstimatedTableEndpoint"
+      />
+      <div v-else-if="chartData.dataset" ref="chartPanel">
+        <ClientOnly>
+          <div
+            v-if="isSparklineLayout"
+            id="split-chart-layout-panel"
+            :role="isMultiPackageMode ? 'tabpanel' : undefined"
+            :aria-labelledby="isMultiPackageMode ? 'split-chart-layout-tab' : undefined"
           >
-            <!-- Keyboard navigation hint -->
-            <template #hint="{ isVisible }">
-              <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
-                {{ $t('compare.packages.line_chart_nav_hint') }}
-              </p>
-            </template>
-
-            <!-- Injecting custom svg elements on the bottom layer -->
-            <template #svg-underlayer="{ svg }">
-              <g v-if="!pending && isDownloadsMetric" pointer-events="none" aria-hidden="true">
-                <template v-for="(gap, index) in getDownloadChartGaps(svg)" :key="index">
-                  <defs>
-                    <pattern
-                      :id="`${gapPatternId}-${index}`"
-                      width="6"
-                      height="6"
-                      patternUnits="userSpaceOnUse"
-                      patternTransform="rotate(45)"
-                    >
-                      <line
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="10"
-                        :stroke="colors.borderHover"
-                        stroke-width="5"
-                      />
-                    </pattern>
-                  </defs>
-                  <rect
-                    :x="gap.x"
-                    :y="gap.y"
-                    :width="gap.width"
-                    :height="gap.height"
-                    :fill="`url(#${gapPatternId}-${index})`"
-                    opacity="0.45"
-                  />
-                  <line
-                    v-for="x in [gap.x, gap.x + gap.width]"
-                    :key="x"
-                    :x1="x"
-                    :x2="x"
-                    :y1="gap.y"
-                    :y2="gap.y + gap.height"
-                    :stroke="colors.borderHover"
-                    stroke-width="0.5"
-                  />
-                </template>
-              </g>
-            </template>
-
-            <!-- Injecting custom svg elements on the top layer -->
-            <template #svg="{ svg }">
-              <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
-              <g
-                v-if="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd && !isZoomed"
-                v-html="drawEstimationLine(svg)"
-              />
+            <ChartSplitSparkline
+              :dataset="normalisedDataset"
+              :dates="chartData.dates"
+              :datetimeFormatterOptions
+              :showLastDatapointEstimation="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd"
+              :granularity="selectedGranularity"
+              :large-package-series="largePackageSeries"
+            />
+          </div>
 
-              <!-- Flat dashed tail for large packages when the final downloads bucket has no data -->
-              <g v-if="!pending && isDownloadsMetric" v-html="drawNoDataTail(svg)" />
-
-              <!-- Asterisk explaination for the last label value when the last value is null -->
-              <g v-if="!pending && isDownloadsMetric && selectedGranularity === 'daily'">
-                <text
-                  :x="svg.drawingArea.left"
-                  :y="svg.height - 12"
-                  :fill="colors.fgSubtle"
-                  :font-size="16"
-                  text-anchor="start"
+          <div
+            :data-pending="pending"
+            :data-minimap-visible="maxDatapoints > 6"
+            v-else
+            id="combined-chart-layout-panel"
+            :role="isMultiPackageMode ? 'tabpanel' : undefined"
+            :aria-labelledby="isMultiPackageMode ? 'combined-chart-layout-tab' : undefined"
+          >
+            <VueUiXy
+              ref="chartRef"
+              :dataset="normalisedDataset"
+              :config="chartConfig"
+              :class="{
+                '[direction:ltr]': true,
+                'no-transition': isResizing,
+              }"
+              @zoomStart="setZoomStart"
+              @zoomEnd="setZoomEnd"
+              @zoomReset="resetZoomTracking"
+            >
+              <!-- Keyboard navigation hint -->
+              <template #hint="{ isVisible }">
+                <p
+                  v-if="isVisible"
+                  class="text-accent text-xs -mt-6 text-center"
+                  aria-hidden="true"
                 >
-                  {{ $t('package.trends.last_recorded_value') }}
-                </text>
-              </g>
-
-              <!-- Last value label for all other cases -->
-              <g v-if="!pending" v-html="drawLastDatapointLabel(svg)" />
-
-              <!-- Inject legend during SVG print only -->
-              <g v-if="svg.isPrintingSvg" v-html="drawSvgPrintLegend(svg)" />
-
-              <!-- Inject npmx logo & tagline during SVG and PNG print -->
-              <g
-                v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
-                v-html="
-                  drawNpmxLogoAndTaglineWatermark({
-                    svg,
-                    colors: watermarkColors,
-                    translateFn: $t,
-                    positioning: 'bottom',
-                  })
-                "
-              />
+                  {{ $t('compare.packages.line_chart_nav_hint') }}
+                </p>
+              </template>
+
+              <!-- Injecting custom svg elements on the bottom layer -->
+              <template #svg-underlayer="{ svg }">
+                <g v-if="!pending && isDownloadsMetric" pointer-events="none" aria-hidden="true">
+                  <template v-for="(gap, index) in getDownloadChartGaps(svg)" :key="index">
+                    <defs>
+                      <pattern
+                        :id="`${gapPatternId}-${index}`"
+                        width="6"
+                        height="6"
+                        patternUnits="userSpaceOnUse"
+                        patternTransform="rotate(45)"
+                      >
+                        <line
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="10"
+                          :stroke="colors.borderHover"
+                          stroke-width="5"
+                        />
+                      </pattern>
+                    </defs>
+                    <rect
+                      :x="gap.x"
+                      :y="gap.y"
+                      :width="gap.width"
+                      :height="gap.height"
+                      :fill="`url(#${gapPatternId}-${index})`"
+                      opacity="0.45"
+                    />
+                    <line
+                      v-for="x in [gap.x, gap.x + gap.width]"
+                      :key="x"
+                      :x1="x"
+                      :x2="x"
+                      :y1="gap.y"
+                      :y2="gap.y + gap.height"
+                      :stroke="colors.borderHover"
+                      stroke-width="0.5"
+                    />
+                  </template>
+                </g>
+              </template>
+
+              <!-- Injecting custom svg elements on the top layer -->
+              <template #svg="{ svg }">
+                <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
+                <g
+                  v-if="shouldRenderEstimationOverlay && !isEndDateOnPeriodEnd && !isZoomed"
+                  v-html="drawEstimationLine(svg)"
+                />
 
-              <!-- Overlay covering the chart area to hide line resizing when switching granularities recalculates VueUiXy scaleMax when estimation lines are necessary -->
-              <rect
-                v-if="pending"
-                :x="svg.drawingArea.left - 3"
-                :y="svg.drawingArea.top - 12"
-                :width="svg.drawingArea.width + 15"
-                :height="svg.drawingArea.height + 48"
-                :fill="colors.bg"
-              />
-            </template>
-
-            <!-- Subtle gradient applied for a unique series (chart modal) -->
-            <template #area-gradient="{ series: chartModalSeries, id: gradientId }">
-              <linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
-                <stop offset="0%" :stop-color="chartModalSeries.color" stop-opacity="0.2" />
-                <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
-              </linearGradient>
-            </template>
-
-            <!-- Custom legend for multiple series -->
-            <template #legend="{ legend }">
-              <div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
-                <template v-if="isMultiPackageMode">
-                  <button
-                    v-for="datapoint in legend"
-                    :key="datapoint.name"
-                    :aria-pressed="datapoint.isSegregated"
-                    :aria-label="datapoint.name"
-                    type="button"
-                    class="flex shrink-0 items-center gap-1 whitespace-nowrap"
-                    @click="datapoint.segregate()"
+                <!-- Flat dashed tail for large packages when the final downloads bucket has no data -->
+                <g v-if="!pending && isDownloadsMetric" v-html="drawNoDataTail(svg)" />
+
+                <!-- Asterisk explaination for the last label value when the last value is null -->
+                <g v-if="!pending && isDownloadsMetric && selectedGranularity === 'daily'">
+                  <text
+                    :x="svg.drawingArea.left"
+                    :y="svg.height - 12"
+                    :fill="colors.fgSubtle"
+                    :font-size="16"
+                    text-anchor="start"
                   >
-                    <div class="h-3 w-3 shrink-0">
-                      <svg viewBox="0 0 2 2" class="w-full">
-                        <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="datapoint.color" />
-                      </svg>
-                    </div>
+                    {{ $t('package.trends.last_recorded_value') }}
+                  </text>
+                </g>
+
+                <!-- Last value label for all other cases -->
+                <g v-if="!pending" v-html="drawLastDatapointLabel(svg)" />
+
+                <!-- Inject legend during SVG print only -->
+                <g v-if="svg.isPrintingSvg" v-html="drawSvgPrintLegend(svg)" />
+
+                <!-- Inject npmx logo & tagline during SVG and PNG print -->
+                <g
+                  v-if="svg.isPrintingSvg || svg.isPrintingImg || isCopyingPng"
+                  v-html="
+                    drawNpmxLogoAndTaglineWatermark({
+                      svg,
+                      colors: watermarkColors,
+                      translateFn: $t,
+                      positioning: 'bottom',
+                    })
+                  "
+                />
 
-                    <span
-                      class="shrink-0 whitespace-nowrap"
-                      :style="{
-                        textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
-                      }"
+                <!-- Overlay covering the chart area to hide line resizing when switching granularities recalculates VueUiXy scaleMax when estimation lines are necessary -->
+                <rect
+                  v-if="pending"
+                  :x="svg.drawingArea.left - 3"
+                  :y="svg.drawingArea.top - 12"
+                  :width="svg.drawingArea.width + 15"
+                  :height="svg.drawingArea.height + 48"
+                  :fill="colors.bg"
+                />
+              </template>
+
+              <!-- Subtle gradient applied for a unique series (chart modal) -->
+              <template #area-gradient="{ series: chartModalSeries, id: gradientId }">
+                <linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
+                  <stop offset="0%" :stop-color="chartModalSeries.color" stop-opacity="0.2" />
+                  <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
+                </linearGradient>
+              </template>
+
+              <!-- Custom legend for multiple series -->
+              <template #legend="{ legend }">
+                <div class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
+                  <template v-if="isMultiPackageMode">
+                    <button
+                      v-for="datapoint in legend"
+                      :key="datapoint.name"
+                      :aria-pressed="datapoint.isSegregated"
+                      :aria-label="datapoint.name"
+                      type="button"
+                      class="flex shrink-0 items-center gap-1 whitespace-nowrap"
+                      @click="datapoint.segregate()"
                     >
-                      {{ datapoint.name }}
-                    </span>
-                  </button>
-                </template>
-
-                <!-- Single series legend (no user interaction) -->
-                <template v-else-if="legend.length > 0">
-                  <div class="flex shrink-0 items-center gap-1 whitespace-nowrap">
-                    <div class="h-3 w-3 shrink-0">
-                      <svg viewBox="0 0 2 2" class="w-full">
-                        <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="legend[0]?.color" />
-                      </svg>
+                      <div class="h-3 w-3 shrink-0">
+                        <svg viewBox="0 0 2 2" class="w-full">
+                          <rect x="0" y="0" width="2" height="2" rx="0.3" :fill="datapoint.color" />
+                        </svg>
+                      </div>
+
+                      <span
+                        class="shrink-0 whitespace-nowrap"
+                        :style="{
+                          textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
+                        }"
+                      >
+                        {{ datapoint.name }}
+                      </span>
+                    </button>
+                  </template>
+
+                  <!-- Single series legend (no user interaction) -->
+                  <template v-else-if="legend.length > 0">
+                    <div class="flex shrink-0 items-center gap-1 whitespace-nowrap">
+                      <div class="h-3 w-3 shrink-0">
+                        <svg viewBox="0 0 2 2" class="w-full">
+                          <rect
+                            x="0"
+                            y="0"
+                            width="2"
+                            height="2"
+                            rx="0.3"
+                            :fill="legend[0]?.color"
+                          />
+                        </svg>
+                      </div>
+                      <span class="shrink-0 whitespace-nowrap">
+                        {{ legend[0]?.name }}
+                      </span>
                     </div>
-                    <span class="shrink-0 whitespace-nowrap">
-                      {{ legend[0]?.name }}
+                  </template>
+
+                  <!-- Estimation extra legend item -->
+                  <div
+                    class="flex shrink-0 items-center gap-1 whitespace-nowrap"
+                    v-if="supportsEstimation || hasDashedSegments"
+                  >
+                    <svg viewBox="0 0 20 2" width="20" class="shrink-0">
+                      <line
+                        x1="0"
+                        y1="1"
+                        x2="20"
+                        y2="1"
+                        :stroke="colors.fg"
+                        stroke-dasharray="4"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span class="shrink-0 whitespace-nowrap text-fg-subtle">
+                      {{ $t('package.trends.legend_estimation') }}
                     </span>
                   </div>
-                </template>
-
-                <!-- Estimation extra legend item -->
-                <div
-                  class="flex shrink-0 items-center gap-1 whitespace-nowrap"
-                  v-if="supportsEstimation || hasDashedSegments"
-                >
-                  <svg viewBox="0 0 20 2" width="20" class="shrink-0">
-                    <line
-                      x1="0"
-                      y1="1"
-                      x2="20"
-                      y2="1"
-                      :stroke="colors.fg"
-                      stroke-dasharray="4"
-                      stroke-linecap="round"
-                    />
-                  </svg>
-                  <span class="shrink-0 whitespace-nowrap text-fg-subtle">
-                    {{ $t('package.trends.legend_estimation') }}
-                  </span>
                 </div>
-              </div>
-            </template>
-
-            <!-- Custom minimap reset button -->
-            <template #reset-action="{ reset: resetMinimap }">
-              <button
-                type="button"
-                aria-label="reset minimap"
-                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-16 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
-                style="pointer-events: all !important"
-                @click="resetMinimap"
-              >
-                <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
-              </button>
-            </template>
-
-            <template #menuIcon="{ isOpen }">
-              <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
-              <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
-            </template>
-            <template #optionCsv>
-              <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
-            </template>
-            <template #custom-menu-before>
-              <ChartCopyPngButton
-                :copied="copiedPng"
-                :copying="isCopyingPng"
-                @click="copyChartPng"
-              />
-            </template>
-            <template #optionFullscreen="{ isFullscreen }">
-              <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
-            </template>
-            <template #optionImg>
-              <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
-            </template>
-            <template #optionSvg>
-              <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
-            </template>
-            <template #optionStack="{ isStack }">
-              <span
-                v-if="isStack"
-                class="i-lucide:layers-2 text-fg-subtle w-6 h-6 pointer-events-none"
-                aria-hidden="true"
-              />
-              <span
-                v-else
-                class="i-lucide:chart-line text-fg-subtle w-6 h-6 pointer-events-none"
-                aria-hidden="true"
-              />
-            </template>
+              </template>
+
+              <!-- Custom minimap reset button -->
+              <template #reset-action="{ reset: resetMinimap }">
+                <button
+                  type="button"
+                  aria-label="reset minimap"
+                  class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-16 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+                  style="pointer-events: all !important"
+                  @click="resetMinimap"
+                >
+                  <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
+                </button>
+              </template>
+
+              <template #menuIcon="{ isOpen }">
+                <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
+                <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
+              </template>
+              <template #optionCsv>
+                <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
+              </template>
+              <template #custom-menu-before>
+                <ChartCopyPngButton
+                  :copied="copiedPng"
+                  :copying="isCopyingPng"
+                  @click="copyChartPng"
+                />
+              </template>
+              <template #optionFullscreen="{ isFullscreen }">
+                <ChartFullscreenIcon :is-fullscreen="isFullscreen" />
+              </template>
+              <template #optionImg>
+                <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
+              </template>
+              <template #optionSvg>
+                <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
+              </template>
+              <template #optionStack="{ isStack }">
+                <span
+                  v-if="isStack"
+                  class="i-lucide:layers-2 text-fg-subtle w-6 h-6 pointer-events-none"
+                  aria-hidden="true"
+                />
+                <span
+                  v-else
+                  class="i-lucide:chart-line text-fg-subtle w-6 h-6 pointer-events-none"
+                  aria-hidden="true"
+                />
+              </template>
 
-            <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
-              <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
-            </template>
-            <template #optionAltCopy>
-              <span
-                class="w-6 h-6"
-                :class="
-                  copied ? 'i-lucide:check text-accent' : 'i-lucide:person-standing text-fg-subtle'
-                "
-                style="pointer-events: none"
-                aria-hidden="true"
-              />
-            </template>
-          </VueUiXy>
-        </div>
+              <template v-for="slotName in CHART_ANNOTATOR_SLOTS" #[slotName]="slotProps">
+                <ChartAnnotatorIcon :slot-name="slotName" :slot-props="slotProps" />
+              </template>
+              <template #optionAltCopy>
+                <span
+                  class="w-6 h-6"
+                  :class="
+                    copied
+                      ? 'i-lucide:check text-accent'
+                      : 'i-lucide:person-standing text-fg-subtle'
+                  "
+                  style="pointer-events: none"
+                  aria-hidden="true"
+                />
+              </template>
+            </VueUiXy>
+          </div>
 
-        <template #fallback>
-          <div class="min-h-[260px]" />
-        </template>
-      </ClientOnly>
+          <template #fallback>
+            <div class="min-h-[260px]" />
+          </template>
+        </ClientOnly>
+      </div>
 
       <div
         v-if="!chartData.dataset && !activeMetricState.pending"
@@ -2212,7 +2253,7 @@ const copyEmbedUrl = () => copyEmbed(embedUrl.value)
     </div>
 
     <!-- Chart embedding -->
-    <div v-if="isDownloadsMetric && !!chartData.dataset && !hideControls">
+    <div v-if="isDownloadsMetric && !!chartData.dataset && !hideControls" class="mt-4">
       <div class="flex flex-col gap-2">
         <button
           type="button"
diff --git a/app/components/Package/TrendsDataTable.vue b/app/components/Package/TrendsDataTable.vue
new file mode 100644
index 0000000000..0fffda8961
--- /dev/null
+++ b/app/components/Package/TrendsDataTable.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const props = defineProps<{
+  dataset: { name: string; series: (number | null | undefined)[] }[]
+  packageNames: string[]
+  dates: number[]
+  metricLabel: string
+  dateFormatter: Intl.DateTimeFormat
+  estimatedLastValue?: boolean
+  maxHeight: number
+}>()
+
+const tableNumberFormatter = useCompactNumberFormatter()
+const estimationNoteId = useId()
+
+function isEstimatedValue(index: number, seriesIndex: number): boolean {
+  const series = props.dataset[seriesIndex]?.series ?? []
+  return !!props.estimatedLastValue && index === series.length - 1 && series[index] != null
+}
+
+const hasEstimatedValues = computed(() =>
+  props.dataset.some(
+    (series, index) =>
+      series.series.length <= props.dates.length &&
+      isEstimatedValue(series.series.length - 1, index),
+  ),
+)
+</script>
+
+<template>
+  <div
+    class="overflow-auto rounded-md border border-border focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
+    :style="{ maxHeight: `${maxHeight}px` }"
+    tabindex="0"
+    role="region"
+    :aria-label="$t('package.trends.chart_assistive_text.table_caption')"
+  >
+    <table class="w-full border-separate border-spacing-0 text-start text-sm font-mono">
+      <caption class="sr-only">
+        {{
+          $t('package.trends.title')
+        }}
+        —
+        {{
+          metricLabel
+        }}
+      </caption>
+      <thead class="sticky top-0 z-1 bg-bg-subtle">
+        <tr>
+          <th
+            :colspan="dataset.length + 1"
+            scope="colgroup"
+            class="border-b border-border bg-bg-subtle px-3 py-3 text-start text-xs font-medium text-fg-muted"
+          >
+            {{ metricLabel }}
+          </th>
+        </tr>
+        <tr>
+          <th
+            scope="col"
+            class="border-b border-border bg-bg-subtle px-3 py-3 text-start text-xs font-medium text-fg-muted"
+          >
+            {{ $t('package.trends.date') }}
+          </th>
+          <th
+            v-for="(series, index) in dataset"
+            :key="index"
+            scope="col"
+            class="border-b border-border bg-bg-subtle px-3 py-3 text-end text-xs font-medium text-fg-muted whitespace-nowrap"
+          >
+            {{ packageNames[index] ?? series.name }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(date, index) in dates"
+          :key="date"
+          class="[&:not(:last-child)>*]:border-b [&>*]:border-border hover:bg-bg-subtle"
+        >
+          <th scope="row" class="px-3 py-2 text-start font-normal whitespace-nowrap">
+            {{ dateFormatter.format(date) }}
+          </th>
+          <td
+            v-for="(series, seriesIndex) in dataset"
+            :key="seriesIndex"
+            :aria-describedby="isEstimatedValue(index, seriesIndex) ? estimationNoteId : undefined"
+            class="px-3 py-2 text-end tabular-nums whitespace-nowrap"
+          >
+            <span class="inline-flex items-center justify-end gap-2">
+              <slot name="before-value" :index="index" :series-index="seriesIndex" />
+              <span>
+                {{
+                  series.series[index] == null
+                    ? $t('package.trends.no_data_short')
+                    : tableNumberFormatter.format(series.series[index])
+                }}
+              </span>
+              <span
+                v-if="isEstimatedValue(index, seriesIndex)"
+                class="text-xs text-fg-subtle"
+                aria-hidden="true"
+                >*</span
+              >
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-if="hasEstimatedValues" :id="estimationNoteId" class="px-3 py-2 text-xs text-fg-subtle">
+      * {{ $t('package.trends.legend_estimation') }}
+    </p>
+  </div>
+</template>
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index 25e92855d1..05ea134e82 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -156,6 +156,9 @@ const isOrderedByDownloads = computed(
 )
 
 const barConfig = computed<VueUiHorizontalBarConfig>(() => ({
+  a11y: {
+    includeTable: true,
+  },
   userOptions: {
     buttons: {
       pdf: false,
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 742cdbc569..f17d325cd4 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -283,6 +283,7 @@ import {
   PackageInstallDropdown,
   PackageInstallAdditionalCommands,
   PackageSecurityDowngradeAlert,
+  PackageTrendsDataTable,
   PackageManagerSelect,
   PackageMetricsBadges,
   PackagePlaygrounds,
@@ -1352,6 +1353,78 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
 
+    it('hides layout tabs in table view and restores them when returning to the chart', async () => {
+      const useChartsMock = vi.mocked(useCharts)
+      const originalUseCharts = useChartsMock.getMockImplementation()!
+      useChartsMock.mockImplementation(() => ({
+        ...originalUseCharts(),
+        fetchPackageDownloadEvolution: vi.fn().mockResolvedValue(mockWeeklyDownloads),
+      }))
+      const wrapper = await mountSuspended(PackageTrendsChart, {
+        props: {
+          weeklyDownloads: mockWeeklyDownloads,
+          packageNames: ['vue', 'nuxt'],
+        },
+      })
+      await flushPromises()
+      await vi.waitFor(() => {
+        expect(wrapper.find('input[role="switch"]').exists()).toBe(true)
+      })
+      useChartsMock.mockImplementation(originalUseCharts)
+      expect(wrapper.find('#combined-chart-layout-tab').exists()).toBe(true)
+      const toggle = wrapper.get('input[role="switch"]')
+      await toggle.setValue(true)
+      expect(wrapper.find('table').exists()).toBe(true)
+      expect(wrapper.find('#combined-chart-layout-tab').exists()).toBe(false)
+      expect(wrapper.find('#split-chart-layout-tab').exists()).toBe(false)
+      const results = await runAxe(wrapper)
+      expect(results.violations).toEqual([])
+      await toggle.setValue(false)
+      expect(wrapper.find('#combined-chart-layout-tab').exists()).toBe(true)
+      expect(wrapper.find('#combined-chart-layout-panel').exists()).toBe(true)
+      wrapper.unmount()
+    })
+
+    it('labels the incomplete monthly endpoint in table view even with prediction disabled', async () => {
+      const useChartsMock = vi.mocked(useCharts)
+      const originalUseCharts = useChartsMock.getMockImplementation()!
+      useChartsMock.mockImplementation(() => ({
+        ...originalUseCharts(),
+        fetchPackageDownloadEvolution: vi.fn().mockResolvedValue([
+          { month: '2026-01', timestamp: Date.UTC(2026, 0, 1), value: 100 },
+          { month: '2026-02', timestamp: Date.UTC(2026, 1, 1), value: 200 },
+        ]),
+      }))
+      let wrapper: VueWrapper | undefined
+      try {
+        wrapper = await mountSuspended(PackageTrendsChart, {
+          props: { packageName: 'vue', permalink: true },
+          route: '/?granularity=monthly&start=2026-01-01&end=2026-02-15',
+        })
+        await flushPromises()
+        await vi.waitFor(() => {
+          expect(wrapper!.find('input[role="switch"]').exists()).toBe(true)
+        })
+        await wrapper.findAll('input[type="range"]').at(-1)!.setValue('0')
+        await wrapper.get('input[role="switch"]').setValue(true)
+        expect(wrapper.get('tbody').text()).toContain('*')
+        expect(wrapper.text()).toContain('* Estimation')
+        expect(wrapper.get('tbody tr').text()).not.toContain('Estimation')
+        const results = await runAxe(wrapper)
+        expect(results.violations).toEqual([])
+
+        await wrapper.findAll('input[type="date"]')[1]!.setValue('2026-02-28')
+        await flushPromises()
+        await vi.waitFor(() => {
+          expect(wrapper!.get('tbody').text()).not.toContain('*')
+          expect(wrapper!.text()).not.toContain('* Estimation')
+        })
+      } finally {
+        wrapper?.unmount()
+        useChartsMock.mockImplementation(originalUseCharts)
+      }
+    })
+
     describe('PackageTimelineChart', () => {
       it('should have no accessibility violations', async () => {
         const wrapper = await mountSuspended(PackageTimelineChart, {
@@ -1778,6 +1851,46 @@ describe('component accessibility audits', () => {
       const results = await runAxe(wrapper)
       expect(results.violations).toEqual([])
     })
+    it('has an accessible table view with heatmap markers and can return to the chart', async () => {
+      const yesterday = new Date()
+      yesterday.setUTCDate(yesterday.getUTCDate() - 1)
+      const day = yesterday.toISOString().slice(0, 10)
+      useChartsMock.mockImplementation(() => ({
+        ...originalUseCharts(),
+        fetchPackageDownloadEvolution: vi
+          .fn()
+          .mockResolvedValue([{ day, timestamp: yesterday.getTime(), value: 1234 }]),
+      }))
+
+      const wrapper = await mountSuspended(DailyDownloadsHeatmap, {
+        props: { packageName: 'vue' },
+      })
+      await flushPromises()
+      const toggle = wrapper.get('input[role="switch"]')
+      expect(wrapper.text()).toContain('Table view')
+      await toggle.setValue(true)
+
+      expect(wrapper.find('[data-test-id="vue-ui-heatmap-stub"]').exists()).toBe(false)
+      const table = wrapper.get('table')
+      expect(table.get('caption').text()).toContain('Downloads')
+      const rows = table.findAll('tbody tr')
+      const lastRow = rows.at(-1)!
+      expect(lastRow.get('th[scope="row"]').text()).toContain(String(yesterday.getUTCFullYear()))
+      expect(lastRow.get('td').text()).toBe('1.2K')
+      expect(lastRow.get('td [aria-hidden="true"]').attributes('style')).toContain(
+        'background-color',
+      )
+      expect(table.text()).toContain('No data')
+      expect(wrapper.get('[role="region"]').attributes('tabindex')).toBe('0')
+
+      const results = await runAxe(wrapper)
+      expect(results.violations).toEqual([])
+
+      await toggle.setValue(false)
+      expect(wrapper.find('table').exists()).toBe(false)
+      expect(wrapper.find('[data-test-id="vue-ui-heatmap-stub"]').exists()).toBe(true)
+      wrapper.unmount()
+    })
   })
 
   describe('TabRoot + TabList + TabItem + TabPanel', () => {
@@ -4341,6 +4454,72 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('PackageTrendsDataTable', () => {
+    it.each([1, 2])('has accessible headers and scrolling with %i packages', async count => {
+      const component = await mountSuspended(PackageTrendsDataTable, {
+        props: {
+          dataset: [
+            { name: 'vue', series: [1234, null] },
+            { name: 'nuxt', series: [0, 5678] },
+          ].slice(0, count),
+          packageNames: ['vue', 'nuxt'].slice(0, count),
+          dates: [Date.UTC(2026, 0, 1), Date.UTC(2026, 0, 8)],
+          metricLabel: 'Downloads',
+          dateFormatter: new Intl.DateTimeFormat('en', { timeZone: 'UTC' }),
+          maxHeight: 300,
+        },
+      })
+
+      expect(component.attributes('role')).toBe('region')
+      expect(component.attributes('tabindex')).toBe('0')
+      expect(component.attributes('aria-label')).toBe('Chart data table')
+      expect(component.get('caption').text()).toContain('Downloads')
+      expect(component.get('th[scope="colgroup"]').attributes('colspan')).toBe(String(count + 1))
+      expect(component.findAll('th[scope="col"]')).toHaveLength(count + 1)
+      expect(component.findAll('th[scope="row"]')).toHaveLength(2)
+      expect(component.text()).toContain('No data')
+      expect(
+        component
+          .get('tbody tr')
+          .findAll('td')
+          .map(cell => cell.text()),
+      ).toEqual(['1.2K', '0'].slice(0, count))
+
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+      component.unmount()
+    })
+    it.each([false, true])('labels estimated endpoints only when enabled (%s)', async estimated => {
+      const component = await mountSuspended(PackageTrendsDataTable, {
+        props: {
+          dataset: [
+            { name: 'vue', series: [100, 200] },
+            { name: 'nuxt', series: [100, null] },
+          ],
+          packageNames: ['vue', 'nuxt'],
+          dates: [Date.UTC(2026, 0, 1), Date.UTC(2026, 1, 1)],
+          metricLabel: 'Downloads',
+          dateFormatter: new Intl.DateTimeFormat('en', { timeZone: 'UTC' }),
+          maxHeight: 300,
+          estimatedLastValue: estimated,
+        },
+      })
+      const rows = component.findAll('tbody tr')
+      expect(rows[0]!.text()).not.toContain('Estimation')
+      expect(rows[1]!.findAll('td')[0]!.text()).toBe(estimated ? '200*' : '200')
+      expect(rows[1]!.findAll('td')[1]!.text()).toBe('No data')
+      expect(component.find('p').exists()).toBe(estimated)
+      expect(rows[0]!.get('td').attributes('aria-describedby')).toBeUndefined()
+      expect(rows[1]!.findAll('td')[1]!.attributes('aria-describedby')).toBeUndefined()
+      expect(rows[1]!.get('td').attributes('aria-describedby')).toBe(
+        component.element.querySelector('p')?.id,
+      )
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+      component.unmount()
+    })
+  })
+
   describe('PackageSecurityDowngradeAlert', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(PackageSecurityDowngradeAlert, {