How highlight part of text equal to search input in a data table

How highlight part of text equal to search input in a data table

  

Dear forum,

I've got a problem. I've got a big data table with a search function. In this search function i search in multiple columns in the data table. The problem is that it can be a little confusing to find what you are looking for. For example, if you search for "500" then multiple columns could have that number but you are only interested in 1 column.

So what i want to do is the text or numbers in the datatable should be Bold or highlighted when it's equal to the search input. This could be the whole expression or only part of the expression. The idea is that this will make it much more obvious where you should look for the things you are searching for.


How can i achieve this?

Hi Yorin,


If you're using a TableRecords component, which I think you are, you can use this Extended Property (style) on the Row subcomponent from the TableRecords:


SyntaxEditor Code Snippet

If(Transaction.SomeField = SearchInput2, "background-color:rgb(r, g, b);", "")

Where "SomeField" is the field of the table you want to match with the search input and "r", "g" and "b" are numbers from 0 to 255 to choose whatever color you want.



As you can see, I handle the highlight ( rgb(255, 255, 183) ) by the value, true or false of the checkbox.



Hope it helps.


Jordi.

Jordi Gisbert Ponsoda wrote:

Hi Yorin,


If you're using a TableRecords component, which I think you are, you can use this Extended Property (style) on the Row subcomponent from the TableRecords:


SyntaxEditor Code Snippet

If(Transaction.SomeField = SearchInput2, "background-color:rgb(r, g, b);", "")

Where "SomeField" is the field of the table you want to match with the search input and "r", "g" and "b" are numbers from 0 to 255 to choose whatever color you want.



As you can see, I handle the highlight ( rgb(255, 255, 183) ) by the value, true or false of the checkbox.



Hope it helps.


Jordi.

Hey Jordi,

Yes i am using the TableRecords component. However, i don't want to highlight a complete row but only exactly what i'm using as the searchinput. For example, pretty much what the CTR + F function does in the browser. See picture added for the example.



Yorin Roelofs wrote:

Jordi Gisbert Ponsoda wrote:

Hi Yorin,


If you're using a TableRecords component, which I think you are, you can use this Extended Property (style) on the Row subcomponent from the TableRecords:


SyntaxEditor Code Snippet

If(Transaction.SomeField = SearchInput2, "background-color:rgb(r, g, b);", "")

Where "SomeField" is the field of the table you want to match with the search input and "r", "g" and "b" are numbers from 0 to 255 to choose whatever color you want.



As you can see, I handle the highlight ( rgb(255, 255, 183) ) by the value, true or false of the checkbox.



Hope it helps.


Jordi.

Hey Jordi,

Yes i am using the TableRecords component. However, i don't want to highlight a complete row but only exactly what i'm using as the searchinput. For example, pretty much what the CTR + F function does in the browser. See picture added for the example.



Hi Yorin,


I'm afraid that goes beyond my knowledge :(  Maybe you can do something with CSS Styles together with Index text function.

Jordi.


I geuss i can use an extension like this. But i'd rather not use any more extensions for what i think should be something simple.