In Ox.TableList, add a 'sort' property for columns (a function with two arguments, the item's value for this column and the full item object), so that the sort order can now depend on other keys (and we can abandon the pattern of passing the sort value as value and a complicated format function to get the actual value)

source/Ox.UI/js/List/TableList.js

@@ -7,12 +7,14 @@ Ox.TableList <f> TableList Widget
         clearButtonTooltip <s|''> Clear button tooltip
         columns <[o]|[]> Columns
             # Fixme: There's probably more...
+            align <s|'left'> ...
             editable <b> ...
             format <f> ...
             id <s> ...
-            removable <b> ...
-            map <f> function that maps values to sort values
             operator <s> default sort operator
+            removable <b> ...
+            resizable <b> ...
+            sort <f> function(value, object) that maps values to sort values
             title <s> ...
             titleImage <s> ...
             unformat <f> Applied before editing
@@ -173,10 +175,14 @@ Ox.TableList = function(options, self) {
     });
 
     self.format = {};
+    self.map = {};
     self.options.columns.forEach(function(column) {
         if (column.format) {
             self.format[column.id] = column.format;
         }
+        if (column.sort) {
+            self.map[column.id] = column.sort;
+        }
     });
 
     // Head
@@ -261,6 +267,7 @@ Ox.TableList = function(options, self) {
                 .concat(self.options.unique)
                 .concat(self.options.keys)
             ),
+            map: self.map,
             max: self.options.max,
             min: self.options.min,
             orientation: 'vertical',
@@ -366,8 +373,7 @@ Ox.TableList = function(options, self) {
             key: self.options.columns[i].id,
             operator: isSelected ?
                 (self.options.sort[0].operator == '+' ? '-' : '+') :
-                self.options.columns[i].operator,
-            map: self.options.columns[i].map
+                self.options.columns[i].operator
         }];
         updateColumn();
         // fixme: strangely, sorting the list blocks updating the column,
@@ -505,9 +511,9 @@ Ox.TableList = function(options, self) {
                 $cell = $('<div>');
             }
             $cell.addClass(
-                    'OxCell OxColumn' + Ox.toTitleCase(v.id) +
-                    (clickable ? ' OxClickable' : '') +
-                    (editable ? ' OxEditable' : '')
+                    'OxCell OxColumn' + Ox.toTitleCase(v.id)
+                    + (clickable ? ' OxClickable' : '')
+                    + (editable ? ' OxEditable' : '')
                 )
                 .css({
                     width: (self.columnWidths[i] - (self.options.columnsVisible ? 9 : 8)) + 'px',