Add a transform property to each column to transform a cell's value

[ProbablePrime]

Sometimes a cell's value might need transforming before display. This can happen for complex objects where toString or String(value) is not enough.

This adds an optional transform property to each columnOptions object. When specified this will run the provided function to mutate the value for display.

example:

columns: [{
	name:"two",
	transform: function(two) {
		return two + 2;
	}
}]

would add two to the column value for the column named "two".

You can see more in the added test.

[75lb]

Hi, great - thanks for the work.. I agree this is a useful, required feature - the only question is where this feature should sit. Will review and get back to you.

[75lb]

table-layout is a presentation layer component.. I'm not convinced this transform behaviour should live on table-layout because it affects the input data model not the visualisation (i.e. it doesn't affect/style how the data is presented).. also, what if you want to apply the same transformed data to multiple views? I think the usage should look more like this:

const data = [{ a: 1 }, { a: 2 }, { a: 3 }]
transformData(data) // transform the data before you pass it into multiple views
tableView.setData(data)
chartView.setData(data)

If we added this transform behaviour only to tableView then we would need to duplicate the feature on chartView in order to see the same result there.

Looking into some other ideas will get back to you..

[ProbablePrime]

Hmm i understand what you're saying. However:

it doesn't affect/style how the data is presented

This is exactly how I intend to use it though.

When it comes to my actual use case, i need to transform a Moment date to be presented using a particular date time formatting string. Without this the date is output in an incorrect way for my visualization needs.

In this case its purely a presentational change. The underlying data should(and for dates MUST) remain as a date. Particularly in other views It might need different formatting or handling.

e.g.

columns: [{
	name:"StartDate",
	transform: function(date) {
		return date.format('YYYY MM DD');
	}
}]

Could be used for one table but for a different table I might just need the day of the week:

columns: [{
	name:"StartDate",
	transform: function(date) {
		return date.format('dddd');
	}
}]

Essentially my presentation requirements on dates vary depending on the table i'm using them for.

[75lb]

just finishing off the next release.. take a look at this demo of your use case (transform is now get, since I plan to later add set)..
https://github.com/75lb/table-layout/blob/master/example/computed-values.js

The input data is here.

The first example uses your solution (the get() function) , the second achieves the same result with native JS and zero modification to the library.. The output:

You can probably see where I'm going with this.. do we even need to add and maintain this feature when it can be done natively..

[75lb]

Colour-scale formatting..
https://github.com/75lb/table-layout/blob/master/example/colour-scale-formatting.js

Again, it can be done without a change to the table-layout library but could be a nice-to-have built-in..

[75lb]

Released in v3.0.0, thanks.

I have more features planned for this library, will document and add to a Github project board.. let me know if you'd like to pick up any future tickets..