@progress/kendo-react-pivotgrid 13.3.0 → 13.4.0-develop.2

package/PivotGrid.d.ts

@@ -0,0 +1,303 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PivotGridRowProps } from './components/Row.js';
+import { PivotGridCellProps } from './components/Cell.js';
+import { PivotGridHeaderCellProps } from './components/HeaderCell.js';
+import { PivotGridColumnProps } from './components/Column.js';
+import { CustomComponent } from '@progress/kendo-react-common';
+import { PivotGridAxis, PivotDataItem, Tuple, AxisRow } from '@progress/kendo-pivotgrid-common';
+import { PivotGridAxesChangeEvent } from './models/index.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact PivotGrid component](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgrid).
+ */
+export interface PivotGridProps {
+    /**
+     * Sets the `style` property of the top-most element of the PivotGrid.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid style={{ height: '500px' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `className` property of the top-most element of the PivotGrid in addition to the default `k-pivotgrid` class.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Sets the `id` property of the top-most element of the PivotGrid.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid id="pivotgrid-id" />
+     * ```
+     */
+    id?: string;
+    /**
+     * Sets the `tabIndex` property of the top-most element of the PivotGrid.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the PivotGrid.
+     * By default, navigation is disabled.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid navigatable={true} />
+     * ```
+     */
+    navigatable?: boolean;
+    /**
+     * Sets the `data` of the PivotGrid.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid data={[{ field: 'value', data: 100 }]} />
+     * ```
+     */
+    data?: PivotDataItem[];
+    /**
+     * Sets the `columns` data of the PivotGrid.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid columns={[['Category', 'Subcategory']]} />
+     * ```
+     */
+    columns?: Tuple[];
+    /**
+     * Sets the `rows` data of the PivotGrid.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid rows={[['Region', 'Country']]} />
+     * ```
+     */
+    rows?: Tuple[];
+    /**
+     * The configuration of the `column` axes.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid columnAxes={[{ name: 'Category', expand: true }]} />
+     * ```
+     */
+    columnAxes?: PivotGridAxis[];
+    /**
+     * A callback, fired whenever the `columnAxes` property should change.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid onColumnAxesChange={(event) => console.log(event.value)} />
+     * ```
+     */
+    onColumnAxesChange?: (event: PivotGridAxesChangeEvent) => void;
+    /**
+     * The configuration of the `row` axes.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid rowAxes={[{ name: 'Region', expand: true }]} />
+     * ```
+     */
+    rowAxes?: PivotGridAxis[];
+    /**
+     * A callback, fired whenever the `rowAxes` property should change.
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid onRowAxesChange={(event) => console.log(event.value)} />
+     * ```
+     */
+    onRowAxesChange?: (event: PivotGridAxesChangeEvent) => void;
+    /**
+     * Overrides the default `row` component.
+     *
+     * The default component is: [PivotGridRow](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridrow).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid row={(props) => <CustomRow {...props} />} />
+     * ```
+     */
+    row?: CustomComponent<PivotGridRowProps>;
+    /**
+     * Overrides the default `column` component.
+     *
+     * The default component is: [PivotGridColumn](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridcolumn).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid column={(props) => <CustomColumn {...props} />} />
+     * ```
+     */
+    column?: CustomComponent<PivotGridColumnProps>;
+    /**
+     * Overrides the default `cell` component.
+     *
+     * The default component is: [PivotGridCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridcell).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid cell={(props) => <CustomCell {...props} />} />
+     * ```
+     */
+    cell?: CustomComponent<PivotGridCellProps>;
+    /**
+     * Overrides the default `headerCell` component.
+     *
+     * The default component is: [PivotGridHeaderCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridheadercell).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid headerCell={(props) => <CustomHeaderCell {...props} />} />
+     * ```
+     */
+    headerCell?: CustomComponent<PivotGridHeaderCellProps>;
+    /**
+     * Overrides the default column-headers `row` component.
+     *
+     * The default component is: [PivotGridRow](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridrow).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid columnHeadersRow={(props) => <CustomRow {...props} />} />
+     * ```
+     */
+    columnHeadersRow?: React.ComponentType<PivotGridRowProps>;
+    /**
+     * Overrides the default column-headers `column` component.
+     *
+     * The default component is: [PivotGridColumn](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridcolumn).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid columnHeadersColumn={(props) => <CustomColumn {...props} />} />
+     * ```
+     */
+    columnHeadersColumn?: React.ComponentType<PivotGridColumnProps>;
+    /**
+     * Overrides the default column-headers `headerCell` component.
+     *
+     * The default component is: [PivotGridHeaderCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridheadercell).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid columnHeadersCell={(props) => <CustomHeaderCell {...props} />} />
+     * ```
+     */
+    columnHeadersCell?: React.ComponentType<PivotGridHeaderCellProps>;
+    /**
+     * Overrides the default row-headers `row` component.
+     *
+     * The default component is: [PivotGridRow](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridrow).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid rowHeadersRow={(props) => <CustomRow {...props} />} />
+     * ```
+     */
+    rowHeadersRow?: React.ComponentType<PivotGridRowProps>;
+    /**
+     * Overrides the default row-headers `column` component.
+     *
+     * The default component is: [PivotGridColumn](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridcolumn).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid rowHeadersColumn={(props) => <CustomColumn {...props} />} />
+     * ```
+     */
+    rowHeadersColumn?: React.ComponentType<PivotGridColumnProps>;
+    /**
+     * Overrides the default row-headers `headerCell` component.
+     *
+     * The default component is: [PivotGridHeaderCell](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridheadercell).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid rowHeadersCell={(props) => <CustomHeaderCell {...props} />} />
+     * ```
+     */
+    rowHeadersCell?: React.ComponentType<PivotGridHeaderCellProps>;
+    /**
+     * Overrides the default data `row` component.
+     *
+     * The default component is: [PivotGridRow](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridrow).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid dataRow={(props) => <CustomRow {...props} />} />
+     * ```
+     */
+    dataRow?: React.ComponentType<PivotGridRowProps>;
+    /**
+     * Overrides the default data `column` component.
+     *
+     * The default component is: [PivotGridColumn](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridcolumn).
+     *
+     * @example
+     * ```jsx
+     * <PivotGrid dataColumn={(props) => <CustomColumn {...props} />} />
+     * ```
+     */
+    dataColumn?: React.ComponentType<PivotGridColumnProps>;
+}
+/**
+ * Represents the object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the PivotGrid component.
+ */
+export interface PivotGridHandle {
+    /**
+     * The DOM element of the PivotGrid component.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The current properties of the PivotGrid component.
+     */
+    props: PivotGridProps;
+    /**
+     * The rows that make up the column headers.
+     */
+    columnHeaderRows: AxisRow[];
+    /**
+     * The rows that make up the row headers.
+     */
+    rowHeaderRows: AxisRow[];
+    /**
+     * The data cells organized by row and column.
+     */
+    dataCells: {
+        row: string[];
+        cells: PivotDataItem[];
+    }[];
+    /**
+     * The width of the row header area in pixels.
+     */
+    rowHeaderBreadth: number;
+    /**
+     * The height of the column header area in pixels.
+     */
+    columnHeaderBreadth: number;
+}
+/**
+ * Represents the [KendoReact PivotGrid component](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridprops).
+ */
+export declare const PivotGrid: React.ForwardRefExoticComponent<PivotGridProps & React.RefAttributes<PivotGridHandle | null>>;

package/components/AxesEditor.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ChipListProps as KendoReactChipListProps } from '@progress/kendo-react-buttons';
+import { FieldProps } from '@progress/kendo-react-form';
+import { PivotGridAxis } from '@progress/kendo-pivotgrid-common';
+import { CustomComponent } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact PivotGridAxesEditor component](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxeseditor).
+ */
+export interface PivotGridAxesEditorProps extends FieldProps {
+    /**
+     * Represents the `value` of the AxesEditor.
+     *
+     * The `value` is an array of [PivotGridAxis](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxis)
+     */
+    value: PivotGridAxis[];
+    /**
+     * Indicates which of the three available axes are represented by the editor:
+     * - columnAxes
+     * - rowAxes
+     * - measureAxes
+     */
+    field: string;
+    /**
+     * Overrides the default `chipList` component.
+     *
+     * The default component is: [KendoReactChipList](https://www.telerik.com/kendo-react-ui/components/buttons/api/chiplist).
+     */
+    chipList?: CustomComponent<KendoReactChipListProps>;
+    /**
+     * Sets the `className` props of the ClipList component.
+     */
+    className?: string;
+}
+/**
+ * Represents the object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the PivotGridAxesEditor component.
+ */
+export interface PivotGridAxesEditorHandle {
+    /**
+     * The properties passed to the PivotGridAxesEditor component.
+     */
+    props: PivotGridAxesEditorProps;
+    /**
+     * The DOM element of the PivotGridAxesEditor component.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * Represents the [KendoReact PivotGridAxesEditor component](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxeseditorprops).
+ */
+export declare const PivotGridAxesEditor: React.ForwardRefExoticComponent<PivotGridAxesEditorProps & React.RefAttributes<PivotGridAxesEditorHandle>>;

package/components/AxisEditor.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PivotGridAxis } from '@progress/kendo-pivotgrid-common';
+import { CustomComponent } from '@progress/kendo-react-common';
+import { ColumnMenuProps as KendoReactColumnMenuProps } from '@progress/kendo-react-data-tools';
+import { ChipProps as KendoReactChipProps } from '@progress/kendo-react-buttons';
+import { PivotGridAxisFilterFieldsEditorProps } from './AxisFilterFieldsEditor.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact PivotGridAxisEditor component](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxiseditor).
+ */
+export interface PivotGridAxisEditorProps extends KendoReactChipProps {
+    /**
+     * Represents the `dataItem` of the AxisEditor.
+     *
+     * The `dataItem` is a single [PivotGridAxis](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxis) object.
+     */
+    dataItem: PivotGridAxis;
+    /**
+     * Overrides the default `chip` component.
+     *
+     * The default component is: [KendoReactChip](https://www.telerik.com/kendo-react-ui/components/buttons/api/chip).
+     */
+    chip?: CustomComponent<KendoReactChipProps>;
+    /**
+     * Overrides the default `dropClue` component.
+     *
+     * The default component is: `(props) => <div className="k-grouping-dropclue" style={{ position: 'relative', zIndex: 10000 }} {...props}/>`
+     */
+    dropClue?: CustomComponent<any>;
+    /**
+     * Overrides the default `columnMenuTextColumn` component.
+     *
+     * The default component is: [KendoReactColumnMenuTextColumn](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenutextcolumn).
+     */
+    columnMenuTextColumn?: CustomComponent<KendoReactColumnMenuProps>;
+    /**
+     * Overrides the default `filterFieldsEditor` component.
+     *
+     * The default component is: [PivotGridAxisFilterFieldsEditor](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxisfilterfieldseditor).
+     */
+    filterFieldsEditor?: CustomComponent<PivotGridAxisFilterFieldsEditorProps>;
+}
+/**
+ * Represents the object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the PivotGridAxisEditor component.
+ */
+export interface PivotGridAxisEditorHandle {
+    /**
+     * The properties passed to the PivotGridAxisEditor component.
+     */
+    props: PivotGridAxisEditorProps;
+    /**
+     * The DOM element of the PivotGridAxisEditor component.
+     */
+    element: HTMLSpanElement | null;
+}
+/**
+ * Represents the [KendoReact PivotGridAxisEditor component](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxiseditorprops).
+ */
+export declare const PivotGridAxisEditor: React.ForwardRefExoticComponent<PivotGridAxisEditorProps & React.RefAttributes<PivotGridAxisEditorHandle | null>>;

package/components/AxisEditor.mjs

@@ -8,7 +8,7 @@
 import * as r from "react";
 import { compareAxes as R } from "@progress/kendo-pivotgrid-common";
 import { useCustomComponent as d, useDraggable as _, canUseRef as $ } from "@progress/kendo-react-common";
-import { ColumnMenuTextFilter as B, ColumnMenuTextColumn as K } from "@progress/kendo-react-data-tools";
+import { ColumnMenuTextColumn as B, ColumnMenuTextFilter as K } from "@progress/kendo-react-data-tools";
 import { Chip as V } from "@progress/kendo-react-buttons";
 import { findFilters as M, findFilter as Z } from "../utils/index.mjs";
 import { PivotGridConfiguratorEditorAxesContext as j } from "./EditorContext.mjs";
@@ -114,7 +114,7 @@ const L = r.forwardRef(
           onSortChange: G,
           filter: p && p.length ? [{ logic: "and", filters: p }] : void 0,
           onFilterChange: X,
-          filterContent: [B],
+          filterContent: [K],
           ...S
         }
       )
@@ -122,7 +122,7 @@ const L = r.forwardRef(
   }
 ), c = {
   chip: V,
-  columnMenuTextColumn: K,
+  columnMenuTextColumn: B,
   filterFieldsEditor: q,
   dropClue: (t) => /* @__PURE__ */ r.createElement("div", { className: "k-grouping-dropclue", style: { position: "relative", zIndex: 1e4 }, ...t })
 };

package/components/AxisFilterFieldsEditor.d.ts

@@ -0,0 +1,145 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TreeViewProps as KendoReactTreeViewProps } from '@progress/kendo-react-treeview';
+import { ButtonProps as KendoReactButtonProps } from '@progress/kendo-react-buttons';
+import { FilterDescriptor } from '@progress/kendo-data-query';
+import { ColumnMenuItemProps as KendoReactColumnMenuItemProps, ColumnMenuFormProps as KendoReactColumnMenuFormProps } from '@progress/kendo-react-data-tools';
+import { PivotGridField, PivotGridAxis } from '@progress/kendo-pivotgrid-common';
+import { CustomComponent } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the event arguments of the `PivotGridAxisFilterFields` expand-change event.
+ */
+export interface PivotGridAxisFilterFieldsExpandChangeEvent {
+    /**
+     * The handle of the component that triggered the event.
+     */
+    target: PivotGridAxisFilterFieldsEditorHandle;
+    /**
+     * The expand state value.
+     */
+    value: boolean;
+    /**
+     * The DOM event that triggered the change.
+     */
+    syntheticEvent: React.SyntheticEvent;
+}
+/**
+ * Represents the event arguments of the `PivotGridAxisFilterField` expand event.
+ */
+export interface PivotGridAxisFilterFieldExpandEvent {
+    /**
+     * The handle of the component that triggered the event.
+     */
+    target: PivotGridAxisFilterFieldsEditorHandle;
+    /**
+     * The field that was expanded.
+     */
+    value: PivotGridField;
+    /**
+     * The DOM event that triggered the expand.
+     */
+    syntheticEvent: React.SyntheticEvent;
+}
+/**
+ * Represents the props of the [KendoReact PivotGridAxisFilterFieldsEditor component](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxisfilterfieldseditor).
+ */
+export interface PivotGridAxisFilterFieldsEditorProps {
+    /**
+     * Sets the `className` property of the top-most element of the PivotGridAxisFilterFieldsEditor in addition to the default `k-columnmenu-item-wrapper` class.
+     */
+    className?: string;
+    /**
+     * Sets the `id` property of the top-most element of the PivotGridAxisFilterFieldsEditor.
+     */
+    id?: string;
+    /**
+     * Sets the `tabIndex` property of the top-most element of the PivotGridAxisFilterFieldsEditor.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `style` property of the top-most element of the PivotGridAxisFilterFieldsEditor.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `data` of the PivotGridAxisFilterFieldsEditor.
+     *
+     * The `data` represents all fields available for filtering.
+     */
+    data?: PivotGridField[];
+    /**
+     * Represents the `dataItem` of the AxisEditor.
+     *
+     * The `dataItem` is a single [PivotGridAxis](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxis) object.
+     */
+    dataItem: PivotGridAxis;
+    /**
+     * Represents the initial filter value before additional operations are executed.
+     */
+    defaultFilter?: FilterDescriptor;
+    /**
+     * Indicates which of the three available axes are represented by the editor:
+     * - columnAxes
+     * - rowAxes
+     * - measureAxes
+     */
+    axes: string;
+    /**
+     * Overrides the default `columnMenuItem` component.
+     *
+     * The default component is: [KendoReactColumnMenuItem](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenuitem).
+     */
+    columnMenuItem?: CustomComponent<KendoReactColumnMenuItemProps>;
+    /**
+     * Overrides the default `columnMenuForm` component.
+     *
+     * The default component is: [KendoReactColumnMenuForm](https://www.telerik.com/kendo-react-ui/components/datatools/api/columnmenuform).
+     */
+    columnMenuForm?: CustomComponent<KendoReactColumnMenuFormProps>;
+    /**
+     * Overrides the default `resetButton` component.
+     *
+     * The default component is: [KendoReactButton](https://www.telerik.com/kendo-react-ui/components/buttons/api/button).
+     */
+    resetButton?: CustomComponent<KendoReactButtonProps>;
+    /**
+     * Overrides the default `applyButton` component.
+     *
+     * The default component is: [KendoReactButton](https://www.telerik.com/kendo-react-ui/components/buttons/api/button).
+     */
+    applyButton?: CustomComponent<KendoReactButtonProps>;
+    /**
+     * Overrides the default `treeView` component.
+     *
+     * The default component is: [KendoReactTreeView](https://www.telerik.com/kendo-react-ui/components/treeview/api/treeview).
+     */
+    treeView?: CustomComponent<KendoReactTreeViewProps>;
+    /**
+     * Overrides the default `treeView` component.
+     *
+     * The default component is: `() => <Skeleton shape={'rectangle'} style={{height: '20px', width:'calc(100% - 16px)', margin: 8}}/>`.
+     */
+    noData?: CustomComponent<any>;
+}
+/**
+ * Represents the object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the PivotGridAxisFilterFieldsEditor component.
+ */
+export interface PivotGridAxisFilterFieldsEditorHandle {
+    /**
+     * The properties passed to the PivotGridAxisFilterFieldsEditor component.
+     */
+    props: PivotGridAxisFilterFieldsEditorProps;
+    /**
+     * The DOM element of the PivotGridAxisFilterFieldsEditor component.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * Represents the [KendoReact PivotGridAxisFilterFieldsEditor component](https://www.telerik.com/kendo-react-ui/components/pivotgrid/api/pivotgridaxisfilterfieldseditorprops).
+ */
+export declare const PivotGridAxisFilterFieldsEditor: React.ForwardRefExoticComponent<PivotGridAxisFilterFieldsEditorProps & React.RefAttributes<PivotGridAxisFilterFieldsEditorHandle | null>>;