@platforma-sdk/ui-vue 1.63.12 → 1.64.0

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

@@ -1,13 +1,13 @@
 import type {
   AxesSpec,
   PTableColumnId,
+  PTableColumnSpecAxis,
   PTableColumnSpecColumn,
   PTableValue,
 } from "@platforma-sdk/model";
 import {
   canonicalizeJson,
   getAxisId,
-  isColumnOptional,
   pTableValue,
   type PFrameDriver,
   type PlDataTableSheet,
@@ -19,12 +19,14 @@ import {
   type PlTableColumnId,
   type PlTableColumnIdJson,
   isLabelColumn as isLabelColumnSpec,
+  isLinkerColumn as isLinkerColumnSpec,
   isColumnHidden,
+  isColumnOptional,
   matchAxisId,
   readAnnotation,
+  readAnnotationJson,
   Annotation,
   ValueType,
-  readAnnotationJson,
   getPTableColumnId,
 } from "@platforma-sdk/model";
 import type {
@@ -47,6 +49,7 @@ import { getColumnRenderingSpec } from "./value-rendering";
 import type { Ref } from "vue";
 import { isJsonEqual } from "@milaboratories/helpers";
 import type { DeferredCircular } from "./focus-row";
+import { isNil, uniq } from "es-toolkit";
 
 export function isLabelColumn(column: PTableColumnSpec): column is PTableColumnSpecColumn {
   return column.type === "column" && isLabelColumnSpec(column.spec);
@@ -56,20 +59,24 @@ export function isLabelColumn(column: PTableColumnSpec): column is PTableColumnS
 function columns2rows(
   fields: number[],
   columns: PTableVector[],
-  axes: number[],
-  resultMapping: number[],
+  fieldResultMapping: number[],
+  axesResultIndices: number[],
 ): PlAgDataTableV2Row[] {
   const rowData: PlAgDataTableV2Row[] = [];
   for (let iRow = 0; iRow < columns[0].data.length; ++iRow) {
-    const axesKey: PTableKey = axes.map((iAxis) =>
-      pTableValue(columns[resultMapping[iAxis]], iRow),
-    );
+    const axesKey: PTableKey = axesResultIndices.map((ri) => pTableValue(columns[ri], iRow));
     const id = canonicalizeJson<PlTableRowId>(axesKey);
-    const row: PlAgDataTableV2Row = { id, axesKey };
-    fields.forEach((field, iCol) => {
-      row[field.toString() as `${number}`] =
-        resultMapping[iCol] === -1 ? PTableHidden : pTableValue(columns[resultMapping[iCol]], iRow);
-    });
+    const row = fields.reduce<PlAgDataTableV2Row>(
+      (acc, field, iCol) => {
+        acc[field.toString() as `${number}`] =
+          fieldResultMapping[iCol] === -1
+            ? PTableHidden
+            : pTableValue(columns[fieldResultMapping[iCol]], iRow);
+        return acc;
+      },
+      { id, axesKey },
+    );
+
     rowData.push(row);
   }
   return rowData;
@@ -98,129 +105,60 @@ export async function calculateGridOptions({
   }
 > {
   const stateGeneration = generation.value;
-  const stateChangedError = new Error("table state generation changed");
 
   // get specs of the full table
-  const specs = await pfDriver.getSpec(model.fullTableHandle);
-  if (stateGeneration !== generation.value) throw stateChangedError;
-
-  // get specs of the visible table (with hidden columns omitted)
-  const pt = model.visibleTableHandle;
-  const dataSpecs = await pfDriver.getSpec(pt);
-  if (stateGeneration !== generation.value) throw stateChangedError;
-
-  // create index mapping from full specs to visible subset (hidden columns would have -1)
-  const specId = (spec: PTableColumnSpec) =>
-    canonicalizeJson<PTableColumnId>(getPTableColumnId(spec));
-  const dataSpecsMap = new Map(dataSpecs.entries().map(([i, spec]) => [specId(spec), i]));
-  const specsToDataSpecsMapping = new Map(
-    specs.entries().map(([i, spec]) => {
-      const dataSpecIdx = dataSpecsMap.get(specId(spec)) ?? -1;
-      if (dataSpecIdx === -1 && spec.type === "axis")
-        throw new Error(`axis ${JSON.stringify(spec.spec)} not present in join result`);
-      return [i, dataSpecIdx];
-    }),
-  );
+  const [tableSpecs, visibleTableSpecs] = await Promise.all([
+    pfDriver.getSpec(model.fullTableHandle),
+    pfDriver.getSpec(model.visibleTableHandle),
+  ]);
 
-  // gether indices of columns that would be displayed in the table
+  if (stateGeneration !== generation.value) throw new Error("table state generation changed");
 
-  const sheetAxesIds = sheets.map((sheet) => getAxisId(sheet.axis));
-  const isPartitionedAxis = (axisId: AxisId) => sheetAxesIds.some((id) => matchAxisId(id, axisId));
+  // index mapping from full specs to visible subset (hidden columns → -1)
+  const specsToVisibleSpecsMapping = buildSpecsToVisibleSpecsMapping(tableSpecs, visibleTableSpecs);
 
-  const labelColumns: { axisId: AxisId; labelColumnIdx: number }[] = [];
-  const setLabelColumnIndex = (axisId: AxisId, labelColumnIdx: number) => {
-    if (!labelColumns.some((info) => matchAxisId(info.axisId, axisId))) {
-      labelColumns.push({ axisId, labelColumnIdx });
-    } else {
-      console.warn(`multiple label columns match axisId: ${JSON.stringify(axisId)}`);
-    }
-  };
-  const getLabelColumnIndex = (axisId: AxisId) => {
-    return labelColumns.find((info) => matchAxisId(info.axisId, axisId))?.labelColumnIdx ?? -1;
-  };
+  const isPartitionedAxis = createPartitionedAxisPredicate(sheets);
 
-  // filter out partitioned axes, label columns and hidden columns
-  let indices = specs
-    .entries()
-    .filter(([i, spec]) => {
-      switch (spec.type) {
-        case "axis":
-          return !isPartitionedAxis(spec.id);
-        case "column":
-          if (isLabelColumnSpec(spec.spec)) {
-            const labeledAxisId = getAxisId(spec.spec.axesSpec[0]);
-            if (!isPartitionedAxis(labeledAxisId)) {
-              setLabelColumnIndex(labeledAxisId, i);
-            }
-            return false;
-          }
-          return !isColumnHidden(spec.spec);
-      }
-    })
-    .map(([i]) => i)
-    .toArray();
+  // label columns indexed by labeled axis (for axis→label replacement later)
+  const getLabelColumnIndex = collectLabelColumnsByAxis(tableSpecs, isPartitionedAxis);
 
-  // order columns by priority
-  indices.sort((a, b) => {
-    if (specs[a].type !== specs[b].type) return specs[a].type === "axis" ? -1 : 1;
+  // displayable column indices ordered: axes first, then columns by OrderPriority
+  const fields = sortIndicesByTypeAndPriority(
+    selectDisplayableIndices(tableSpecs, isPartitionedAxis),
+    tableSpecs,
+  );
 
-    const aPriority = readAnnotationJson(specs[a].spec, Annotation.Table.OrderPriority);
-    const bPriority = readAnnotationJson(specs[b].spec, Annotation.Table.OrderPriority);
+  // same as fields, but each axis replaced by its label column index when available
+  const indices = replaceAxesWithLabelColumns(fields, tableSpecs, getLabelColumnIndex);
 
-    if (aPriority === undefined) return bPriority === undefined ? 0 : 1;
-    if (bPriority === undefined) return -1;
-    return bPriority - aPriority;
-  });
+  // default hidden columns derived from Optional annotation when no saved state
+  const resolvedHiddenColIds =
+    hiddenColIds ?? computeDefaultHiddenColIds(fields, indices, tableSpecs);
 
-  // fields are indices of columns that would go to columnDefs
-  const fields = [...indices];
-  // replace axes with label columns
-  indices = indices.map((i) => {
-    const spec = specs[i];
-    if (spec.type === "axis") {
-      const labelColumnIdx = getLabelColumnIndex(spec.id);
-      if (labelColumnIdx !== -1) {
-        return labelColumnIdx;
-      }
-    }
-    return i;
-  });
   const columnDefs: ColDef<PlAgDataTableV2Row, PTableValue | PTableHidden>[] = [
     makeRowNumberColDef(),
     ...fields.map((field, index) =>
-      makeColDef(field, specs[field], specs[indices[index]], hiddenColIds, cellButtonAxisParams),
+      makeColDef(
+        field,
+        tableSpecs[field],
+        tableSpecs[indices[index]],
+        resolvedHiddenColIds,
+        cellButtonAxisParams,
+      ),
     ),
   ];
 
-  // mix in indices of skipped axes (axes that were partitioned or replaced with label columns)
-  const axesSpec = specs
-    .values()
-    .filter((spec) => spec.type === "axis")
-    .map((spec) => spec.spec)
-    .toArray();
-  const axes = axesSpec
-    .keys()
-    .map((i) => {
-      let r = indices.indexOf(i);
-      if (r === -1) {
-        r = indices.length;
-        indices.push(i);
-      }
-      return r;
-    })
-    .toArray();
+  // axes — taken directly from visible table (always present as part of join)
+  const visibleAxes = collectVisibleAxes(visibleTableSpecs);
 
-  const requestIndices: number[] = [];
-  const resultMapping: number[] = [];
-  indices.forEach((idx) => {
-    const dataSpecIdx = specsToDataSpecsMapping.get(idx)!;
-    if (dataSpecIdx !== -1) {
-      resultMapping.push(requestIndices.length);
-      requestIndices.push(dataSpecIdx);
-    } else {
-      resultMapping.push(-1);
-    }
-  });
+  // request indices: non-hidden display fields + visible axes for row selection keys.
+  // Axes replaced by label columns request label data (display); original axis values
+  // are fetched via visibleAxes (row keys).
+  const { requestIndices, fieldResultMapping, axesResultIndices } = buildRequestIndices(
+    indices,
+    specsToVisibleSpecsMapping,
+    visibleAxes.map(([i]) => i),
+  );
 
   let rowCount = -1;
   let lastParams: IServerSideGetRowsParams | undefined = undefined;
@@ -229,7 +167,7 @@ export async function calculateGridOptions({
       if (stateGeneration !== generation.value) return params.fail();
       try {
         if (rowCount === -1) {
-          const ptShape = await pfDriver.getShape(pt);
+          const ptShape = await pfDriver.getShape(model.visibleTableHandle);
           if (stateGeneration !== generation.value || params.api.isDestroyed())
             return params.fail();
           rowCount = ptShape.rows;
@@ -259,13 +197,13 @@ export async function calculateGridOptions({
         ) {
           length = Math.min(rowCount, params.request.endRow) - params.request.startRow;
           if (length > 0) {
-            const data = await pfDriver.getData(pt, requestIndices, {
+            const data = await pfDriver.getData(model.visibleTableHandle, requestIndices, {
               offset: params.request.startRow,
               length,
             });
             if (stateGeneration !== generation.value || params.api.isDestroyed())
               return params.fail();
-            rowData = columns2rows(fields, data, axes, resultMapping);
+            rowData = columns2rows(fields, data, fieldResultMapping, axesResultIndices);
           }
         }
 
@@ -287,7 +225,7 @@ export async function calculateGridOptions({
   };
 
   return {
-    axesSpec,
+    axesSpec: visibleAxes.map(([, { spec }]) => spec),
     columnDefs,
     serverSideDatasource,
   };
@@ -324,16 +262,19 @@ export function makeColDef(
       cellStyle.fontFamily = columnRenderingSpec.fontFamily;
     }
   }
+  const headerName =
+    readAnnotation(labeledSpec.spec, Annotation.Label)?.trim() ??
+    readAnnotation(spec.spec, Annotation.Label)?.trim() ??
+    `Unlabeled ${spec.type} ${iCol}`;
+
   return {
     colId,
     mainMenuItems: defaultMainMenuItems,
     context: spec,
     field: `${iCol}`,
-    headerName:
-      readAnnotation(labeledSpec.spec, Annotation.Label)?.trim() ??
-      `Unlabeled ${spec.type} ${iCol}`,
+    headerName,
     lockPosition: spec.type === "axis",
-    hide: hiddenColIds?.includes(colId) ?? isColumnOptional(spec.spec),
+    hide: hiddenColIds !== undefined && hiddenColIds.includes(colId),
     valueFormatter: columnRenderingSpec.valueFormatter,
     headerComponent: PlAgColumnHeader,
     cellRendererSelector: cellButtonAxisParams?.showCellButtonForAxisId
@@ -388,3 +329,160 @@ export function makeColDef(
     })(),
   };
 }
+
+type LabelColumnLookup = (axisId: AxisId) => number;
+
+/** Build index mapping from full tableSpecs to their position in visibleTableSpecs (missing → -1). */
+function buildSpecsToVisibleSpecsMapping(
+  tableSpecs: PTableColumnSpec[],
+  visibleTableSpecs: PTableColumnSpec[],
+): Map<number, number> {
+  const specId = (spec: PTableColumnSpec) =>
+    canonicalizeJson<PTableColumnId>(getPTableColumnId(spec));
+  const visibleSpecsMap = new Map(
+    visibleTableSpecs.entries().map(([i, spec]) => [specId(spec), i] as const),
+  );
+  return new Map(
+    tableSpecs.entries().map(([i, spec]) => {
+      const visibleSpecIdx = visibleSpecsMap.get(specId(spec));
+      return [i, isNil(visibleSpecIdx) ? -1 : visibleSpecIdx];
+    }),
+  );
+}
+
+/** Predicate that returns true when an axis is one of the sheet partition axes. */
+function createPartitionedAxisPredicate(sheets: PlDataTableSheet[]): (axisId: AxisId) => boolean {
+  const sheetAxesIds = sheets.map((sheet) => getAxisId(sheet.axis));
+  return (axisId) => sheetAxesIds.some((id) => matchAxisId(id, axisId));
+}
+
+/**
+ * Collect label columns (skipping partitioned axes and duplicates) and return a
+ * lookup function that resolves labeled axisId → label column index (or -1).
+ */
+function collectLabelColumnsByAxis(
+  tableSpecs: PTableColumnSpec[],
+  isPartitionedAxis: (axisId: AxisId) => boolean,
+): LabelColumnLookup {
+  const labelColumns: { axisId: AxisId; labelColumnIdx: number }[] = [];
+  for (const [i, spec] of tableSpecs.entries()) {
+    if (spec.type !== "column" || !isLabelColumnSpec(spec.spec)) continue;
+    const labeledAxisId = getAxisId(spec.spec.axesSpec[0]);
+    if (isPartitionedAxis(labeledAxisId)) continue;
+    if (labelColumns.some((info) => matchAxisId(info.axisId, labeledAxisId))) {
+      console.warn(`multiple label columns match axisId: ${JSON.stringify(labeledAxisId)}`);
+      continue;
+    }
+    labelColumns.push({ axisId: labeledAxisId, labelColumnIdx: i });
+  }
+  return (axisId) =>
+    labelColumns.find((info) => matchAxisId(info.axisId, axisId))?.labelColumnIdx ?? -1;
+}
+
+/** Indices of columns to display: drop partitioned axes, label/linker columns, hidden columns. */
+function selectDisplayableIndices(
+  tableSpecs: PTableColumnSpec[],
+  isPartitionedAxis: (axisId: AxisId) => boolean,
+): number[] {
+  return tableSpecs
+    .entries()
+    .filter(([, spec]) => {
+      switch (spec.type) {
+        case "axis":
+          return !isPartitionedAxis(spec.id);
+        case "column":
+          return (
+            !isLabelColumnSpec(spec.spec) &&
+            !isColumnHidden(spec.spec) &&
+            !isLinkerColumnSpec(spec.spec)
+          );
+      }
+    })
+    .map(([i]) => i)
+    .toArray();
+}
+
+/** Sort: axes first, then columns by OrderPriority annotation (higher priority = further left). */
+function sortIndicesByTypeAndPriority(indices: number[], tableSpecs: PTableColumnSpec[]): number[] {
+  const priorityOf = (i: number): number => {
+    const spec = tableSpecs[i];
+    return spec.type === "column"
+      ? (readAnnotationJson(spec.spec, Annotation.Table.OrderPriority) ?? 0)
+      : 0;
+  };
+  return [...indices].sort((a, b) => {
+    if (tableSpecs[a].type !== tableSpecs[b].type) {
+      return tableSpecs[a].type === "axis" ? -1 : 1;
+    }
+    return priorityOf(b) - priorityOf(a);
+  });
+}
+
+/** For each axis entry substitute the index of its matching label column when one exists. */
+function replaceAxesWithLabelColumns(
+  fields: number[],
+  tableSpecs: PTableColumnSpec[],
+  getLabelColumnIndex: LabelColumnLookup,
+): number[] {
+  return fields.map((i) => {
+    const spec = tableSpecs[i];
+    const labelIdx = spec.type === "axis" ? getLabelColumnIndex(spec.id) : -1;
+    return labelIdx === -1 ? i : labelIdx;
+  });
+}
+
+/** Default hidden col ids built from columns marked with the Optional annotation. */
+function computeDefaultHiddenColIds(
+  fields: number[],
+  indices: number[],
+  tableSpecs: PTableColumnSpec[],
+): PlTableColumnIdJson[] {
+  return fields.reduce<PlTableColumnIdJson[]>((acc, field, i) => {
+    const spec = tableSpecs[field];
+    if (spec.type !== "column" || !isColumnOptional(spec.spec)) return acc;
+    const labeledSpec = tableSpecs[indices[i]];
+    return [...acc, canonicalizeJson<PlTableColumnId>({ source: spec, labeled: labeledSpec })];
+  }, []);
+}
+
+/** Extract axis indices and specs from the visible table (always present as part of join). */
+function collectVisibleAxes(
+  visibleTableSpecs: PTableColumnSpec[],
+): [number, PTableColumnSpecAxis][] {
+  return visibleTableSpecs
+    .entries()
+    .filter((entry): entry is [number, PTableColumnSpecAxis] => entry[1].type === "axis")
+    .toArray();
+}
+
+/**
+ * Compose request indices for the visible table:
+ * non-hidden display fields first, then visible axes (deduplicated).
+ * Returns fieldResultMapping (display field → position in requestIndices, -1 if not requested)
+ * and axesResultIndices (visible axis → position in requestIndices).
+ */
+function buildRequestIndices(
+  indices: number[],
+  specsToVisibleSpecsMapping: Map<number, number>,
+  visibleAxesIndices: number[],
+): {
+  requestIndices: number[];
+  fieldResultMapping: number[];
+  axesResultIndices: number[];
+} {
+  const resolved = indices.map((displayField) => {
+    const idx = specsToVisibleSpecsMapping.get(displayField);
+    return idx === undefined || idx === -1 ? null : idx;
+  });
+  const requestedFields = resolved.filter((v): v is number => v !== null);
+
+  const fieldResultMapping: number[] = [];
+  let pos = 0;
+  for (const v of resolved) {
+    fieldResultMapping.push(v === null ? -1 : pos++);
+  }
+
+  const requestIndices = uniq([...requestedFields, ...visibleAxesIndices]);
+  const axesResultIndices = visibleAxesIndices.map((vi) => requestIndices.indexOf(vi));
+  return { requestIndices, fieldResultMapping, axesResultIndices };
+}

package/src/components/PlAgDataTable/sources/table-state-v2.ts

@@ -12,7 +12,6 @@ import {
   type PlDataTableStateV2,
   type PlDataTableStateV2CacheEntry,
   type PlDataTableStateV2Normalized,
-  type PObjectId,
   type PTableParamsV2,
   type PTableSorting,
   type PlDataTableFilters,
@@ -178,15 +177,10 @@ function makeDefaultState(): PlDataTableStateV2CacheEntryNullable {
   };
 }
 
-function getHiddenColIds(state: PlDataTableGridStateCore["columnVisibility"]): PObjectId[] | null {
-  return (
-    state?.hiddenColIds?.map(parseJson).reduce((acc, c) => {
-      if (c.source.type === "column") {
-        acc.push(c.source.id);
-      }
-      return acc;
-    }, [] as PObjectId[]) ?? null
-  );
+function getHiddenColIds(
+  state: PlDataTableGridStateCore["columnVisibility"],
+): PTableColumnId[] | null {
+  return state?.hiddenColIds?.map((json) => getPTableColumnId(parseJson(json).source)) ?? null;
 }
 
 function convertPartitionFiltersToFilterSpec(

package/src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue

@@ -6,10 +6,11 @@ import {
   PlSlideModal,
   usePlBlockPageTitleTeleportTarget,
 } from "@milaboratories/uikit";
-import { type Column, type DisplayedColumnsChangedEvent, type GridApi } from "ag-grid-enterprise";
-import { computed, ref, toRefs, watch } from "vue";
+import { type GridApi } from "ag-grid-enterprise";
+import { computed, ref } from "vue";
 import { PlAgDataTableRowNumberColId } from "../PlAgDataTable/sources/row-number";
 import { useFilteredItems } from "./useFilteredItems";
+import { useGridColumns } from "./useGridColumns";
 
 const props = defineProps<{
   /**
@@ -25,44 +26,25 @@ const props = defineProps<{
   width?: string;
 }>();
 
-const { api: gridApi } = toRefs(props);
-
-const columns = ref<Column[]>([]);
-watch(
-  () => gridApi.value,
-  (gridApi) => {
-    if (gridApi.isDestroyed()) return;
-
-    gridApi.addEventListener("displayedColumnsChanged", (event: DisplayedColumnsChangedEvent) => {
-      columns.value = event.api.getAllGridColumns();
-    });
+const query = ref("");
+const slideModal = ref(false);
+const teleportTarget = usePlBlockPageTitleTeleportTarget("PlAgGridColumnManager");
 
-    columns.value = gridApi.getAllGridColumns();
-    if (columns.value.length > 0) {
-      gridApi.moveColumns(columns.value, 0);
-    }
-  },
-  { immediate: true },
-);
+const columns = useGridColumns(props);
 
 const items = computed(() => {
-  return columns.value.map((col) => ({
+  return columns.value.map((col, i) => ({
     column: col,
     id: col.getId(),
-    label: col.getColDef().headerName!,
+    label: col.getColDef().headerName ?? `Unnamed Column (${i + 1})`,
   }));
 });
 
-const query = ref("");
-
-const slideModal = ref(false);
-const teleportTarget = usePlBlockPageTitleTeleportTarget("PlAgGridColumnManager");
-
-const { filteredItems, segments } = useFilteredItems(() => ({
-  items: items.value,
-  query: query.value,
+const { filteredItems, segments } = useFilteredItems({
+  items,
+  query,
   getStrings: (item) => [item.label],
-}));
+});
 </script>
 
 <template>
@@ -79,17 +61,17 @@ const { filteredItems, segments } = useFilteredItems(() => ({
       :is-draggable="(item) => !item.column.getColDef().lockPosition"
       :on-sort="
         (fromIndex, toIndex) => {
-          if (!gridApi.isDestroyed()) {
+          if (!props.api.isDestroyed()) {
             const columnToMove = columns[fromIndex];
-            gridApi.moveColumns([columnToMove], toIndex);
+            props.api.moveColumns([columnToMove], toIndex);
           }
           return true; // Let PlElementList handle the visual update
         }
       "
       :on-toggle="
         (item) => {
-          if (!gridApi.isDestroyed()) {
-            gridApi.setColumnsVisible([item.column], !item.column.isVisible());
+          if (!props.api.isDestroyed()) {
+            props.api.setColumnsVisible([item.column], !item.column.isVisible());
           }
         }
       "

package/src/components/PlAgGridColumnManager/useFilteredItems.ts

@@ -1,25 +1,23 @@
-import { computed, type MaybeRefOrGetter, toValue } from "vue";
+import { Ref, computed, toValue } from "vue";
 
-export function useFilteredItems<T>(
-  props: MaybeRefOrGetter<{
-    items: T[];
-    query: string;
-    getStrings: (item: T) => Iterable<string>;
-  }>,
-) {
+export function useFilteredItems<T>(props: {
+  items: Ref<T[]>;
+  query: Ref<string>;
+  getStrings: (item: T) => Iterable<string>;
+}) {
   const result = computed(() => {
     const { items, query, getStrings } = toValue(props);
     const filteredItems: T[] = [];
     const segments = new Map<string, StringSegment[]>();
-    for (const item of items) {
+    for (const item of items.value) {
       let kept = false;
       for (const string of getStrings(item)) {
         let stringSegments = segments.get(string);
         if (!stringSegments) {
-          stringSegments = matchSubstrings(string, query);
+          stringSegments = matchSubstrings(string, query.value);
           segments.set(string, stringSegments);
         }
-        if (!kept && (!query || stringSegments.some(({ match }) => match))) {
+        if (!kept && (!query.value || stringSegments.some(({ match }) => match))) {
           filteredItems.push(item);
           kept = true;
         }

package/src/components/PlAgGridColumnManager/useGridColumns.ts

@@ -0,0 +1,26 @@
+import { Column, GridApi } from "ag-grid-enterprise";
+import { ref, watch } from "vue";
+
+export function useGridColumns(props: { api: GridApi }) {
+  const columns = ref<Column[]>([]);
+  const syncColumns = () => {
+    columns.value = props.api.getAllGridColumns();
+  };
+  watch(
+    () => props.api,
+    (gridApi, _, onCleanup) => {
+      if (gridApi.isDestroyed()) return;
+
+      gridApi.addEventListener("displayedColumnsChanged", syncColumns);
+      onCleanup(() => gridApi.removeEventListener("displayedColumnsChanged", syncColumns));
+
+      columns.value = gridApi.getAllGridColumns();
+      if (columns.value.length > 0) {
+        gridApi.moveColumns(columns.value, 0);
+      }
+    },
+    { immediate: true },
+  );
+
+  return columns;
+}

package/src/components/PlTableFilters/PlTableFiltersV2.vue

@@ -12,9 +12,9 @@ import {
   Domain,
   readAnnotation,
   readDomain,
-  getAxisId,
   getUniqueSourceValuesWithLabels,
   parseJson,
+  getPTableColumnId,
 } from "@platforma-sdk/model";
 import { computed, onMounted, ref } from "vue";
 import { PlBtnGhost, PlSlideModal, usePlBlockPageTitleTeleportTarget } from "@milaboratories/uikit";
@@ -48,11 +48,7 @@ const filtersOn = computed(() => {
 });
 
 function makeFilterColumnId(spec: PTableColumnSpec): CanonicalizedJson<PTableColumnId> {
-  const id: PTableColumnId =
-    spec.type === "axis"
-      ? { type: "axis", id: getAxisId(spec.spec) }
-      : { type: "column", id: spec.id };
-  return canonicalizeJson<PTableColumnId>(id);
+  return canonicalizeJson<PTableColumnId>(getPTableColumnId(spec));
 }
 
 const items = computed<PlAdvancedFilterItem[]>(() => {