{"id":3473,"date":"2013-08-19T07:00:00","date_gmt":"2013-08-19T07:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/2013\/08\/19\/the-tiny-table-sorter-or-you-can-write-linq-in-javascript\/"},"modified":"2013-08-19T07:00:00","modified_gmt":"2013-08-19T07:00:00","slug":"the-tiny-table-sorter-or-you-can-write-linq-in-javascript","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20130819-00\/?p=3473","title":{"rendered":"The tiny table sorter – or – you can write LINQ in JavaScript"},"content":{"rendered":"

\nI had a little side project that displayed status information in a table,\nand I figured,\nhey,\nlet me add sorting.\nAnd it was a lot easier than I thought.\nI just put the header row in the THEAD<\/code> and the table\ncontents in the TBODY<\/code>,\nthen I could use this code to sort the table:\n<\/p>\n

\nfunction sortByColumn(table, sortCol, direction) {\n direction = direction || 1; \/\/ default sort ascending\n var tBody = table.tBodies[0];\n Array.prototype.map.call(tBody.rows, function (row) {\n   var cell = row.cells[sortCol];\n   return { row: row, key: cell.sortKey || cell.innerText };\n }).sort(function (a, b) {\n   if (a.key < b.key) return -direction;\n   if (a.key > b.key) return direction;\n   return 0;\n }).forEach(function (o) {\n   tBody.appendChild(o.row);\n });\n}\n<\/pre>\n
\nEach cell can have an optional sort­Key<\/code> custom attribute\nwhich specifies how the item should sort.\nIf there is no sort­Key<\/code>, then I just use the cell’s\ninner­Text<\/code>.\n(My table was constructed at runtime from an\nXml­Http­Request<\/code>,\nso adding the sort­Key<\/code> to the date fields was not difficult.)\n<\/p>\n
\nOne handy thing about the functions in the Array<\/code> prototype\nis that as a rule, they do not actually require that the this<\/code>\nobject be an array.\nAs long as it has a length<\/code> property and integer subscripts,\nyou can use it as if it were an array.\nThe map<\/code> function is okay with read-only access;\nsome other function like sort<\/code> require read-write access.\nTo call a function with a custom this<\/code> parameter,\nyou use the call<\/code> method on the function object itself,\npassing the artificial this<\/code> as the first parameter,\nwith the remaining parameters following.\n<\/p>\n
\nFirst, the sort­By­Column<\/code>\nfunction takes the rows of the table body and\nmap<\/code>s each one to a record consisting of the sort key\nand the original row.\nThe sort key is the sort­Key<\/code> property,\nif true-ish, we will use it; otherwise, we use the text of the cell.\n<\/p>\n
\nI took a few shortcuts here.\nDepending on your browser, you may need to use\ntext­Content<\/code> instead of inner­Text<\/code>,\nand you may need to use get­Attribute<\/code> instead of\nproperty notation.\nAnd my function doesn’t handle the case where the sort key is defined\nbut is false-ish.\nHere’s a more general version:\n<\/p>\n
\nvar textProperty = table.innerText ? \"innerText\" : \"textContent\";\n...\n   return { row: row,\n            key: cell.hasAttribute(\"sortKey\") ?\n                 cell.getAttribute(sortKey\") :\n                 cell[textProperty] };\n...\n<\/pre>\n
\nAnyway, after we map the rows to an array of sort records,\nwe sort the records by comparing the key<\/code>,\neither by string or by number.\nThe code assumes that every column is either all-strings or all-numbers;\nit doesn’t try to handle the mixed case.\nThis is easy to enforce in the code\nthat generates the table\nbecause the only way to get a non-string\nas a sort key is to set it explicitly as the sort­Key<\/code>\nattribute.\n<\/p>\n
\nFinally, we take the sorted records and insert the sorted rows back\ninto the table.\n<\/p>\n
\nThis is a common programming pattern: Decorate, operate, undecorate.¹\nWe started with a bunch of rows,\nand we wanted to sort them.\nWe can’t sort rows directly, so instead we converted the rows\ninto something we can<\/i> sort, but remembered the row that each\nconverted item came from.\nWe then perform the sort operation,\nand then recover the original rows from the decoration,\nnow in sorted order,\nwhich we can then use for whatever operation we really wanted.\nI sort of combined the last two step into one.\nMore formally, it would look like this:\n<\/p>\n
\nfunction sortByColumn(table, sortCol, direction) {\n direction = direction || 1; \/\/ default sort ascending\n var tBody = table.tBodies[0];\n \/\/ decorate: convert the row into a record<\/font>\n Array.prototype.map.call(tBody.rows, function (row) {\n   var cell = row.cells[sortCol];\n   return { row: row, key: cell.sortKey || cell.innerText };\n })\n \/\/ operate on the record<\/font>\n .sort(function (a, b) {\n   if (a.key < b.key) return -direction;\n   if (a.key > b.key) return direction;\n   return 0;\n })\n \/\/ undecorate: convert the record back into a row\n .map(function (o) {\n   return o.row;\n })\n \/\/ operate on the sorted rows\n .forEach(function (r) {\n   tBody.appendChild(r);\n })<\/font>;\n}\n<\/pre>\n
\nCategory theorists I’m sure have some fancy names they can use to describe\nthis concept,\nlike natural transformation<\/i> and functor category<\/i>\nand splitting<\/i>.\n<\/p>\n
\nLINQ also has a fancy name for this: let<\/i>, which is\n\na special case of select<\/i><\/a>\nwhere LINQ generates the record for you.\n<\/p>\n\n\n\n\n\n\n
LINQ let query<\/th>\nfrom d in data let y = f(d.xValue)<\/code><\/td>\n
LINQ query<\/th>\nfrom d in data\n         select new { d = d, y = f(d.xValue) }<\/code><\/td>\n<\/tr>\n
LINQ fluent<\/th>\ndata.Select(d =>\n        new { d = d, y = f(d.xValue) })<\/code><\/td>\n<\/tr>\n
LINQ fluent
old delegate syntax<\/th>\n		data.Select(delegate(Data d) {\n        return new { d = d, y = f(d.xValue) }; })<\/code><\/td>\n<\/tr>\n
JavaScript<\/th>\ndata.map(function (d)\n        { return { d: d, y: f(d.xValue) }; })<\/code><\/td>\n<\/tr>\n<\/table>\n
\nJavaScript’s map<\/code> is the same as LINQ’s Select<\/i>,\njust with different decorative bits.\n<\/p>\n\n\n\n
\n      data.Select(delegate(Data d)\n            { return new { d = d, y = f(d.xValue) }; })<\/code><\/td>\n<\/tr>\n
\n      data.map   (function(     d)\n            { return    \n              { d:  d, y:  f(d.xValue) }; })<\/code><\/td>\n<\/tr>\n<\/table>\n
\nSimilarly,\nJavaScript’s filter<\/code> is the same as LINQ’s Where<\/i>,\nJavaScript’s some<\/code> is the same as LINQ’s Any<\/i>,\nJavaScript’s every<\/code> is the same as LINQ’s All<\/i>,\nand\nJavaScript’s reduce<\/code> is the same as LINQ’s Aggregate<\/i>.\nJavaScript’s sort<\/code> is sort of like LINQ’s Sort<\/i>,\nexcept that it modifies the array in place rather than generating a new\nresult.\n<\/p>\n
\nBonus chatter<\/b>:\nIn theory, I could’ve just sorted the table directly by doing the\nsort key extraction inside the comparator:\n<\/p>\n
\nfunction sortByColumn(table, sortCol, direction) {\n direction = direction || 1; \/\/ default sort ascending\n var tBody = table.tBodies[0];\n Array.prototype.map.call(tBody.rows, function (r) {\n   return r;\n }).sort(function (a, b) {\n   var keyA = a.cells[sortCol].sortKey || a.cells[sortCol].innerText;\n   var keyB = b.cells[sortCol].sortKey || b.cells[sortCol].innerText;\n   if (keyA < keyB) return -direction;\n   if (keyA > keyB) return direction;\n   return 0;\n }).forEach(function (r) {\n   tBody.appendChild(r);\n });\n}\n<\/pre>\n
but since I had to convert the rows into an array anyway\n(since you cannot modify the rows<\/code> property by subscript\nassignment), I figured I’d do the extracting while I was there.\n<\/p>\n
\nI guess I could’ve added a LINQy sort method:\n<\/p>\n
\nfunction defaultComparator(a, b) {\n  if (a < b) return -1;\n  if (a > b) return 1;\n  return 0;\n}\nArray.prototype.orderBy =\nfunction Array_orderBy(extractKey, comparator, direction) {\n  direction = direction || 1;\n  comparator = comparator || defaultComparator;\n  return Array.prototype.map.call(this, function (d) {\n    return { key: extractKey.call(d), original: d };\n  }).sort(function (a, b) {\n    return direction * comparator(a.key, b.key);\n  }).map(function (r) {\n    return r.original;\n  });\n};\n<\/pre>\n
\nThen my sort­By­Column<\/code> function would just be\n<\/p>\n
\nfunction sortByColumn(table, sortCol, direction) {\n direction = direction || 1; \/\/ default sort ascending\n var tBody = table.tBodies[0];\n Array.prototype.orderBy.call(tBody.rows, function (r) {\n   var cell = r.cells[sortCol];\n   return { key: cell.sortKey || cell.innerText, row: r };\n }, direction).forEach(function (r) {\n   tBody.appendChild(r);\n });\n}\n<\/pre>\n
\nBut if I had done that, I wouldn’t have had a cute one-function table sorter!\n<\/p>\n
\n¹\nIn perl, this pattern is known as the\n\nSchwartzian transform<\/a>.\nI prefer to think of it as completing the commutative diagram:\n<\/p>\n\n\n\n\n\n\n
<\/td>\n<\/td>\ng<\/var><\/td>\n<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nB<\/var><\/font><\/td>\n→<\/td>\nB<\/var><\/font><\/td>\n<\/tr>\n
f<\/var><\/td>\n↓<\/td>\n<\/td>\n↓<\/td>\nf<\/var><\/td>\n<\/tr>\n
<\/td>\nA<\/var><\/font><\/td>\n⇢<\/td>\nA<\/var><\/font><\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\n    f<\/var> ∘ g<\/var> ∘ f<\/var>⁻¹\n    <\/td>\n<\/td>\n<\/tr>\n<\/table>\n
\nMathematicians get all excited when they see something\nof the form\nf<\/var> ∘ g<\/var> ∘ f<\/var>⁻¹:\nThat’s the form of a conjugation operation.\nWhich makes sense, because conjugation is a way of\nlooking at an algebraic group through different-colored glasses.\nIn our case, the magic glasses make every row look like its sort key.\n<\/p>\n
\nBonus chatter<\/b>:\n\n$linq<\/a> is a Javascript LINQ library.<\/p>\n","protected":false},"excerpt":{"rendered":"
I had a little side project that displayed status information in a table, and I figured, hey, let me add sorting. And it was a lot easier than I thought. I just put the header row in the THEAD and the table contents in the TBODY, then I could use this code to sort the […]<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-3473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"
I had a little side project that displayed status information in a table, and I figured, hey, let me add sorting. And it was a lot easier than I thought. I just put the header row in the THEAD and the table contents in the TBODY, then I could use this code to sort the […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/3473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=3473"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/3473\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=3473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=3473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=3473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}