From d97c4a254eb8091e895e8494020368235707b827 Mon Sep 17 00:00:00 2001
From: Dipesh Rawat <rawat.dipesh@gmail.com>
Date: Mon, 7 Aug 2023 00:03:39 +0100
Subject: [PATCH] Add sortable option to table shortcode

---
 .../feature-gates.md                          |  4 +--
 layouts/partials/head.html                    |  4 +++
 layouts/shortcodes/table.html                 |  5 ++++
 static/js/sortable-table.js                   | 30 +++++++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 static/js/sortable-table.js

diff --git a/content/en/docs/reference/command-line-tools-reference/feature-gates.md b/content/en/docs/reference/command-line-tools-reference/feature-gates.md
index 5cdfeddead..c389f320c8 100644
--- a/content/en/docs/reference/command-line-tools-reference/feature-gates.md
+++ b/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 |
 |---------|---------|-------|-------|-------|
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fabfa4edc4..df4fba66ca 100644
--- a/layouts/partials/head.html
+++ b/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 -->
diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
index d92bc17a9c..7c58e93bb7 100644
--- a/layouts/shortcodes/table.html
+++ b/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 }}
\ No newline at end of file
diff --git a/static/js/sortable-table.js b/static/js/sortable-table.js
new file mode 100644
index 0000000000..9ea087af9c
--- /dev/null
+++ b/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);
+  }
\ No newline at end of file