Merge pull request #129 from Anjalbaral/multi-order-table-sort

multi order table sort added, data grouping with separators added, da…
Packet-Clearing-House · Jun 12, 2024 · c21fb52 · c21fb52
2 parents 800b7f7 + 553fc66
commit c21fb52
Show file tree

Hide file tree

Showing 11 changed files with 1,138 additions and 394 deletions.
diff --git a/README.md b/README.md
diff --git a/docs/examples/table-sort.json b/docs/examples/table-sort.json
diff --git a/docs/examples/table-with-multi-column-sort.html b/docs/examples/table-with-multi-column-sort.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <link rel="stylesheet" href="../vendor/bootstrap.min.css">
+  <link rel="stylesheet" href="../maptable.css">
+  <title>MapTable example</title>
+  <style>
+    .sort_order_1 {
+      /* stylize primary sort column */
+    }
+  </style>
+</head>
+
+<body>
+
+  <script src="../vendor/d3.min.js" charset="utf-8"></script>
+  <script src="../vendor/topojson.min.js"></script>
+  <script src="../maptable.js"></script>
+
+  <div class="container">
+    <div class="panel panel-default">
+      <div class="panel-heading">[Example] Table with multi-column sort</div>
+      <div class="panel-body">
+        Demonstating: rendering a table and filters with multi-column sort<br />
+        <br>
+        <div class="btn-group">
+          <a href="./table-with-multi-column-sort.html" target="_blank" class="btn btn-default">Open in a new window</a>
+          <a href="https://github.com/Packet-Clearing-House/maptable/tree/master/docs/examples/table-with-multi-column-sort.html" target="_blank"
+            class="btn btn-default">View source code</a>
+        </div>
+      </div>
+    </div>
+    <div id="vizContainer"></div>
+  </div>
+  <script>
+    var viz = d3.maptable('#vizContainer')
+      .json('table-sort.json')
+      .columns({
+        position: {
+          filterMethod: 'dropdown',
+        },
+        office: {
+          filterMethod: 'dropdown',
+        },
+        month: {
+          title:"Joining Month",
+          filterMethod: 'dropdown',
+          filterInputType: 'months'
+        },
+        day: {
+          title:"Joining Day",
+          filterMethod: 'dropdown',
+          filterInputType: 'days'
+        },
+        links: {
+          virtual: function (d) {
+            return '<a href="#' + d.extn + '">Link</a>';
+          }
+        }
+      })
+      .filters({
+        show: ['name', 'position', 'office', 'month', 'day']
+      })
+      .table({
+        show: ['name', 'position', 'office', 'month', 'day', 'links'],
+        dataGroupSeparator: { enabled: true },
+        dataCountIndicator: { enabled: true },
+        defaultSorting: [{key:'month',mode:'desc'},{key:'day',mode:'asc'}],
+        customSortOrder: [{key:'day',order:['monday', 'tuesday', 'wednesday', 'thursday', 'friday','saturday','sunday',]},{key:'month',order:['february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december','january']}]
+      })
+      .render();
+
+  </script>
+
+
+</body>
+
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -78,6 +78,7 @@ <h1>MapTable <a href="https://github.com/Packet-Clearing-House/maptable" target=
     <a href="examples/negative-values.html" data-value="negative-values" target="viewer">negative values</a>
     <a href="examples/table-only.html" data-value="table-only" target="viewer">table only</a>
     <a href="examples/table-with-fixed-header.html" data-value="table-with-fixed-header" target="viewer">fixed table header</a>
+    <a href="examples/table-with-multi-column-sort.html" data-value="table-with-multi-column-sort" target="viewer">multi-order table sort</a>
     <a href="examples/tooltip-country.html" data-value="tooltip-country" target="viewer">tooltip country w/ legend</a>
     <a href="examples/heatmap.html" data-value="heatmap" target="viewer">heatmap</a>
     <a href="examples/aggregate.html" data-value="aggregate" target="viewer">aggregate</a>

diff --git a/docs/maptable.css b/docs/maptable.css
diff --git a/docs/maptable.js b/docs/maptable.js