komarovalexander/ka-table

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

aleksei-baryshnikov opened this issue · 9 comments

aleksei-baryshnikov commented

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 commented

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 commented

@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
Screenshot 2023-12-19 at 16 56 07

komarovalexander commented

@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 commented

@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 commented

@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 commented

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 commented

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 commented

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 #364

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

  • 👍1