How to filter by items and subItems

[zloegucci]

My data model now is:

type ColumnResultProducts = {
id: number;
name: string;
site_url: string;
search_keywords: string;
model: string;
brand: string;
price: number;
popularity: number;
category: string;
category_id: number;
status: string;
}

Product has category and subcategory, for example "Pilot" is an "Airplane" and it is of "BrandX" categories. How should i change data from backend and and how can i have search in filter by all categories and subcategories. So that in cell of the category, i have the category of the brand, but if i search by main category Airplane, it will show me all products with that main category. Or if i search by brand, it will show all products with such brand

In filter, for that field, i want select to look like:
Airplane
--brandX
--brandY
Sofa
--brandX
--brandY

And be able to filter by category and subcategory

i've tryed smth like this:

{
brand: 'brand1',
category: {
subcategories: ['brand1', 'brand12', 'brand123'],
title: 'title'
},
category_id: 12,
id: 1,
model: 'Pilot',
name: 'Pilot',
popularity: null,
price: 59020,
search_keywords: 'pilot',
site_url: 'products/pilot',
status: 'Опубликован'
}

<>
        <datalist id={column.id + 'list'}>
          {sortedUniqueValues.slice(0, 5000).map((value: any) => (
            <>
              <option
                key={value?.subcategories ? value?.title : value}
                value={value?.subcategories ? value?.title : value}
              />
              {value?.subcategories?.map((subValue: any) => (
                <option
                  key={subValue}
                  value={subValue}
                />
              ))}
            </>
          ))}
        </datalist>
        <DebouncedInput
          className={styles.searchInput}
          list={column.id + 'list'}
          onChange={value => {
            column.setFilterValue(value)

            if (value) table.toggleAllRowsExpanded(true)
            if (!value) table.toggleAllRowsExpanded(false)
          }}
          placeholder={`${placeholder}... (${column.getFacetedUniqueValues().size})`}
          type='text'
          value={(columnFilterValue ?? '') as string}
        />
</>

But i dont understand, how to filter. What should i pass to setFilterValue?

[zloegucci]

i do:

{
brand: 'brand1',
category: {
subcategories: ['brand1', 'brand12', 'brand123'],
title: 'title'
},
category_id: 12,
id: 1,
model: 'Pilot',
name: 'Pilot',
popularity: null,
price: 59020,
search_keywords: 'pilot',
site_url: 'products/pilot',
status: 'Опубликован'
}

{
        accessorKey: 'category',
        cell: info => (
          <Link
            className={styles.link}
            href={`${PAGE_CATEGORIES}/${info?.row?.original?.category_id}`}
            title='Редактировать'
          >
            {info?.row?.original?.category?.title}
          </Link>
        ),
        filterFn: (row, columnId, filterValue) => {
          if (!filterValue) return true

          /** получаем значение */
          const rowData = row?.getValue(columnId)

          if (typeof rowData === 'string') return rowData?.includes(filterValue)

          /** приводим к нижнему регистру */
          // @ts-ignore
          const title = rowData?.title?.toLowerCase()
          /** приводим к нижнему регистру */
          const filterValueLc = filterValue?.toLowerCase()?.replace(/^-+\s*/, '')?.trim()
          /** проверяем на совпадение */
          // @ts-ignore
          const subcategories = rowData?.subcategories?.map((subcategory: string) => subcategory?.toLowerCase()?.replace(/^-+\s*/, '')?.trim())

          return title?.includes(filterValueLc) || subcategories?.toString()?.includes(filterValueLc)
        },
        header: '',
        id: 'category'
      }