diff --git a/apps/client/src/widgets/view_widgets/table_view/header-menu.ts b/apps/client/src/widgets/view_widgets/table_view/header-menu.ts new file mode 100644 index 000000000..9397757b4 --- /dev/null +++ b/apps/client/src/widgets/view_widgets/table_view/header-menu.ts @@ -0,0 +1,51 @@ +export function applyHeaderMenu(columns) { + //apply header menu to each column + for(let column of columns){ + column.headerMenu = headerMenu; + } +} + +function headerMenu(){ + var menu = []; + var columns = this.getColumns(); + + for(let column of columns){ + + //create checkbox element using font awesome icons + let icon = document.createElement("i"); + icon.classList.add("bx"); + icon.classList.add(column.isVisible() ? "bx-check" : "bx-empty"); + + //build label + let label = document.createElement("span"); + let title = document.createElement("span"); + + title.textContent = " " + column.getDefinition().title; + + label.appendChild(icon); + label.appendChild(title); + + //create menu item + menu.push({ + label:label, + action:function(e){ + //prevent menu closing + e.stopPropagation(); + + //toggle current column visibility + column.toggle(); + + //change menu item icon + if(column.isVisible()){ + icon.classList.remove("bx-empty"); + icon.classList.add("bx-check"); + }else{ + icon.classList.remove("bx-check"); + icon.classList.add("bx-empty"); + } + } + }); + } + + return menu; +}; diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts index dff53c518..7f731ce8c 100644 --- a/apps/client/src/widgets/view_widgets/table_view/index.ts +++ b/apps/client/src/widgets/view_widgets/table_view/index.ts @@ -8,8 +8,9 @@ import branches from "../../../services/branches.js"; import type { CommandListenerData, EventData } from "../../../components/app_context.js"; import type { Attribute } from "../../../services/attribute_parser.js"; import note_create from "../../../services/note_create.js"; -import {Tabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule} from 'tabulator-tables'; +import {Tabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MenuModule} from 'tabulator-tables'; import "tabulator-tables/dist/css/tabulator_bootstrap5.min.css"; +import { applyHeaderMenu } from "./header-menu.js"; const TPL = /*html*/`