Aldeed tabular sort the formatted number

help
1

Hi Guys.

I use aledeed:tabular as the datatables. it is very great and very fast render to show the data.
But I have a problem with sorting the formatted number.

  1. I use numeral:numeral package to formatting the number.
  2. I save the formated data in mongoDB
  3. Then I use aldeed:tabular to show this data as the picture below.

In the picture above, the “Nilai” column is sorted descending but the value was not right.

Is there anyone has the idea about this issues of mine??
Really appreciate the help

Thanks :slight_smile:

2

I would leave data saved as numbers and use transform only in template.
It kinda changes with localization too, so better design it from start that way anyway.

2 Likes
3

Yeah that’s the point. I don’t have any idea how to transform the number data into formatted number in aldeed:tabular. this is my tabular code

TabularTables.PiutangSummary = new Tabular.Table({
  	name: "PiutangSummaryList",
  	collection: tblPiutangSummary,
	autoWidth:true,
  	columns: [
		{data:"nilai", title:"Nilai",class:"right", width:"15%"},
		{data:"deptCode", title:"Kode Dept", visible:false},
	]

});

I Tried to change into this code below, but I failed again

TabularTables.PiutangSummary = new Tabular.Table({
      	name: "PiutangSummaryList",
      	collection: tblPiutangSummary,
    	autoWidth:true,
      	columns: [
    		{data:numeral(nilai).format('0,0.00'), title:"Nilai",class:"right", width:"15%"},
    		{data:"deptCode", title:"Kode Dept", visible:false},
    	]
    
    });

Im really stuck here that I can’t transform number into formatted number. So alternatively, I save the formatted number into the collection so the tabular is only pull the formatted data into table. but the problem is the sort. LOL

4

Define the transform where you define the collection. There is an options object which has a transform methid allowing you to automatically create additional document properties when documents are referenced from the collection.

Caveat: I haven’t tested this with aldeed:tabular.

1 Like
5

Thanks guys for yor answer and it really helpfull. By the way I’ve done it by using render function that aldeed:tabular had provided. Here is my code

TabularTables.PiutangSummary = new Tabular.Table({
  	name: "PiutangSummaryList",
  	collection: tblPiutangSummary,
	autoWidth:true,
  	columns: [
		{data:"processDate", title:"Process Date", width:"12%"},
		{data:"branchCode", title:"Cabang", visible:true, width:"5%"},
		{data:"accountNumber", title:"Acc Number", width:"10%"},
		{data:"customerID", title:"Customer ID", visible:false},
		{data:"partyName", title:"Pelanggan"},
		{data:"channel", title:"Channel"},
		{data:"nilai", title:"Nilai",class:"right", width:"15%", 
			render: function(val, type, doc){
				return numeral(val).format('0,0.00')
			}},//numeral(b[5]).format('0,0.00')
		{data:"deptCode", title:"Kode Dept", visible:false},
		{data:"channelCode", title:"Channel", visible:false},
		{data:"createdBy", title:"Created By", visible:false},
		{data:"createdAt", title:"Created By", visible:false},
		{data:"lastEditBy", title:"Last Edit By", visible:false},
		{data:"lastEditAt", title:"Last At By", visible:false},
		{data:"reason", title:"Status"},
		{data:"followUp", title:"Follow Up"},
		{data:"hasil", title:"Hasil"}
	]
});

Just put the render function and put the desired format, and TA DA, the formatted number appeared and the sort works as well.

Thanks guys

You guys are great :smiley:

6

Yes, there is a lot of magic in some kinda frameworks.

For example I was deciding what tool to use when I grab all events user is subscribed to on FB and than I wanted him to pick one which he want to link to youtube stream on my livestream HUB manage interface.

So I seen that Autoform have select2 plugin.

But than I realized that I need to feed the values to it after async fetch of data finished and that autoform select2 did not react even to reactive helpers.

So I had to force it to use remote to return actual results every keyup.
With remote you are doing even match remotely, so I prepared my own regexp matcher.

Than I did not like the format it shown me, so I had to rewrite kinda render function, I dont remember how these templates were exactly called. Than realized that placeholder needs it’s own template.

And now I feel like it would be faster to create it as my own component from scratch :smiley:

7

I ended up something similar. Note, that instead of visible:false, you can also use the extraFields option.

And a question: how can I add custom sorting? I have IP addresses in a collection, and I would like “proper sorting”. IP address is stored as an array of nubers, but the sorting seems buggy.

8

well @pihentagy, your case is more complex than mine.
I think the method to fix this sort is same as me.

  • you just save the “Actual format” data in mongoDB
  • and you use render function in aldeed:tabular and use some package that enable to transform the data into IP formatted.

But the big problem is, what is the package that meteor can use to format a number into an IP address?
maybe @shock and @robfallows knows how to solve this with the simplest way

9

well, IP is just set of 4 numbers, so strip it to these numbers and sort by 1st byte, than by 2nd byte.
http://microjs.com/#thenBy
that would be solution to do it, word by word by custom sorting.

Still IP is constructed same way as normal number and same positional priorities. So I would just strip ‘.’ from it ( fill 0-es so every part is 3digit number ), convert from string to number and sorting should work.
That would be more logical solution for me :smiley:

10

I’d probably look at using the Data Tables IP Address plug-in. It basically does what @shock says, but it’s all ready to - errm - plug in :smile:

Note, however, that it only handles IPv4 addresses.

11

Still wonder how can I plug this solution to tabular?

12

Ok, despite verifying that this code does something (at least the ‘pre’ function is running), the sorting is still not ok. I added console.log to ‘ip-address-pre’, and saw, that the function is called for just the displayed elements, so it cannot change sort order. ‘ip-address’asc’ and ‘ip-address-desc’ are not called at all.

13

So maybe you need Mongo to do the sorting as @marczzio12 suggests. So, save the IP address in Mongo as an 8-byte hex string and use the render function to reformat into standard octet form:

Encoding (IP to hex):

const ipToHex = function(ip) {
  return ip.split('.').map(octet => {
    return (+octet).toString(16).replace(/^(.)$/, '0$1');
  }).join('')
}

Decoding (val is the hex encoded IP string):

render: function(val, type, doc) {
  return val.match(/(..?)/g).map(pair => {
    return parseInt(pair,16);
  }).join('.');
}

Natural sorting will work fine using this technique, but you should apply an index to the MongoDb field you are storing the encoded IP into.