Add sort and reverse options to table

components/table.ts

@@ -82,6 +82,7 @@ export default function (input: {
 				"value": (options.columns[col].name && typeof options.data[row][options.columns[col].name]!=="undefined" ? options.data[row][options.columns[col].name] : ""),
 				"done": false
 			};
+			cells[row]._data = options.data[row];
 			let v = cells[row][col].value;
 			if(scales[col].scale){
 				if(typeof v==="string") v = parseFloat(v);
@@ -92,8 +93,39 @@ export default function (input: {
 			}
 		}
 	}
+	if("sort" in options){
+		if(typeof options.sort==="string") options.sort = [options.sort];
+		let sortOrder = new Array(options.sort.length);
+		for(let s = 0; s < options.sort.length; s++){
+			for(let col = 0; col < options.columns.length; col++){
+				if(options.columns[col].name==options.sort[s]){
+					sortOrder[s] = col;
+				}
+			}
+		}
+		cells = cells.sort(function(a,b){
+			let r,s,col,f1,f2;
+			for(s = 0; s < sortOrder.length; s++){
+				col = sortOrder[s];
+				// Convert to a number if necessary
+				f1 = parseFloat(a[col].value);
+				f2 = parseFloat(b[col].value);
+				if(f1==a[col].value) a[col].value = f1;
+				if(f2==b[col].value) b[col].value = f2;
+				if(typeof a[col].value==="string"){
+					r = a[col].value.localeCompare(b[col].value);
+				}else{
+					if(a[col].value > b[col].value) r = 1;
+					else if(a[col].value < b[col].value) r = -1;
+					else r = 0;
+				}
+				if(r != 0) return r;
+			}
+			return 1;
+		});
+	}
 
-	if("order" in options && options.order == "reverse") cells = cells.reverse();
+	if("reverse" in options && options.reverse) cells = cells.reverse();
 
 	let sty = '';
 	if(options.width) sty += 'width:'+options.width+';';
@@ -121,7 +153,10 @@ export default function (input: {
 				if(n>0) cellprops += ' rowspan="'+(n+1)+'"';
 				let colour = "";
 				let sty = "";
-				if(options.columns[col].colour) colour = namedColours.get(options.columns[col].colour);
+				if(options.columns[col].colour){
+					if(options.columns[col].colour in cells[row]._data) colour = colour = namedColours.get(cells[row]._data[options.columns[col].colour]);
+					else colour = namedColours.get(options.columns[col].colour);
+				}
 				if(options.columns[col].scale){
 					let v = cells[row][col].value;
 					if(typeof v==="string") v = parseFloat(v);

example-site/samples/table.njk

@@ -187,6 +187,60 @@ examples:
           align: center
           scale: Heat_r
           min: 0
+  - title: "Sort by column"
+    description: |
+      If you would like to sort the table by a particular column, you can set `sort` to the column `name`. You can also `reverse` the direction of the sort. Note that `sort` is applied before `mergerows`.
+    config:
+      width: "100%"
+      data:
+        - page: Liverpool City Region
+          co2: 5.33
+          size: 21.2
+        - page: Tendring District Council
+          co2: 3.90
+          size: 15.5
+        - page: London Borough of Newham
+          co2: 2.99
+          size: 13.7
+        - page: Melton Borough Council
+          co2: 2.95
+          size: 13.5
+        - page: Welwyn Hatfield Council
+          co2: 2.68
+          size: 10.6
+        - page: Dacorum Council
+          co2: 2.68
+          size: 10.6
+        - page: Harborough District Council
+          co2: 2.59
+          size: 10.3
+        - page: Bridgend County Borough Council
+          co2: 2.53
+          size: 10.0
+        - page: Reading Borough Council
+          co2: 2.34
+          size: 9.3
+        - page: Bournemouth, Christchurch and Poole
+          co2: 2.27
+          size: 9.0
+      columns:
+        - name: "Local Authority"
+          template: "{{ page }}"
+          sortable: true
+        - name: "CO2 (g)"
+          template: "{{ co2 | toFixed(2) }}"
+          align: center
+          scale: Heat_r
+          min: 0
+          sortable: true
+        - name: "Size (MB)"
+          template: "{{ size | toFixed(2) }}"
+          align: center
+          scale: Heat_r
+          min: 0
+          sortable: true
+      sort: "Size (MB)"
+      reverse: true
   - title: "Sortable columns"
     description: |
       If you would like to make it possible to sort by a particular column, you can set that column to `sortable`. It isn't currently possible to make a table sortable when `mergerows` has been used on any column.
@@ -256,6 +310,8 @@ options: |
   	<li><code>max</code> - Used with <code>scale</code> and <code>min</code> to define the colour scale. If not included, the maximum value of the column will be used.</li>
   	</ul>
   </li>
+  <li><code>sort</code> - the name of the column to sort by.</li>
+  <li><code>reverse</code> - (boolean) By default the order is from low to high but you can order from high to low if this is set to true.</li>
   <li><code>colours</code> - Define some <a href="/documentation/colours#specific-named-colours">visualisation-specific named colours</a>.</li>
   <li><code>width</code> - An optional minimum width (e.g. <code>100%</code>) for the table.</li>
   <li><code>attribution</code> - Add a line of <a href="/documentation/chart-furniture/#attribution">attribution text</a> under the visualisation.</li>