Add stickythead dependency and inject it

package/src/common/update-html-dependencies.ts

@@ -489,6 +489,9 @@ export async function updateHtmlDependencies(config: Configuration) {
   // Cookie-Consent
   await updateCookieConsent(config, "4.0.0", workingDir);
 
+  // Sticky table headers
+  await updateStickyThead(config, workingDir);
+
   // Clean existing directories
   [bsThemesDir, bsDistDir].forEach((dir) => {
     if (existsSync(dir)) {
@@ -594,6 +597,31 @@ async function updateCookieConsent(
   info("Done\n");
 }
 
+
+async function updateStickyThead(
+  config: Configuration,
+  working: string
+) {
+  const fileName = "stickythead.js";
+  const url = `https://raw.githubusercontent.com/rohanpujaris/stickythead/master/dist/${fileName}`;
+  const tempPath = join(working, fileName);
+
+  info(`Downloading ${url}`);
+  await download(url, tempPath);
+
+  const targetDir = join(
+    config.directoryInfo.src,
+    "resources",
+    "formats",
+    "dashboard",
+    "js"
+  );
+  await ensureDir(targetDir);
+
+  await Deno.copyFile(tempPath, join(targetDir, fileName));
+  info("Done\n");
+}
+
 async function updateHtmlTools(
   version: string,
   working: string,

src/format/dashboard/format-dashboard.ts

@@ -35,11 +35,7 @@ import { InternalError } from "../../core/lib/error.ts";
 import { formatResourcePath } from "../../core/resources.ts";
 import { ProjectContext } from "../../project/types.ts";
 import { registerWriterFormatHandler } from "../format-handlers.ts";
-import {
-  kBootstrapDependencyName,
-  kPageLayout,
-  kPageLayoutCustom,
-} from "../html/format-html-shared.ts";
+import { kPageLayout, kPageLayoutCustom } from "../html/format-html-shared.ts";
 import { htmlFormat } from "../html/format-html.ts";
 
 import { join } from "path/mod.ts";
@@ -60,7 +56,6 @@ import {
 import { processSidebars } from "./format-dashboard-sidebar.ts";
 import { kTemplatePartials } from "../../command/render/template.ts";
 import { processPages } from "./format-dashboard-page.ts";
-import { sassLayer } from "../../core/sass.ts";
 import { processNavButtons } from "./format-dashboard-navbutton.ts";
 import { processNavigation } from "./format-dashboard-website.ts";
 import { projectIsWebsite } from "../../project/project-shared.ts";
@@ -165,6 +160,12 @@ export function dashboardFormat() {
           path: formatResourcePath("dashboard", "quarto-dashboard.js"),
         });
 
+        // Add the sticky headers script
+        scripts.push({
+          name: "stickythead.js",
+          path: formatResourcePath("dashboard", join("js", "stickythead.js")),
+        });
+
         const componentDir = join(
           "bslib",
           "components",

src/resources/formats/dashboard/quarto-dashboard.js

@@ -42,6 +42,12 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
 
   manageOverflow();
 
+  const markdownTables = document.querySelectorAll(".card-body > table");
+  for (const markdownTable of markdownTables) {
+    const scrollableArea = markdownTable.parentElement;
+    stickyThead.apply([markdownTable], { scrollableArea: scrollableArea });
+  }
+
   // Fixup any sharing links that require urls
   // Append url to any sharing urls
   const sharingLinks = window.document.querySelectorAll(