I have a column with text and a small icon beside the text.

The text is one property in the data object. The URL to the icon is another property in the data object.

Example object:
{
TextProperty: "Some Text",
ImageProperty: "/images/image.jpg"
}

Column definition:
{
headerText: "Header",
key: "TextProperty",
dataType: "string",
template: "<img src = ${ImageProperty}></img> ${TextProperty}"
}

The problem here, is that with TextProperty as the key ImageProperty does not exist.

If I view source once the column is rendered I see that ImageProperty is set to "(unknown)". 

Likewise, if I use the ImageProperty as the key the TextProperty is not found.

To solve this, I moved both properties in a container object and changed the dataType in the column definition to object.

Example object:
{
ContainerObject: {
TextProperty: "Some Text",
ImageProperty: "/images/image.jpg"
}
}

Column definition:
{
headerText: "Header",
key: "ContainerObject",
dataType: "object",
template: "<img src = ${ContainerObject.ImageProperty}></img> ${ContainerObject.TextProperty}"
}

In this way the entire container object is now bound and data exists for both the image and the text - exactly what I want.

But a new problem arises, which is that filtering no longer works on this column.

In summary:

• If I use a dataType of string and set the key to a single property, I lose access to the other property.
• If I use a dataType of string and set the key to an object, binding does not work.
• If I use a dataType of object and set the key to an object containing both properties, string filtering does not work.
  

I also tried overriding toString() on ContainerObject to see if filtering was perhaps using toString(), but this did nothing.

How can I create a column definition that uses two properties on the data object, but also allows filtering?