@antelopejs/dms 0.11.0 → 0.12.0

package/frontend-vue/layers/dms-ui/app/build/composables/table/tableColumnHeaders.ts

@@ -0,0 +1,291 @@
+import type {
+  Column,
+  ColumnPinningPosition,
+  SortDirection,
+  Table,
+} from "@tanstack/vue-table";
+import type { Data } from "../../components/table/Table.vue";
+import Button from "@nuxt/ui/components/Button.vue";
+import DropdownMenu, {
+  type DropdownMenuItem,
+} from "@nuxt/ui/components/DropdownMenu.vue";
+import {
+  createMenuItem,
+  createSeparator,
+  createMenuItems,
+} from "./utils/menuItemFactory";
+import {
+  type HeaderSortCue,
+  headerSortCue,
+  isDefaultSorting,
+} from "../table-view/utils/sortableColumns";
+
+import type { TableColumnContext } from "./tableColumnTypes";
+
+const SORT_DIRECTION_ICON: Record<SortDirection, string> = {
+  asc: "i-ph-arrow-up",
+  desc: "i-ph-arrow-down",
+};
+
+const SORTABLE_LABEL_CLASS =
+  "group/sort -mx-1.5 inline-flex min-w-0 cursor-pointer items-center gap-1 rounded-[5px] px-1.5 py-[3px] uppercase transition-colors hover:bg-elevated hover:text-default";
+
+const HEADER_LABEL_CLASS = "truncate";
+
+const SORTABLE_LABEL_ACTIVE_CLASS = "font-bold text-highlighted";
+
+const SORT_IDLE_ICON = "i-ph-caret-up-down";
+
+const SORT_ICON_BOX_CLASS = "inline-flex size-3 shrink-0";
+
+const SORT_IDLE_ICON_CLASS =
+  "size-3 shrink-0 text-dimmed transition-colors group-hover/sort:text-highlighted";
+
+const SORT_DEFAULT_ICON_CLASS =
+  "size-3 shrink-0 text-muted transition-colors group-hover/sort:text-highlighted";
+
+const RIGHT_ALIGNED_HEADER_CLASS = "flex-row-reverse";
+
+const RIGHT_ALIGNED_LABEL_CLASS = "flex-row-reverse";
+
+export const buildHeaderRenderer = <T extends Data>(
+  context: TableColumnContext<T>,
+  label: string,
+) => {
+  const { config } = context;
+
+  return ({ column, table }: { column: Column<T>; table: Table<T> }) => {
+    const isPinned = column.getIsPinned();
+    const isSorted = column.getIsSorted();
+    const cue = headerSortCue({
+      canSort: column.getCanSort(),
+      sorted: isSorted,
+      isDefaultSorting: isDefaultSorting(
+        table.getState().sorting,
+        config.defaultSort,
+      ),
+    });
+    return createColumnHeader(context, column, label, {
+      isPinned,
+      isSorted,
+      cue,
+    });
+  };
+};
+
+const createSortingMenuItems = <T extends Data>(
+  context: TableColumnContext<T>,
+  column: Column<T>,
+): DropdownMenuItem[] => {
+  const { t } = context;
+
+  if (!column.getCanSort()) return [];
+
+  return [
+    createMenuItem(
+      t("dms.table.sort_asc"),
+      "i-ph-arrow-up",
+      () => column.toggleSorting(false),
+      { slot: "sort-asc" },
+    ),
+    createMenuItem(
+      t("dms.table.sort_desc"),
+      "i-ph-arrow-down",
+      () => column.toggleSorting(true),
+      { slot: "sort-desc" },
+    ),
+  ];
+};
+
+const createPinningMenuItem = <T extends Data>(
+  context: TableColumnContext<T>,
+  column: Column<T>,
+  isPinned: ColumnPinningPosition,
+): DropdownMenuItem => {
+  const { t } = context;
+
+  return createMenuItem(
+    isPinned ? t("dms.table.unpin_column") : t("dms.table.pin_column"),
+    isPinned ? "i-ph-push-pin" : "i-ph-push-pin-slash",
+    () => column.pin(isPinned ? false : "left"),
+  );
+};
+
+const createVisibilityMenuItem = <T extends Data>(
+  context: TableColumnContext<T>,
+  column: Column<T>,
+): DropdownMenuItem => {
+  const { t } = context;
+
+  return createMenuItem(t("dms.table.toggle_visibility"), "i-ph-eye", () =>
+    column.toggleVisibility(),
+  );
+};
+
+const isRightAligned = <T extends Data>(column: Column<T>): boolean => {
+  return column.columnDef.meta?.align === "right";
+};
+
+const cycleSorting = <T extends Data>(
+  column: Column<T>,
+  isSorted: false | SortDirection,
+) => {
+  if (isSorted === "desc") {
+    column.clearSorting();
+    return;
+  }
+  column.toggleSorting(isSorted === "asc", false);
+};
+
+const renderSortIcon = <T extends Data>(
+  context: TableColumnContext<T>,
+  cue: HeaderSortCue,
+  isSorted: false | SortDirection,
+  Icon: ReturnType<typeof resolveComponent>,
+) => {
+  const { config, t } = context;
+
+  if (cue === "active" && isSorted) {
+    return h(Icon, {
+      name: SORT_DIRECTION_ICON[isSorted],
+      class: config.ui.value.columnActiveSortIcon(),
+    });
+  }
+  if (cue === "default" && isSorted) {
+    return h(
+      "span",
+      { class: SORT_ICON_BOX_CLASS, title: t("dms.sort.default_sort") },
+      [
+        h(Icon, {
+          name: SORT_DIRECTION_ICON[isSorted],
+          class: SORT_DEFAULT_ICON_CLASS,
+        }),
+      ],
+    );
+  }
+  return h(Icon, { name: SORT_IDLE_ICON, class: SORT_IDLE_ICON_CLASS });
+};
+
+const renderSortableLabel = <T extends Data>(
+  context: TableColumnContext<T>,
+  column: Column<T>,
+  label: string,
+  sorting: {
+    isSorted: false | SortDirection;
+    cue: HeaderSortCue;
+    Icon: ReturnType<typeof resolveComponent>;
+  },
+) => {
+  const { t } = context;
+  const { isSorted, cue, Icon } = sorting;
+
+  const labelNode = h(
+    "span",
+    { class: HEADER_LABEL_CLASS, title: label },
+    label,
+  );
+  if (cue === "none") return labelNode;
+  return h(
+    "button",
+    {
+      type: "button",
+      class: [
+        SORTABLE_LABEL_CLASS,
+        cue === "active" && SORTABLE_LABEL_ACTIVE_CLASS,
+        isRightAligned(column) && RIGHT_ALIGNED_LABEL_CLASS,
+      ],
+      onClick: () => cycleSorting(column, isSorted),
+    },
+    [
+      labelNode,
+      renderSortIcon(context, cue, isSorted, Icon),
+      cue === "default" &&
+        h("span", { class: "sr-only" }, t("dms.sort.default_sort")),
+    ],
+  );
+};
+
+const createColumnHeader = <T extends Data>(
+  context: TableColumnContext<T>,
+  column: Column<T>,
+  label: string,
+  sorting: {
+    isPinned: ColumnPinningPosition;
+    isSorted: false | SortDirection;
+    cue: HeaderSortCue;
+  },
+) => {
+  const { config, appConfig } = context;
+  const { isPinned, isSorted, cue } = sorting;
+
+  const Icon = resolveComponent("Icon");
+
+  if (config.columnMenus === false) {
+    return h(
+      "div",
+      {
+        class: [
+          config.ui.value.headCellInternal(),
+          isRightAligned(column) && RIGHT_ALIGNED_HEADER_CLASS,
+        ],
+      },
+      [renderSortableLabel(context, column, label, { isSorted, cue, Icon })],
+    );
+  }
+
+  const sortingItems = createSortingMenuItems(context, column);
+  const visibilityItem = createVisibilityMenuItem(context, column);
+  const pinningItem = createPinningMenuItem(context, column, isPinned);
+
+  const menuItems = createMenuItems(
+    ...sortingItems,
+    visibilityItem,
+    createSeparator(),
+    pinningItem,
+  );
+
+  return h(
+    "div",
+    {
+      class: [
+        config.ui.value.headCellInternal(),
+        isRightAligned(column) && RIGHT_ALIGNED_HEADER_CLASS,
+      ],
+    },
+    [
+      renderSortableLabel(context, column, label, { isSorted, cue, Icon }),
+      h(
+        DropdownMenu,
+        {
+          items: menuItems,
+        },
+        {
+          default: () =>
+            h(Button, {
+              id: `col-header-${column.id}`,
+              icon: appConfig.ui.icons.ellipsis,
+              variant: ButtonVariant.ghost,
+              size: Size.tiny,
+              color: Color.neutral,
+              square: true,
+              class: config.ui.value.colOptionsTrigger(),
+            }),
+          "sort-asc-trailing": () =>
+            isSorted === "asc"
+              ? h(Icon, {
+                  name: appConfig.ui.icons.check,
+                  class: config.ui.value.columnActiveSortIcon(),
+                })
+              : undefined,
+          "sort-desc-trailing": () =>
+            isSorted === "desc"
+              ? h(Icon, {
+                  name: appConfig.ui.icons.check,
+                  class: config.ui.value.columnActiveSortIcon(),
+                })
+              : undefined,
+        },
+      ),
+    ],
+  );
+};

package/frontend-vue/layers/dms-ui/app/build/composables/table/tableColumnStructure.ts

@@ -0,0 +1,156 @@
+import type { Data, TableColumn } from "../../components/table/Table.vue";
+import Button from "@nuxt/ui/components/Button.vue";
+import Checkbox from "@nuxt/ui/components/Checkbox.vue";
+import {
+  ACTIONS_COLUMN_ID,
+  EXPAND_COLUMN_ID,
+  SELECT_COLUMN_ID,
+} from "./constants";
+import type { TableColumnMeta } from "./types";
+
+import type { TableColumnContext } from "./tableColumnTypes";
+
+import { buildHeaderRenderer } from "./tableColumnHeaders";
+
+const EXPAND_COLUMN_SIZE = 52;
+
+const EXPAND_ICON_CLASS = "size-4 transition-transform duration-200";
+
+const EXPAND_ICON_OPEN_CLASS = "rotate-90";
+
+const EXPAND_BUTTON_CLASS =
+  "text-dimmed hover:text-highlighted group-data-[expanded=true]:text-highlighted";
+
+const buildTypedCell = <T extends Data>(
+  context: TableColumnContext<T>,
+  col: TableColumn<T>,
+) => {
+  const { renderColumnValue } = context;
+  return ({ row }: { row: { original: T } }) =>
+    renderColumnValue(col, row.original);
+};
+
+export const processColumn = <T extends Data>(
+  context: TableColumnContext<T>,
+  col: TableColumn<T>,
+): TableColumn<T> => {
+  const { isNumericColumn } = context;
+
+  if (!col.id && "accessorKey" in col) {
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- TanStack permits generic keyof T accessors but requires a string id. Inference and its owner types cannot prove this legacy assignment; coercion would change numeric-key behavior.
+    col.id = col.accessorKey as string;
+  }
+
+  if (!isString(col.header) || col.id === ACTIONS_COLUMN_ID) {
+    return col;
+  }
+
+  if (col.type || col.display) {
+    col.cell = buildTypedCell(context, col);
+  }
+
+  const label = col.header;
+  if (!col.meta) {
+    col.meta = {} satisfies TableColumnMeta;
+  }
+  col.meta.label = label;
+  if (isNumericColumn(col)) {
+    col.meta.align = "right";
+  }
+
+  col.header = buildHeaderRenderer(context, label);
+  return col;
+};
+
+export const addExpandColumn = <T extends Data>(
+  context: TableColumnContext<T>,
+  columns: TableColumn<T>[],
+) => {
+  const { config, t, appConfig } = context;
+
+  if (!config.expandable) return;
+
+  columns.unshift({
+    id: EXPAND_COLUMN_ID,
+    size: EXPAND_COLUMN_SIZE,
+    enableColumnFilter: false,
+    enableSorting: false,
+
+    header: () => h("span", { class: "sr-only" }, t("dms.table.expand_row")),
+    cell: ({ row }) => {
+      const isExpanded = row.getIsExpanded();
+      return h(
+        Button,
+        {
+          "aria-label": isExpanded
+            ? t("dms.table.collapse_row")
+            : t("dms.table.expand_row"),
+          "aria-expanded": isExpanded,
+          "aria-controls": isExpanded
+            ? config.expandedRowDomId?.(row.id)
+            : undefined,
+          color: Color.neutral,
+          variant: ButtonVariant.ghost,
+          size: Size.tiny,
+          square: true,
+          class: EXPAND_BUTTON_CLASS,
+          onClick: (event: Event) => {
+            event.stopPropagation();
+            row.toggleExpanded();
+          },
+          onDblclick: (event: Event) => event.stopPropagation(),
+        },
+        {
+          leading: () =>
+            h(resolveComponent("Icon"), {
+              name: appConfig.ui.icons.chevronRight,
+              class: [EXPAND_ICON_CLASS, isExpanded && EXPAND_ICON_OPEN_CLASS],
+            }),
+        },
+      );
+    },
+  });
+};
+
+export const addRowSelectionColumn = <T extends Data>(
+  context: TableColumnContext<T>,
+  columns: TableColumn<T>[],
+) => {
+  const { config } = context;
+
+  const hasBulkAction =
+    normalizeActionConfig(config.rowActions?.delete).isEnabled ||
+    normalizeActionConfig(config.rowActions?.archive).isEnabled ||
+    normalizeActionConfig(config.rowActions?.restore).isEnabled ||
+    config.canExport === true;
+
+  if (!config.rowActions?.hasSelection || !hasBulkAction) {
+    return;
+  }
+
+  columns.unshift({
+    id: SELECT_COLUMN_ID,
+    size: 52,
+    enableColumnFilter: false,
+    header: ({ table }) =>
+      h(Checkbox, {
+        modelValue: table.getIsSomePageRowsSelected()
+          ? "indeterminate"
+          : table.getIsAllPageRowsSelected(),
+        "onUpdate:modelValue": (value) =>
+          table.toggleAllPageRowsSelected(Boolean(value)),
+        ariaLabel: "Select all",
+      }),
+    cell: ({ row }) =>
+      h(Checkbox, {
+        "data-checked": row.getIsSelected(),
+        modelValue: row.getIsSelected(),
+        "onUpdate:modelValue": (value) => row.toggleSelected(Boolean(value)),
+        class: config.ui.value.rowSelection({
+          rowSelected: row.getIsSelected(),
+        }),
+        onClick: (e: Event) => e.stopPropagation(),
+        onDblclick: (e: Event) => e.stopPropagation(),
+      }),
+  });
+};

package/frontend-vue/layers/dms-ui/app/build/composables/table/tableColumnTypes.ts

@@ -0,0 +1,88 @@
+import type { Column } from "@tanstack/vue-table";
+import type {
+  Data,
+  TableColumn,
+  TableEmits,
+  TableRowActionOptions,
+} from "../../components/table/Table.vue";
+import type { UseClipboardReturn } from "@vueuse/core";
+import type {
+  FormContainer,
+  FormPageUrls,
+} from "../table-view/useTableViewConfig";
+import type { useColumnValueRenderer } from "../data-types/useColumnValueRenderer";
+import type { useActionConfirm } from "../confirm/useActionConfirm";
+import type { DefaultSortConfig } from "../table-view/utils/sortableColumns";
+import type { BUILTIN_ROW_ACTION_KEYS } from "./tableColumnActionDescriptors";
+export interface RowActionDescriptor {
+  /** Built-in action key; custom actions have none. */
+  key?: (typeof BUILTIN_ROW_ACTION_KEYS)[number];
+  label: string;
+  icon: string;
+  onSelect: () => void;
+  disabled: boolean;
+  color?: CustomRowAction["color"];
+  visible: boolean;
+  /** Inline button variant (custom actions); ghost otherwise. */
+  variant?: CustomRowAction["variant"];
+  /** The inline button shows its label. */
+  showLabel?: boolean;
+}
+
+export interface LabeledColumn<T> {
+  label: string;
+  column: Column<T>;
+}
+
+type StyleSlot = (options?: {
+  rowSelected?: boolean;
+  prominent?: boolean;
+}) => string;
+
+export interface TableStyleSlots {
+  headCellInternal: StyleSlot;
+  rowAction: StyleSlot;
+  rowSelection: StyleSlot;
+  colOptionsTrigger: StyleSlot;
+  columnActiveSortIcon: StyleSlot;
+  [key: string]: StyleSlot;
+}
+
+export interface ColumnConfig<T> {
+  data: ComputedRef<T[]>;
+  columns?: TableColumn<T>[];
+  rowIdKey: string;
+  rowActions?: TableRowActionOptions;
+  canExport?: boolean;
+  emits: TableEmits<T>;
+  ui: ComputedRef<TableStyleSlots>;
+  componentId?: string;
+  formContainer?: FormContainer;
+  formPages?: FormPageUrls;
+  routeParams?: Record<string, string>;
+  onCustomRowAction?: (action: CustomRowAction, rowData: T) => void;
+  expandable?: boolean;
+  expandedRowDomId?: (rowId: string) => string;
+  showArchived?: Ref<boolean>;
+  /** Column header menus (sort, hide, pin). Defaults to true. */
+  columnMenus?: boolean;
+  /** The table's default sort: its column shows a neutral arrow. */
+  defaultSort?: DefaultSortConfig;
+  /** Field naming a row: the default name of its ⋯ menu button. */
+  labelKey?: string;
+}
+
+export interface TableColumnContext<T extends Data> {
+  config: ColumnConfig<T>;
+  t: ReturnType<typeof useI18n>["t"];
+  router: ReturnType<typeof useDmsRouter>;
+  toast: ReturnType<typeof useToast>;
+  appConfig: ReturnType<typeof useDmsAppConfig>;
+  copyToClipboard: UseClipboardReturn<false>["copy"];
+  renderColumnValue: ReturnType<
+    typeof useColumnValueRenderer
+  >["renderColumnValue"];
+  isNumericColumn: ReturnType<typeof useColumnValueRenderer>["isNumericColumn"];
+  confirmAction: ReturnType<typeof useActionConfirm>["confirmAction"];
+  processI18n: ReturnType<typeof useTranslation>["processI18n"];
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table/types.ts

@@ -1,4 +1,19 @@
-export interface TableColumnMeta {
-  label?: string;
-  [key: string]: unknown;
+import type { ColumnMeta, RowData } from "@tanstack/vue-table";
+import type { ColumnDisplay } from "../data-types/useColumnValueRenderer";
+
+declare module "@tanstack/vue-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Declaration merging requires TanStack's generic parameter names even though these added metadata fields do not use them.
+  interface ColumnMeta<TData extends RowData, TValue> {
+    label?: string;
+    align?: "right";
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Declaration merging requires TanStack's generic parameter names even though these added display fields do not use them.
+  interface ColumnDefBase<TData extends RowData, TValue = unknown> {
+    type?: DataTypeConfig;
+    cellWrap?: boolean;
+    display?: ColumnDisplay;
+  }
 }
+
+export type TableColumnMeta = ColumnMeta<RowData, unknown>;

package/frontend-vue/layers/dms-ui/app/build/composables/table/useRelationFilterLabels.ts

@@ -15,9 +15,9 @@ export interface RelationFilterSource extends DataTypeSelectSource {
 
 const labelKey = (searchUrl: string, id: string) => `${searchUrl}\n${id}`;
 
-// The plain ids a filter value holds, each once.
 const NO_LABELS: ReadonlySet<string> = new Set();
-const idsOf = (value: unknown) => unlabeledRelationIds(value, NO_LABELS);
+const idsOf = (value: Parameters<typeof unlabeledRelationIds>[0]) =>
+  unlabeledRelationIds(value, NO_LABELS);
 
 /** How a chip names one id of a relation filter. */
 export interface RelationFilterLabel {
@@ -69,7 +69,6 @@ export function useRelationFilterLabels(sources: () => RelationFilterSource[]) {
       return ids.length ? [{ source, ids }] : [];
     });
 
-  // In the browser only: a server render draws the chips with their ids.
   onMounted(() => {
     watch(
       pending,

package/frontend-vue/layers/dms-ui/app/build/composables/table/useRowScrollAnchor.ts

@@ -39,7 +39,7 @@ function captureAnchor(
 ): RowAnchor | null {
   if (!root) return null;
   const scroller = findScroller(root);
-  // At the top of the list, new rows land in view: what a live list is for.
+
   if (!scroller || scroller.scrollTop <= 0) return null;
   const viewTop = scroller.getBoundingClientRect().top;
   for (const row of root.querySelectorAll(`tr[${ROW_ID_ATTRIBUTE}]`)) {
@@ -58,8 +58,6 @@ function captureAnchor(
   return null;
 }
 
-// Rows were only added above the anchor (a live list's new rows): a sort, a
-// filter or another page moves the reader on, and is left alone.
 function isPrepend(anchor: RowAnchor, ids: readonly string[]): boolean {
   const index = ids.indexOf(anchor.id);
   if (anchor.index < 0 || index <= anchor.index) return false;

package/frontend-vue/layers/dms-ui/app/build/composables/table/useTable.ts

@@ -28,7 +28,6 @@ import {
   type TableStyleSlots,
 } from "./useTableColumns";
 import { useTableStates } from "./useTableStates";
-import type { TableColumnMeta } from "./types";
 import {
   ALWAYS_PINNED_LEFT_COLUMN_IDS,
   ALWAYS_PINNED_RIGHT_COLUMN_IDS,
@@ -112,8 +111,6 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
     labelKey: props.tableProps.labelKey,
   });
 
-  // A saved order (the user's, a view's) is kept, completed with the
-  // columns it leaves out.
   const declaredColumnOrder = columns.value
     .map((x) => x.id ?? "")
     .filter(Boolean);
@@ -135,40 +132,37 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
 
   const tableConfig = shallowRef({
     data: tableData,
-    // Read on each update rather than once: labelled row actions are sized on
-    // the rows listed, which a table opened by client-side navigation only
-    // receives after it is set up. A copy taken then keeps the width of an
-    // empty list, and the rows' buttons are cut.
+
     get columns() {
       return columns.value;
     },
 
     ...stateHandlers,
 
-    ...(props.tableProps.globalFilterOptions || {}),
-    ...(props.tableProps.orderOptions || {}),
-    ...(props.tableProps.columnFiltersOptions || {}),
+    ...props.tableProps.globalFilterOptions,
+    ...props.tableProps.orderOptions,
+    ...props.tableProps.columnFiltersOptions,
     getFilteredRowModel: isManualFiltering ? undefined : getFilteredRowModel(),
 
-    ...(props.tableProps.rowSelectionOptions || {}),
+    ...props.tableProps.rowSelectionOptions,
 
-    ...(props.tableProps.sortingOptions || {}),
+    ...props.tableProps.sortingOptions,
     getSortedRowModel: isManualSorting ? undefined : getSortedRowModel(),
 
-    ...(props.tableProps.expandedOptions || {}),
+    ...props.tableProps.expandedOptions,
     getExpandedRowModel: getExpandedRowModel(),
 
-    ...(props.tableProps.paginationOptions || {}),
+    ...props.tableProps.paginationOptions,
     getPaginationRowModel: getPaginationRowModel(),
 
     columnResizeMode: "onChange" as const,
-    // A reduced chrome keeps its columns as laid out.
+
     enableColumnResizing: props.columnMenus !== false,
-    ...(props.tableProps.sizingOptions || {}),
+    ...props.tableProps.sizingOptions,
 
     state: stateGetters,
 
-    getRowId: (row: unknown) => get(row as Record<string, unknown>, rowIdKey),
+    getRowId: (row: T) => get(row, rowIdKey),
 
     getCoreRowModel: getCoreRowModel(),
   });
@@ -185,8 +179,6 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
     },
   );
 
-  // A display that cannot sort (a hand-ordered table) leaves every header
-  // without its sort button, arrow and menu items.
   watch(
     () => props.tableProps.sortingOptions?.enableSorting,
     (enableSorting) => {
@@ -198,10 +190,10 @@ export const useTable = <T extends Data>(props: UseTableProps<T>) => {
     return table
       .getAllColumns()
       .map((col) => ({
-        label: (col.columnDef.meta as TableColumnMeta)?.label,
+        label: col.columnDef.meta?.label,
         column: col,
       }))
-      .filter((col) => col.label) as LabeledColumn<T>[];
+      .filter((col): col is LabeledColumn<T> => !!col.label);
   });
 
   return {