If a column is an object, how ka-table is going to generate header values?

[aleksei-baryshnikov]

I am using v8.4.0 and if I have that structure as the data:

[{ id: "someId", name: "someName", someObjfField: { field: 'field }]

I am getting error when I click on the filter button in header

chunk-XBHG3ID7.js?v=e8f33272:11222 Uncaught Error: Objects are not valid as a React child (found: object with keys { field }). If you meant to render a collection of children, use an array instead.

[komarovalexander]

Hi @aleksei-baryshnikov can you modify the example https://stackblitz.com/edit/table-header-filter-ts?file=Demo.tsx and give the link to stackblitz with the issue please?

[aleksei-baryshnikov]

@komarovalexander Sure. I've also attached a screenshot. When I click on filter button I see [Object object]. How to map filter values if col values are objects?

https://stackblitz.com/edit/table-header-filter-ts-8tndwd?file=Demo.tsx

[komarovalexander]

@aleksei-baryshnikov I see, object columns can have keys with dots like {key: 'label.text',} - if you set up column setting this way it will work, and no need for childComponents to display the value for that case

here is a working example https://stackblitz.com/edit/table-header-filter-ts-rgrn84?file=Demo.tsx

cheers

[aleksei-baryshnikov]

@komarovalexander Oh, that is nice. But what if I need to use something like that '${label.text} ${label.type}'? More accurate example could be with name and surname: '${user.name} ${user.surname}'.

Or, If I have a list as a value? https://stackblitz.com/edit/table-header-filter-ts-eavy9r?file=Demo.tsx

[komarovalexander]

@aleksei-baryshnikov then I would recommend to use format function instead example: https://stackblitz.com/edit/table-header-filter-ts-qjjshl?file=Demo.tsx

childComponent customizes separate children components in table there is even childComponent.popupContentItem to customize separate item in the filter popup list, but format definitely better in your case

[komarovalexander]

I actually found that format does not contain information about rowData, I will add it and will back to your soon with better example =)

[komarovalexander]

More accurate example could be with name and surname: '${user.name} ${user.surname}'.

this can be done using rowData in format starting from 8.6.0

example: https://stackblitz.com/edit/table-header-filter-ts-9qld7v?file=Demo.tsx

[komarovalexander]

Or, If I have a list as a value? https://stackblitz.com/edit/table-header-filter-ts-eavy9r?file=Demo.tsx

this is more complex case 1) you can use filterRow https://komarovalexander.github.io/ka-table/#/filter-row-custom-logic 2) or override behavior of childComponents?.popupContent 3) or I can add support of filter function in header filter to make it work as a filter row example (1), but it will take some time, I created separate issue for that https://github.com/komarovalexander/ka-table/issues/364

let me know if you need to support lists as a value in headerFilter

[komarovalexander]

Or, If I have a list as a value? https://stackblitz.com/edit/table-header-filter-ts-eavy9r?file=Demo.tsx

starting from v8.7.0 it is possible, demo: https://komarovalexander.github.io/ka-table/#/header-filter-logic