[ Feature request ] : [ Table ] Added feature to highlight a word in the column if matched with searched term (#5413)

* init

* added feature to highlight the cell if it's value matches with searched tern

* reverting the unwanted changes

* removed unwanted changes

* added edge case for isEditable on click event

* minor bug fixes

* made changes to fix the edge case

* bug fixed: action button was not displaying in the column

frontend/src/Editor/Components/Table/GenerateEachCellValue.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from 'react';
+import _ from 'lodash';
+
+export default function GenerateEachCellValue({
+  cellValue,
+  globalFilter,
+  cellRender,
+  rowChangeSet,
+  rowData,
+  isEditable,
+  columnType,
+  isColumnTypeAction,
+}) {
+  const updateCellValue = useRef();
+  const [showHighlightedCells, setHighlighterCells] = React.useState(globalFilter ? true : false);
+  const columnTypeAllowToRenderMarkElement = ['text', 'string', 'default', 'number', undefined];
+
+  useEffect(() => {
+    if (_.isEmpty(rowChangeSet)) {
+      setHighlighterCells(true);
+    }
+  }, [rowData, rowChangeSet]);
+
+  let htmlElement = cellValue;
+  if (cellValue?.toString()?.toLowerCase().includes(globalFilter?.toLowerCase())) {
+    if (globalFilter) {
+      var normReq = globalFilter
+        .toLowerCase()
+        .replace(/\s+/g, ' ')
+        .trim()
+        .split(' ')
+        .sort((a, b) => b.length - a.length);
+      htmlElement = cellValue
+        .toString()
+        .replace(new RegExp(`(${normReq.join('|')})`, 'gi'), (match) => `<mark>${match}</mark>`);
+    }
+  }
+  return (
+    <div
+      onClick={(e) => {
+        e.persist();
+        if (isEditable && columnTypeAllowToRenderMarkElement.includes(columnType)) {
+          setHighlighterCells(false);
+        }
+      }}
+      onMouseLeave={(e) => {
+        e.persist();
+        updateCellValue.current = e.target.value;
+        if (!showHighlightedCells && updateCellValue.current === cellValue && _.isEmpty(rowChangeSet)) {
+          updateCellValue.current = null;
+          setHighlighterCells(true);
+        }
+      }}
+    >
+      {!isColumnTypeAction && columnTypeAllowToRenderMarkElement.includes(columnType) && showHighlightedCells ? (
+        <span
+          dangerouslySetInnerHTML={{
+            __html: htmlElement,
+          }}
+        ></span>
+      ) : (
+        cellRender
+      )}
+    </div>
+  );
+}

frontend/src/Editor/Components/Table/Table.jsx

@@ -40,6 +40,8 @@ import * as XLSX from 'xlsx/xlsx.mjs';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import { useMounted } from '@/_hooks/use-mount';
+import GenerateEachCellValue from './GenerateEachCellValue';
+// eslint-disable-next-line import/no-unresolved
 import { toast } from 'react-hot-toast';
 
 export function Table({
@@ -901,7 +903,15 @@ export function Table({
                           <div
                             className={`td-container ${cell.column.columnType === 'image' && 'jet-table-image-column'}`}
                           >
-                            {cell.render('Cell')}
+                            <GenerateEachCellValue
+                              cellValue={cellValue}
+                              globalFilter={state.globalFilter}
+                              cellRender={cell.render('Cell')}
+                              rowChangeSet={rowChangeSet}
+                              isEditable={cell.column.isEditable}
+                              columnType={cell.column.columnType}
+                              isColumnTypeAction={['rightActions', 'leftActions'].includes(cell.column.id)}
+                            />
                           </div>
                         </td>
                       );