@platforma-sdk/ui-vue 1.8.18 → 1.8.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.8.18",
+  "version": "1.8.20",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -35,8 +35,10 @@
     "@ag-grid-enterprise/menu": "^32.3.2",
     "@ag-grid-enterprise/excel-export": "^32.3.2",
     "@ag-grid-community/theming": "^32.3.2",
-    "@milaboratories/uikit": "^2.2.0",
-    "@platforma-sdk/model": "^1.8.0"
+    "@ag-grid-enterprise/side-bar": "^32.3.2",
+    "@ag-grid-enterprise/column-tool-panel": "^32.3.2",
+    "@platforma-sdk/model": "^1.8.19",
+    "@milaboratories/uikit": "^2.2.1"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",

package/src/aggrid.ts

@@ -11,6 +11,8 @@ import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import { RichSelectModule } from '@ag-grid-enterprise/rich-select';
 import { MenuModule } from '@ag-grid-enterprise/menu';
 import { ExcelExportModule } from '@ag-grid-enterprise/excel-export';
+import { SideBarModule } from '@ag-grid-enterprise/side-bar';
+import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
 import { type Theme, themeQuartz } from '@ag-grid-community/theming';
 
 export function activateAgGrid() {
@@ -24,6 +26,8 @@ export function activateAgGrid() {
     RichSelectModule,
     MenuModule,
     ExcelExportModule,
+    SideBarModule,
+    ColumnsToolPanelModule,
   ]);
   const agGridLicense = getEnvironmentValue('AGGRID_LICENSE');
   if (agGridLicense) {

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -11,6 +11,8 @@ import type {
 } from '@ag-grid-community/core';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
+import { SideBarModule } from '@ag-grid-enterprise/side-bar';
+import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
 import { AgGridVue } from '@ag-grid-community/vue3';
 import { ClipboardModule } from '@ag-grid-enterprise/clipboard';
 import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
@@ -26,7 +28,14 @@ import { updateXsvGridOptions } from './sources/file-source';
 import { enrichJoinWithLabelColumns, makeSheets, parseColId, updatePFrameGridOptions } from './sources/table-source';
 import type { PlDataTableSettings, PlDataTableSheet } from './types';
 
-ModuleRegistry.registerModules([ClientSideRowModelModule, ClipboardModule, ServerSideRowModelModule, RangeSelectionModule]);
+ModuleRegistry.registerModules([
+  ClientSideRowModelModule,
+  ClipboardModule,
+  ServerSideRowModelModule,
+  RangeSelectionModule,
+  SideBarModule,
+  ColumnsToolPanelModule
+]);
 
 const tableState = defineModel<PlDataTableState>({ default: { gridState: {} } });
 const props = defineProps<{
@@ -121,6 +130,7 @@ const gridState = computed({
     return {
       columnOrder: state.gridState.columnOrder,
       sort: state.gridState.sort,
+      columnVisibility: state.gridState.columnVisibility,
     };
   },
   set: (gridState) => {
@@ -131,6 +141,7 @@ const gridState = computed({
 
     state.gridState.columnOrder = gridState.columnOrder;
     state.gridState.sort = gridState.sort;
+    state.gridState.columnVisibility = gridState.columnVisibility;
 
     if (settings.value.sourceType === 'ptable' || settings.value.sourceType === 'pframe') {
       if (!state.pTableParams) {
@@ -252,6 +263,27 @@ const gridOptions = ref<GridOptions>({
   loadingOverlayComponentParams: { notReady: true },
   loadingOverlayComponent: PlOverlayLoading,
   noRowsOverlayComponent: PlOverlayNoRows,
+  sideBar: {
+    toolPanels: [
+      {
+        id: 'columns',
+        labelDefault: 'Columns',
+        labelKey: 'columns',
+        iconKey: 'columns',
+        toolPanel: 'agColumnsToolPanel',
+        toolPanelParams: {
+          suppressRowGroups: true,
+          suppressValues: true,
+          suppressPivots: true,
+          suppressPivotMode: true,
+          suppressColumnFilter: true,
+          suppressColumnSelectAll: true,
+          suppressColumnExpandAll: true,
+        },
+      },
+    ],
+    defaultToolPanel: 'columns',
+  },
 });
 const onGridReady = (event: GridReadyEvent) => {
   const api = event.api;
@@ -283,6 +315,8 @@ const onStateUpdated = (event: StateUpdatedEvent) => {
   gridState.value = {
     columnOrder: event.state.columnOrder,
     sort: event.state.sort,
+    columnVisibility: event.state.columnVisibility
+      ?? (event.state.columnOrder ? { hiddenColIds: [] } : undefined),
   };
   gridOptions.value.initialState = gridState.value;
 };
@@ -291,6 +325,8 @@ const onGridPreDestroyed = () => {
   gridState.value = {
     columnOrder: state.columnOrder,
     sort: state.sort,
+    columnVisibility: state.columnVisibility
+      ?? (state.columnOrder ? { hiddenColIds: [] } : undefined),
   };
   gridOptions.value.initialState = gridState.value;
   gridApi.value = undefined;
@@ -309,6 +345,8 @@ watch(
     const selfState = {
       columnOrder: selfFullState.columnOrder,
       sort: selfFullState.sort,
+      columnVisibility: selfFullState.columnVisibility
+        ?? (selfFullState.columnOrder ? { hiddenColIds: [] } : undefined),
     };
     if (lodash.isEqual(gridState, selfState)) return;
 
@@ -360,7 +398,8 @@ watch(
             columnDefs: [],
           });
         }
-        const options = await updatePFrameGridOptions(pfDriver, pTable, sheets);
+        const hiddenColIds = gridState.value?.columnVisibility?.hiddenColIds;
+        const options = await updatePFrameGridOptions(pfDriver, pTable, sheets, hiddenColIds);
         return gridApi.updateGridOptions({
           loading: options.rowModelType !== 'clientSide',
           loadingOverlayComponentParams: { notReady: false },

package/src/components/PlAgDataTable/sources/table-source.ts

@@ -52,12 +52,14 @@ export const defaultValueFormatter = (value: any) => {
 /**
  * Calculates column definition for a given p-table column
  */
-function getColDef(iCol: number, spec: PTableColumnSpec): ColDef {
+function getColDef(iCol: number, spec: PTableColumnSpec, hiddenColIds?: string[]): ColDef {
+  const colId = makeColId(spec);
   return {
-    colId: makeColId(spec),
+    colId,
     field: iCol.toString(),
     headerName: spec.spec.annotations?.['pl7.app/label']?.trim() ?? 'Unlabeled ' + spec.type + ' ' + iCol.toString(),
     lockPosition: spec.type === 'axis',
+    hide: hiddenColIds?.includes(colId) ?? spec.spec.annotations?.['pl7.app/table/visibility'] === 'optional',
     valueFormatter: defaultValueFormatter,
     cellDataType: ((valueType: ValueType) => {
       switch (valueType) {
@@ -268,6 +270,7 @@ export async function updatePFrameGridOptions(
   pfDriver: PFrameDriver,
   pt: PTableHandle,
   sheets: PlDataTableSheet[],
+  hiddenColIds?: string[],
 ): Promise<{
   columnDefs: ColDef[];
   serverSideDatasource?: IServerSideDatasource;
@@ -309,7 +312,7 @@ export async function updatePFrameGridOptions(
 
   const ptShape = await pfDriver.getShape(pt);
   const rowCount = ptShape.rows;
-  const columnDefs = fields.map((i) => getColDef(i, specs[i]));
+  const columnDefs = fields.map((i) => getColDef(i, specs[i], hiddenColIds));
 
   if (hColumns.length > 1) {
     console.warn('Currently, only one heterogeneous axis is supported in the table, got', hColumns.length, ' transposition will not be applied.');