gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat(views/table): introduce hiding of columns

Browse Source
This commit is contained in:
Elian Doran 2025-06-29 22:26:25 +03:00
parent cedf91ea1a
commit c5cc1fcc1e
No known key found for this signature in database
2 changed files with 58 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
apps/client/src/widgets/view_widgets/table_view/header-menu.ts Normal file
View File

@ -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;
};

10
apps/client/src/widgets/view_widgets/table_view/index.ts
View File

@ -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*/`
<div class="table-view">
@ -80,7 +81,7 @@ export default class TableView extends ViewMode<StateInfo> {
}
private async renderTable(el: HTMLElement) {
const modules = [SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule];
const modules = [SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MenuModule];
for (const module of modules) {
Tabulator.registerModule(module);
}
@ -92,11 +93,14 @@ export default class TableView extends ViewMode<StateInfo> {
const notes = await froca.getNotes(this.args.noteIds);
const info = getPromotedAttributeInformation(this.parentNote);
const columnDefs = buildColumnDefinitions(info);
applyHeaderMenu(columnDefs);
const viewStorage = await this.viewStorage.restore();
this.persistentData = viewStorage?.tableData || {};
this.api = new Tabulator(el, {
index: "noteId",
columns: buildColumnDefinitions(info),
columns: columnDefs,
data: await buildRowDefinitions(this.parentNote, notes, info),
persistence: true,
movableColumns: true,