TablePropertyInfo - "sortable": false brings Runtime error

[thorsten-wolf-neptune]

Hi, thanks for this amazing hands on session!

We tried to disable the sortable property for a column (height in our example) and end up with a javascript error:

Before Filter Bar:

After Filter Bar:

Up until and including excersise 1 it works but introducing the Filter Bar in excersise 2 then brings the above mentioned error.

[wridgeu]

Hey @thorsten-wolf-neptune

I just went through the tutorial myself and saw this issue so I had a look at it. I think it is because the metadata that is used is completely reused for both the Filterbar and the Table implementation/delegate in this example.

However, based on this source code (see image below; "validatePropertyDeep") I think it crashed because it tries to use the attribute sortable to apply it to some of the FilterBar configuration or at least validates it against the configuration, which does not work as it doesn't exist.

Here the callstack, so you can see that it is called in the validation of the properties for the FilterBar

To work around that, you might exclude this property in the FilterBarDelegate (somewhat like it was done for the $search property for the TableDelegate in this tutorial).

JSONFilterBarDelegate.fetchProperties = async () => {
	const test = JSONPropertyInfo.map((e) => {
		if (Object.hasOwn(e, "sortable")) {
			delete e.sortable;
			return e;
		}
		return e;
	});
	return test;
};

Seems to work just fine for me this way. At least the main table, as in your screenshots.
(of course the map, delete etc. is just a quick 'n dirty test of mine. Have at it. (: )

hth.- Marco

[koeppel]

Hey @thorsten-wolf-neptune,

Sorry for the late answer..

As @wridgeu mentioned the "sortable" property is not supported in the PropertyInfo of the FilterBar. You could either remove it in the fetchProperties of the FilterBarDelegate or check for the label in the TableDelegate to set the "sortable" property correctly when creating the columns.

Best Regards,
Janik