T
TanStack•2y ago
fascinating-indigo

How to filter by items and subItems

My data model is: { "id": 1, "name": "Pilot", "site_url": "products/pilot", "search_keywords": "pilot", "model": "Pilot", "brand": "BrandX", "price": 69, "popularity": null, "category": "BrandX", "category_id": 36, "status": "published" } 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 last (end) category of the brand, but if i search by Airplane, it will show me all products with that main category. 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 Is it even possible with tanstack table?
No description
No description
3 Replies
fascinating-indigo
fascinating-indigoOP•17mo ago
<> <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> </>
fascinating-indigo
fascinating-indigoOP•17mo ago
No description
fascinating-indigo
fascinating-indigoOP•17mo ago
Now i try to add subcategories to a category But how do i filter in onChange 
<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}
        />
<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}
        />

Did you find this page helpful?