Merge pull request #42412 from dipesh-rawat/add-filter-feature-table

Add sortable option to table shortcode

Author: k8s-ci-robot

content/en/docs/reference/command-line-tools-reference/feature-gates.md

@@ -52,7 +52,7 @@ For a reference to old feature gates that are removed, please refer to
 
 ### Feature gates for Alpha or Beta features
 
-{{< table caption="Feature gates for features in Alpha or Beta states" >}}
+{{< table caption="Feature gates for features in Alpha or Beta states" sortable="true" >}}
 
 | Feature | Default | Stage | Since | Until |
 |---------|---------|-------|-------|-------|
@@ -224,7 +224,7 @@ For a reference to old feature gates that are removed, please refer to
 
 ### Feature gates for graduated or deprecated features
 
-{{< table caption="Feature Gates for Graduated or Deprecated Features" >}}
+{{< table caption="Feature Gates for Graduated or Deprecated Features" sortable="true">}}
 
 | Feature | Default | Stage | Since | Until |
 |---------|---------|-------|-------|-------|

layouts/partials/head.html

@@ -83,6 +83,10 @@
 <!--script src="https://unpkg.com/split.js/dist/split.min.js"></script-->
 <script src="/js/split-1.6.0.js" intregrity="sha384-0blL3GqHy6+9fw0cyY2Aoiwg4onHAtslAs4OkqZY7UQBrR65/K4gI+hxLdWDrjpz"></script>
 
+{{- if .HasShortcode "table" -}}
+<script defer src="{{ "js/sortable-table.js" | relURL }}"></script>
+{{- end -}}
+
 {{- if eq (lower .Params.cid) "community" -}}
 {{- if eq .Params.community_styles_migrated true -}}
 <link href="/css/community.css" rel="stylesheet"><!-- legacy styles -->

layouts/shortcodes/table.html

@@ -1,6 +1,11 @@
 {{ $hasCaption := isset .Params "caption" }}
 {{ $caption    := .Get "caption" }}
+{{ $sortable   := .Get "sortable" }} 
 {{ $captionEl  := printf "<table><caption style=\"display: none;\">%s</caption>" $caption }}
 {{ $table      := .Inner | markdownify }}
 {{ $html       := cond $hasCaption ($table | replaceRE "<table>" $captionEl) $table | safeHTML }}
+<!-- Check if 'sortable' is true, and if so, add the 'sortable-table' class -->
+{{ if $sortable }}
+    {{ $html = replaceRE "<table>" "<table class=\"sortable-table\">" $html | safeHTML }}
+{{ end }}
 {{ $html }}

static/js/sortable-table.js

@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const tables = document.querySelectorAll(".sortable-table");
+    tables.forEach((table) => {
+      const headers = table.querySelectorAll("thead th");
+      headers.forEach((th, index) => {
+        th.style.cursor = "pointer";
+        th.addEventListener("click", () => sortTable(table, index));
+      });
+    });
+  });
+
+  function sortTable(table, column) {
+    const rows = Array.from(table.querySelectorAll("tbody tr"));
+    let sortOrder = table.getAttribute("data-sort-order") || "asc";
+    
+    rows.sort((a, b) => {
+      const aValue = a.querySelectorAll("td")[column].innerText;
+      const bValue = b.querySelectorAll("td")[column].innerText;
+      if (sortOrder === "asc") {
+        return aValue.localeCompare(bValue, undefined, { numeric: true, sensitivity: "base" });
+      } else {
+        return bValue.localeCompare(aValue, undefined, { numeric: true, sensitivity: "base" });
+      }
+    });
+
+    rows.forEach((row) => table.querySelector("tbody").appendChild(row));
+    
+    sortOrder = (sortOrder === "asc") ? "desc" : "asc";
+    table.setAttribute("data-sort-order", sortOrder);
+  }