Add a search bar inside of the "Header Filter"

[C0casio45]

Something like that

I tried to modify the default childComponents.popupContent but PopupContentItem is not accessible (or I miss something) and recoding the whole logic may be not the best idea...

What are your thought on this

Have a good day

[komarovalexander]

Great idea, I have it in my roadmap, will try to implement it in a week. I will keep you updated

[komarovalexander]

Hi @C0casio45 search bar has been added in v11.0.0 Demo: https://komarovalexander.github.io/ka-table/#/header-filter-logic

[C0casio45]

Hey, thanks a lot I have some questions First in your example, the only filterable score is 33, is it supposed to work like this ? Also, there is a way to cutomize the key passed to the underneath table ? (or getting a random one)

[komarovalexander]

First in your example, the only filterable score is 33, is it supposed to work like this ?

sorry did not get the question

Also, there is a way to cutomize the key passed to the underneath table ? (or getting a random one)

what purpose?

[C0casio45]

First in your example, the only filterable score is 33, is it supposed to work like this ?

My bad for this one I didn't get that 33 was already typed ...

Also, there is a way to cutomize the key passed to the underneath table ? (or getting a random one)

I am passing an object to it and getting this error

 Warning: Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at Rows (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:3704:35)
    at VirtualizedRows (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:3819:24)
    at TableBodyContent (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:3882:35)
    at tbody
    at TableBody (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:3952:35)
    at table
    at div
    at TableWrapper (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:5056:22)
    at div
    at TableControlled (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:5153:35)
    at TableUncontrolled (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:5260:21)
    at Table (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:913:28)
    at HeaderFilterPopupContent (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:1596:26)
    at div
    at div
    at HeaderFilterPopup (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:1766:26)
    at div
    at TableControlled (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:5153:35)
    at TableUncontrolled (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:5260:21)
    at Table (http://localhost:3000/node_modules/.vite/deps/chunk-MVUGCKE5.js?v=526fafc0:913:28)

I also mentionned that large playload of headers are not rendered with virtualization, is it intendeed ?

[komarovalexander]

Can you share the link to example with the error on stackblitz https://stackblitz.com/edit/table-header-filter-logic-ts?file=Demo.tsx ?

[C0casio45]

I have no access to satckblitz here, it's blocked by the company policies...

This is my column

{ 
    key: "componentSoftwareVersions",
    title: "Software Versions", 
    dataType: DataType.Object, 
    visible: true, 
    headerFilterListItems: softwareVersionsFilterListItems, 
    filter: (value, filterValue) => 
      filterValue?.some((x: any) => 
        value.some(((v: any) => v.id === x.id))), 
    isHeaderFilterSearchable: true, 
    headerFilterSearch: (value, searchValue) => 
      value.softwareVersion.software.name.toLowerCase().includes(searchValue.toLowerCase())
  },

This is the case in the format property of the Table

          case "componentSoftwareVersions":
            return value?.map((v: any) => v.softwareVersion.software.name + " " + v.softwareVersion.version).join(", ") ?? "∅";

This is part of the childComponent property of the Table

        headerFilterPopupTextCell: {
          content: ({ value }) => {
            if(value.employee) return value.employee.fullName
            if(value.softwareVersion) return value.softwareVersion.software.name + " " + value.softwareVersion.version
            return value.name
          }
        }

This is an example of the object itself

{
  id: "AAA-123",
  componentSoftwareVersions: [
    {id: "6977"
    softwareVersion: {
          id: "2"
       software: {
          name: "React"
       }
       version: "18.3.1"}},
    {id: "6978"
    softwareVersion: {
          id: "1"
       software: {
          name: "Vitejs"
       }
       version: "5.3.0"}},
  ]
}

I also checked that all my componentSoftwareVersions.id

[komarovalexander]

headerFilterListItems is a function which should return array of strings. Check demo https://komarovalexander.github.io/ka-table/#/header-filter-logic

And docs: https://ka-table.com/docs_props.html#toc1