1 files changed, 25 insertions, 6 deletions

diff --git a/grid/src/grid.ts b/grid/src/grid.ts
index 0953268..4623dda 100644
--- a/grid/src/grid.ts
+++ b/grid/src/grid.ts
@@ -21,7 +21,6 @@ interface GridConfiguration {
 interface SearchConfiguration {
     dataIds: Array<string>;
 }
-
 interface GridColumn {
     dataId?: string;
     columnName: string | Function;
@@ -46,6 +45,7 @@ export default class Grid {
     private configuration: GridConfiguration;
     private domElement: Element;
     public currentPage: number = 0;
+    private searchIndex: JsSearch.Search;
 
     constructor(props: GridProps) {
         this.setOptions(props);
@@ -152,8 +152,17 @@ export default class Grid {
         wrapper.appendChild(row);
     }
 
-    private renderBody(data: Array<Object> = null): void {
-        const wrapper = this.domElement.querySelector("table tbody");
+    private renderBody(data: Array<Object> = null, isSearchResult: boolean = false): void {
+        let wrapper = this.domElement.querySelector("table tbody");
+        if (isSearchResult) {
+            this.domElement.querySelector("table tbody:not(.search-results)").classList.add("d-none");
+            this.domElement.querySelector("table tbody.search-results").classList.remove("d-none");
+            wrapper = this.domElement.querySelector("table tbody.search-results");
+        } else {
+            this.domElement.querySelector("table tbody.search-results")?.classList.add("d-none");
+            this.domElement.querySelector("table tbody:not(.search-results)").classList.remove("d-none");
+            wrapper = this.domElement.querySelector("table tbody:not(.search-results)");
+        }
         wrapper.innerHTML = "";
         let items = data ?? this.configuration.data;
         if (this.configuration.pageSize !== 0) {
@@ -170,6 +179,7 @@ export default class Grid {
                 if (typeof val.dataId === "string" && val.dataId.length > 0) {
                     val.cellValue = item[val.dataId];
                 }
+                cell.className = "text-break";
 
                 if (typeof val.cellValue === "string" || typeof val.cellValue === "number") {
                     cell.innerText = val.cellValue;
@@ -215,7 +225,12 @@ export default class Grid {
         this.domElement.appendChild(wrapper);
     }
 
-    private searchIndex: JsSearch.Search;
+    private renderSearchResultWrapper() {
+        if (this.configuration.search.dataIds.length < 1) return;
+        const searchWrapper = document.createElement("tbody");
+        searchWrapper.className = "search-results";
+        this.domElement.querySelector("table").appendChild(searchWrapper);
+    }
 
     private populateSearchIndex() {
         if (this.configuration.search.dataIds.length < 1) return;
@@ -229,8 +244,11 @@ export default class Grid {
     public search(query: string): void {
         if (this.configuration.search.dataIds.length < 1) return;
         let result = this.searchIndex.search(query);
-        if (result.length === 0) result = this.configuration.data;
-        this.renderBody(result);
+        if (result.length === 0) {
+            this.renderBody(this.configuration.data);
+        } else {
+            this.renderBody(result, true);
+        }
     }
 
     public navigate(pageNumber): void {
@@ -274,6 +292,7 @@ export default class Grid {
             this.renderBody();
             this.renderPaginator();
             this.renderCurrentPageIndicator();
+            this.renderSearchResultWrapper();
             this.log("Grid was rendered");
         } else {
             throw new GridError("render is not allowed due to invalid props");