d3 dates times and integers in table - d3.js

Question

Using the sortable table by Mingsong Hu I am displaying times and integers in some columns.
Here is the jsFiddle
I can get the time and integers to display, but is this the best way to do it? I feel it's a real hack!
The sortability of the table's columns is not working correctly. I think this is due to needing to be able to sort on times or alphabetically or on integers.
var rows = table.append('tbody').selectAll('tr')
.data(data).enter()
.append('tr');
rows.selectAll('td')
.data(function(d) {
return titles.map(function(k) {
return {
'category': d[k],
'name': k
};
});
}).enter()
.append('td')
.attr('data-th', function(d) {
return d.name;
})
.text(function(d) {
if (timeformat(d.category) == "NaN:NaN") {
return d.category
} else if (timeformat(d.category) == "00:00") {
return +d.category
} else {
return timeformat(d.category)
}
});

Answer 1

I have fixed it so that certain columns sort alphabetically and the rest numerically. Also I have fixed the time format for the display of times using typeof()=="object"
The updated jsFiddle also on github and demo on gh-pages.
Here's the new code,
var sortAscending = true;
var table = d3.select('#page-wrap').append('table');
var titles = d3.keys(data[0]);
var titles = ["raceplace", "name", "club", "clocktime", "category", "handicap", "racetime", "timeplace", "points"]
var headers = table.append('thead').append('tr')
.selectAll('th')
.data(titles).enter()
.append('th')
.text(function(d) {
return d
})
.on('click', function(d) {
headers.attr('class', 'header');
if (d == "name" || d == "club" || d == "category") { //these keys sort alphabetically
// sorting alphabetically");
if (sortAscending) {
rows.sort(function(a, b) {
return d3.ascending(a[d], b[d]);
});
sortAscending = false;
this.className = 'aes';
} else {
rows.sort(function(a, b) {
return d3.descending(a[d], b[d]);
});
sortAscending = true;
this.className = 'des';
}
} else {
if (sortAscending) {
//all other keys sort numerically including time
rows.sort(function(a, b) {
return b[d] - a[d];
});
sortAscending = false;
this.className = 'aes';
} else {
rows.sort(function(a, b) {
return a[d] - b[d];
});
sortAscending = true;
this.className = 'des';
}
}
});
var rows = table.append('tbody').selectAll('tr')
.data(data).enter()
.append('tr');
rows.selectAll('td')
.data(function(d) {
return titles.map(function(key, i) {
return {
'value': d[key],
'name': d
};
});
}).enter()
.append('td')
.attr('data-th', function(d) {
return d.name;
})
.text(function(d) {
//console.log("typeof(" + d.value + "): " + typeof(d.value));
if (typeof(d.value) == "object") {
//console.log("Yippee it's an object");
return timeformat(d.value)
} else {
return d.value
}
});