If a column is an object, how ka-table is going to generate header values?
aleksei-baryshnikov opened this issue · 9 comments
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
.
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?
@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
@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
@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
@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
I actually found that format
does not contain information about rowData
, I will add it and will back to your soon with better example =)
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
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
- you can use
filterRow
https://komarovalexander.github.io/ka-table/#/filter-row-custom-logic - or override behavior of
childComponents?.popupContent
- 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 #364
let me know if you need to support lists as a value in headerFilter
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