@progress/kendo-vue-grid/components/PinnedRowsTable.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as x, createVNode as s, mergeProps as G, inject as j, computed as a, ref as k } from "vue";
import { setRef as c, classNames as f, uGrid as R, getter as K, getRef as l } from "@progress/kendo-vue-common";
import { TableSelection as z, tableKeyboardNavigationTopPinnedAttributes as B, tableKeyboardNavigationBottomPinnedAttributes as E } from "@progress/kendo-vue-data-tools";
import { provideLocalizationService as w } from "@progress/kendo-vue-intl";
import { GridRow as H } from "../rows/GridRow.mjs";
import { getRowContents as D } from "../getRowContents.mjs";
import { pinnedTopRowsAriaLabel as h, messages as p, pinnedBottomRowsAriaLabel as g } from "../messages/main.mjs";
const M = /* @__PURE__ */ x({
  name: "PinnedRowsTable",
  props: {
    size: String,
    cols: Array,
    dataRowContext: Object,
    position: String,
    pinnedItems: Array,
    rowHeight: Number,
    rows: Object,
    selectable: Object
  },
  inject: {
    gridContext: {
      default: () => ({})
    },
    kendoLocalizationService: {
      default: null
    }
  },
  mounted() {
    this.tableRef = l(this, "table"), this.colGroupRefEl = l(this, "colGroup");
  },
  updated() {
    this.tableRef = l(this, "table"), this.colGroupRefEl = l(this, "colGroup");
  },
  methods: {
    setWidth(e) {
      const n = l(this, "table");
      n && (n.style.width = e ? e + "px" : "");
    },
    setScrollLeft(e) {
      const n = l(this, "pinnedRef");
      n && n.scrollLeft !== e && (n.scrollLeft = e);
    }
  },
  setup(e) {
    const n = j("gridContext", {}), d = a(() => e.position === "top"), S = a(() => d.value ? n.pinnedTopRef : n.pinnedBottomRef), y = k(!1), I = (o) => {
      const t = n.containerElementRef;
      if (!t || y.value)
        return;
      const i = o.currentTarget.scrollLeft;
      t.scrollLeft !== i && (t.scrollLeft = i);
    }, v = a(() => {
      if (!e.rows)
        return;
      const {
        pinnedData: o,
        ...t
      } = e.rows;
      return o ? {
        ...t,
        data: o
      } : e.rows;
    }), L = a(() => !e.pinnedItems || !e.dataRowContext ? [] : e.pinnedItems.map((o, t) => {
      var m;
      const i = {
        dataItem: o,
        rowType: "data",
        level: 0,
        expanded: !1,
        dataIndex: t
      }, r = e.dataRowContext.dataItemKey, u = "pinned_" + ((r ? K(r)(o) : void 0) || "ai" + t), b = D(e.dataRowContext, i, u, t);
      return (m = e.rows) != null && m.pinnedData ? {
        ...e.rows,
        data: e.rows.pinnedData
      } : e.rows, s(H, {
        key: u,
        rowType: "data",
        isPinned: !0,
        item: i,
        dataIndex: t,
        ariaRowIndex: t + 1,
        absoluteRowIndex: t,
        isAltRow: t % 2 !== 0,
        isHidden: !1,
        rowHeight: e.rowHeight,
        isSelected: b.isSelected,
        rows: v.value
      }, {
        default: () => [b.row]
      });
    })), C = a(() => f("k-grid-pinned-container", {
      "k-pos-bottom": !d.value
    })), T = a(() => f(R.table({
      size: e.size
    }))), A = (o) => {
      var i, r;
      const t = (i = e.pinnedItems) == null ? void 0 : i[o.startRowIndex];
      t && ((r = n.pinnedSelectionRelease) == null || r.call(n, o, t));
    }, N = a(() => e.selectable ? {
      ...typeof e.selectable == "object" ? e.selectable : {},
      enabled: !0,
      drag: !1
    } : e.selectable), P = a(() => d.value ? B : E);
    return {
      isTop: d,
      pinnedRef: S,
      handlePinnedScroll: I,
      pinnedRows: L,
      containerClassName: C,
      tableClassName: T,
      handleSelectionRelease: A,
      pinnedSelectable: N,
      pinnedBodyAttributes: P
    };
  },
  render() {
    return s("div", {
      class: this.containerClassName,
      role: "presentation",
      style: this.pinnedRows.length ? void 0 : {
        display: "none"
      }
    }, [s("div", {
      class: "k-grid-pinned-wrap",
      ref: c(this, "pinnedRef"),
      onScroll: this.handlePinnedScroll
    }, [s(z, {
      selectable: this.pinnedSelectable,
      onRelease: this.handleSelectionRelease
    }, {
      default: () => [s("table", {
        ref: c(this, "table"),
        class: this.tableClassName,
        "aria-label": this.isTop ? w(this).toLanguageString(h, p[h]) : w(this).toLanguageString(g, p[g])
      }, [s("colgroup", {
        ref: c(this, "colGroup")
      }, [this.$props.cols]), s("tbody", G({
        class: f(R.tbody({}))
      }, this.pinnedBodyAttributes), [this.pinnedRows])])]
    })])]);
  }
});
export {
  M as PinnedRowsTable
};