sorting dynamically added columns with numberSorter and semver

[corbosman]

I have an app where I dynamically add columns based on a dropdown by the user. The columns can be anything, strings, numbers, whatever. Im trying as best as I possibly can to make sense of sorting. These columns represent bits of data about servers, so a lot of the columns contain version numbers. But they can be anything from 4, 4.15, 4.14.1 etc. I tried using the numberSorter, as tablesorter detects all of these columns as numbers (even the 2.2.25 ones), but im running into an issue where numberSorter only receives 2.2 in that specific example. So it's being cast to a float or something.

I guess I could set all columns to text and use the textSorter, but then i run into problems needing to detect all different possible column type variations myself.

1. is it possible to get to the original value inside numberSorter?
2. if not, any hints/tips on how this could/should be solved? Maybe I need to make a version parser and set the type to text, and then in textSorter try and do the right thing based on if it's a semver match?

[Mottie]

Hi @corbosman!

I think you'll need to change your parser. A version number of 4 or 4.15 is not a valid semver. The numberSorter is sorting numbers, not strings, which is why the second decimal is ignored.

Maybe try this parser.

I might be able to give better advice if you shared a demo of how dynamic columns are being added & removed.

[corbosman]

Im adding and removing columns using vue, i destroy the current tablesorter and init a new one each time a user adds/removes a column. The user selects a piece of data from a huge list of items (hundreds), which represents stuff like 'apache_versions', 'debian_versions', but also 'kernelmajorversion', which isnt semver. It's basically a server data selector where a datacenter admin could for instance quickly find "all servers with a system board revision of XXXXX and running ubuntu". Or simply "all versions of postgres that we run internally".

I have a new idea though, the data items with version numbers seem to all have the string 'version' in their name. Im having vue add the sorter-version class to the th for all data with the version string. Then I can use a version parser and i'll try the below to parse digit-only version numbers. It exchanges the version string with a single digit that's sortable. At first glance it seems to be working ok. I'll probably get some complaints about non-digit version strings.

return String(num).split(".").reduce((a, c, i) => a + c * Math.pow(1000, (5-i)), 0)

[corbosman]

So this is what I'm using now which seems to work for all version-like strings that only contain digits.

$(this.$refs.tablesorter).tablesorter({
     theme: "bootstrap",
     widthFixed: true,
     widgets: ["filter", "zebra", "output"],

      widgetOptions: {
              zebra: ["even", "odd"],
              filter_cssFilter: "form-control",

              output_separator: ',',
              output_delivery: 'download',
              output_saveRows: 'visible',
              output_replaceQuote: '\u201c;',
              output_trimSpaces: true,
              output_saveFileName: 'output.csv',
      }
})

$.tablesorter.addParser({
      id: 'version',

      is: function() {
             // Do not auto detect
             return false;
       },

       format: function(text) {
              return String(text).split(".").reduce((a, c, i) => a + c * Math.pow(1000, (5-i)), 0)
       },

        type: 'numeric'
});

[Mottie]

Nice! Looks like that should work.