diff options
| -rw-r--r-- | grid/index.js | 10 | ||||
| -rw-r--r-- | grid/package.json | 2 | ||||
| -rw-r--r-- | grid/src/grid.ts | 31 |
3 files changed, 34 insertions, 9 deletions
diff --git a/grid/index.js b/grid/index.js index ca61d83..8ee315f 100644 --- a/grid/index.js +++ b/grid/index.js @@ -3,7 +3,12 @@ import Grid from "./src/grid"; const grid = new Grid({ data: [ { id: "1", firstName: "Ivar", lastName: "Løvlie" }, - { id: "2", firstName: "Sebastian", lastName: "" }, + { + id: "2", + firstName: + "SebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastianSebastian", + lastName: "", + }, { id: "3", firstName: "Heidi", lastName: "" }, { id: "4", firstName: "Frank", lastName: "" }, { id: "5", firstName: "Ivar", lastName: "Løvlie" }, @@ -31,10 +36,11 @@ const grid = new Grid({ { dataId: "firstName", minWidth: "350px", + maxWidth: "350px", columnName: "Fornavn", }, { - cellValue: (row) => row.lastName, + dataId: "lastName", minWidth: "150px", columnName: "Etternavn", }, diff --git a/grid/package.json b/grid/package.json index b339f43..a097b70 100644 --- a/grid/package.json +++ b/grid/package.json @@ -1,6 +1,6 @@ { "name": "grid", - "version": "0.0.1", + "version": "0.0.2", "author": { "email": "ivar@ivarlovlie.no", "name": "Ivar Løvlie", 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"); |