question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: Filter rows with complex data based on Select component

See original GitHub issue

Hi! thanks for your efforts and this library!

I’m on the middle of implementing it in a project of mine (and doing great with it), but I came to a problem to which I cannot find an answer from de demos:

Imagine you have a table with data like this:

const tableData = [
  {name: 'Rafael', age: 10, group: {id: 2, name: 'Developer'}},
  {name: 'Alex', age: 20, group: {id: 1, name: 'Admin'}},
  ...
]

As you can see, the “group” field is of object type, not a scalar. I am trying to add a custom RowFilter like this: Screenshot from 2021-03-17 11-41-38

(I am referring to the last column, with a “Unidades” header) In this case, the column shows “Units” information but the rough use case is the same.

I cannot find a way to implement that column filter, because the actions provided (updateFilterRowValue) only let me change the “value” of the filter but not the comparation function.

example, I can set “value” to {id: 2, name: "Developer"}, but the ka-table internally doesn’t seem to know how to handle that kind of data.

Something like the “search” function passed in the props would be great, so I can do something like:

function customFilter(cellProps) {
  if (cellProps.column.key === 'Group') {
    // allows me to return a function that will handle the filter in this scenario, 
    // but keeping the default filtering system otherwise:
    return (filterValue, cellValue) => filterValue.name === cellValue.name
  }
}

Is there a way to implement this? I have also found the “extendedFilter” function, but it seems to take only the tableData as parameter, and not the filter value or the column configuration, so it’s kind of hard to use in this case.

Resuming: The use case is having a rowFilter which displays a Select component, and each cell in that column also has a Select component.

The filter might be a Simple select (exact match) or a MultiSelect (pick N items), and each of these cases probably would require specialized filter functions, which I should provide

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
komarovalexandercommented, Mar 17, 2021

Btw, small note regarding objects in data: you can access field using dots in field name: columns:[{ key: ‘group.name’ }] - maybe it could be useful for simple cases with single selection and for sorting as well - it is just FYI, anyway, additional customization abilities will be added

Read more comments on GitHub >

github_iconTop Results From Across the Web

Creating a Drop Down Filter to Extract Data Based on Selection
Learn how to create a Drop Down Filter in Excel. When you select an item from the drop down, it extracts the data...
Read more >
Filtering rows based on "complex" strings in a column R/dplyr
The problem is - I want to only pick the IDs that have N in them - or - IDs that don't have...
Read more >
Excel FILTER function with formula examples - Ablebits
The FILTER function in Excel is used to filter a range of data based on the criteria that you specify. The function belongs...
Read more >
row filter with multiple clauses - Microsoft Power BI Community
Solved: Hi, I'm building a dashboard with a data set where I want to filter the rows down by multiple OR clauses. It...
Read more >
Filtering – Databases and SQL
One of the most powerful features of a database is the ability to filter data, i.e., to select only those records that match...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found