Highlighting Table text using mark.js

This example may be useful when you need specific text within the table to stand out, say for search highlighting, filter feedback, contextual emphasis, etc. It enhances the user experience by allowing dynamic interaction with the table data. Here's how you can configure it in UI Bakery👇

1. Open the Custom code tab in the Builder's footer and add the following code to integrate the mark.js library:

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

1. Next, create a JavaScript Code action step and specify the following code:

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 applies new ones based on the data provided.

Instead of the {{data}} variable, you can refer to a Text input component, for example, {{ui.input.value}}.

1. Add a Text input component to the canvas and assign the action from step 2 to the component's On Change trigger.

Done! Now, when the value in the input changes, the text in the table is highlighted accordingly.