zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-10 07:28:09 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat(views/table): add a context menu for the header outside columns

Browse source
This commit is contained in:
Elian Doran 2025-07-17 15:36:33 +03:00
parent a25ce42490
commit aef824d262
No known key found for this signature in database
1 changed files with 45 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
apps/client/src/widgets/view_widgets/table_view/context_menu.ts
View file

@ -11,6 +11,10 @@ import type Component from "../../../components/component.js";
export function setupContextMenu(tabulator: Tabulator, parentNote: FNote) { export function setupContextMenu(tabulator: Tabulator, parentNote: FNote) {
tabulator.on("rowContext", (e, row) => showRowContextMenu(e, row, parentNote, tabulator)); tabulator.on("rowContext", (e, row) => showRowContextMenu(e, row, parentNote, tabulator));
tabulator.on("headerContext", (e, col) => showColumnContextMenu(e, col, parentNote, tabulator)); tabulator.on("headerContext", (e, col) => showColumnContextMenu(e, col, parentNote, tabulator));
tabulator.on("renderComplete", () => {
const headerRow = tabulator.element.querySelector(".tabulator-header-contents");
headerRow?.addEventListener("contextmenu", (e) => showHeaderContextMenu(e, tabulator));
});
// Pressing the expand button prevents bubbling and the context menu remains menu when it shouldn't. // Pressing the expand button prevents bubbling and the context menu remains menu when it shouldn't.
if (tabulator.options.dataTree) { if (tabulator.options.dataTree) {
@ -75,7 +79,7 @@ function showColumnContextMenu(_e: UIEvent, column: ColumnComponent, parentNote:
{ {
title: t("table_view.show-hide-columns"), title: t("table_view.show-hide-columns"),
uiIcon: "bx bx-empty", uiIcon: "bx bx-empty",
items: buildColumnItems() items: buildColumnItems(tabulator)
}, },
{ title: "----" }, { title: "----" },
{ {
@ -118,22 +122,32 @@ function showColumnContextMenu(_e: UIEvent, column: ColumnComponent, parentNote:
y: e.pageY y: e.pageY
}); });
e.preventDefault(); e.preventDefault();
}
function buildColumnItems() { /**
const items: MenuItem<unknown>[] = []; * Shows a context menu which has options dedicated to the header area (the part where the columns are, but in the empty space).
for (const column of tabulator.getColumns()) { * Provides generic options such as toggling columns.
const { title, field } = column.getDefinition(); */
function showHeaderContextMenu(_e: Event, tabulator: Tabulator) {
items.push({ const e = _e as MouseEvent;
title, contextMenu.show({
checked: column.isVisible(), items: [
{
title: t("table_view.show-hide-columns"),
uiIcon: "bx bx-empty", uiIcon: "bx bx-empty",
handler: () => column.toggle() items: buildColumnItems(tabulator)
},
{
title: t("table_view.new-column"),
uiIcon: "bx bx-columns",
handler: () => getParentComponent(e)?.triggerCommand("addNewTableColumn", {})
},
],
selectMenuItemHandler() {},
x: e.pageX,
y: e.pageY
}); });
} e.preventDefault();
return items;
}
} }
export function showRowContextMenu(_e: UIEvent, row: RowComponent, parentNote: FNote, tabulator: Tabulator) { export function showRowContextMenu(_e: UIEvent, row: RowComponent, parentNote: FNote, tabulator: Tabulator) {
@ -213,3 +227,19 @@ function getParentComponent(e: MouseEvent) {
.closest(".component") .closest(".component")
.prop("component") as Component; .prop("component") as Component;
} }
function buildColumnItems(tabulator: Tabulator) {
const items: MenuItem<unknown>[] = [];
for (const column of tabulator.getColumns()) {
const { title } = column.getDefinition();
items.push({
title,
checked: column.isVisible(),
uiIcon: "bx bx-empty",
handler: () => column.toggle()
});
}
return items;
}