How to Highlight Text in a Table Using mark.js

This guide will show you how to implement text highlighting in a table using an external JavaScript library, mark.js.

Steps:

1. Integrate mark.js Library:

   • Add the following code to your Custom Scripts section:

     <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
     <style>
       mark {
         background: yellow;
         color: black;
       }
     </style>

2. Create a JavaScript Action:

   • In your project, add an action with one JavaScript step:

     const context = document.querySelector('ub-smart-table');
     const instance = new Mark(context);
     instance.unmark();
     instance.mark({{data}});

   • This code selects the table, initializes mark.js, removes any previous highlights, and then applies new highlights based on the data provided.

3. Add Text Input and Assign Action:

   • Incorporate a text input field in your UI.

   • Assign the action created in step 2 to the 'OnChange' event of the text input.

   • This setup ensures that whenever the input's value changes, the text in the table gets highlighted accordingly.

Conclusion: With these steps, you can easily highlight text in a table using mark.js. This feature enhances the user experience by allowing dynamic interaction with the table data.