@progress/kendo-vue-grid/interfaces/GridCellsSettings.d.ts

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 { Component, TdHTMLAttributes } from 'vue';
import { TABLE_COL_INDEX_ATTRIBUTE, HeaderThElementProps } from '@progress/kendo-vue-data-tools';
import { GridCellProps } from './GridCellProps';
import { GridFooterCellProps } from './GridFooterCellProps';
import { GridFilterCellProps } from './GridFilterCellProps';
import { GridHeaderCellProps } from './GridHeaderCellProps';
/**
 * Represents the attributes for Grid table cell elements, extending standard HTML td element properties.
 *
 * @hidden
 */
export interface GridTdAttributes extends TdHTMLAttributes {
    /**
     * The column index attribute used for grid operations.
     */
    [TABLE_COL_INDEX_ATTRIBUTE]?: number;
    /**
     * The unique identifier of the column.
     */
    columnId?: string;
    /**
     * The Vue key for the element.
     */
    key?: string | number;
}
/**
 * Represents the attributes for Grid header cell elements, extending standard HTML th element properties.
 *
 * @hidden
 */
export interface GridThAttributes extends HeaderThElementProps {
    /**
     * The unique identifier of the column.
     */
    columnId: string;
    /**
     * The Vue key for the element.
     */
    key?: string | number;
}
/**
 * The properties of the default Grid Cell.
 */
export interface GridCustomCellProps extends GridCellProps {
    /**
     * The props and attributes that are applied to the td element by default.
     */
    tdProps?: TdHTMLAttributes | null;
    /**
     * The props and attributes that are applied to the second td. Such element is
     * rendered in very rare cases when we have grouping and sticky columns.
     */
    td2Props?: TdHTMLAttributes | null;
}
/**
 * The properties of the footer Grid Cell.
 */
export interface GridCustomFooterCellProps extends GridFooterCellProps {
    /**
     * The props and attributes that are applied to the td element by default.
     */
    tdProps?: TdHTMLAttributes | null;
    /**
     * The index of the column that is rendered.
     */
    index?: number;
    /**
     * The locked state of the column.
     */
    locked?: boolean;
}
/**
 * The properties of the filter Grid Cell.
 */
export interface GridCustomFilterCellProps extends GridFilterCellProps {
    /**
     * The props and attributes that are applied to the th element by default.
     */
    thProps?: GridThAttributes | null;
    /**
     * The props and attributes that are applied to the td element by default.
     */
    tdProps?: GridTdAttributes | null;
    /**
     * The index of the column.
     */
    index?: number;
}
/**
 * The properties of the header Grid Cell.
 */
export interface GridCustomHeaderCellProps extends GridHeaderCellProps {
    /**
     * The props and attributes that are applied to the `th` element by default. The property should be used with the [HeaderThElement](https://www.telerik.com/kendo-vue-ui/components/datatools/api/headerthelement) component as demonstrated in [this example](https://www.telerik.com/kendo-vue-ui/components/grid/cells#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell).
     */
    thProps?: GridThAttributes | null;
    /**
     * The index of the column.
     */
    index?: number;
}
/**
 * The settings of the cells prop options.
 */
export interface GridCellsSettings {
    /**
     * Custom component for rendering the header cell.
     *
     * @example
     * ```vue
     * <Grid :cells="{ headerCell: MyHeaderCell }" />
     * ```
     */
    headerCell?: Component<GridCustomHeaderCellProps> | string;
    /**
     * Custom component for rendering the filter cell.
     *
     * @example
     * ```vue
     * <Grid :cells="{ filterCell: MyFilterCell }" />
     * ```
     */
    filterCell?: Component<GridCustomFilterCellProps> | string;
    /**
     * Custom component for rendering the footer cell.
     *
     * @example
     * ```vue
     * <Grid :cells="{ footerCell: MyFooterCell }" />
     * ```
     */
    footerCell?: Component<GridCustomFooterCellProps> | string;
    /**
     * Custom component for rendering the group header cell.
     *
     * @example
     * ```vue
     * <Grid :cells="{ groupHeader: MyGroupHeaderCell }" />
     * ```
     */
    groupHeader?: Component<GridCustomCellProps> | string;
    /**
     * Custom component for rendering the data cell in table layout mode.
     *
     * @example
     * ```vue
     * <Grid :cells="{ data: MyDataCell }" />
     * ```
     */
    data?: Component<GridCustomCellProps> | string;
    /**
     * Custom component for rendering the group footer cell.
     *
     * @example
     * ```vue
     * <Grid :cells="{ groupFooter: MyGroupFooterCell }" />
     * ```
     */
    groupFooter?: Component<GridCustomCellProps> | string;
    /**
     * Custom cell components for selection columns.
     *
     * @example
     * ```vue
     * <Grid :cells="{ select: { data: MySelectDataCell } }" />
     * ```
     */
    select?: {
        /**
         * Custom component for rendering the group header cell in selection columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ select: { groupHeader: MySelectGroupHeaderCell } }" />
         * ```
         */
        groupHeader?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the data cell in selection columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ select: { data: MySelectDataCell } }" />
         * ```
         */
        data?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the group footer cell in selection columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ select: { groupFooter: MySelectGroupFooterCell } }" />
         * ```
         */
        groupFooter?: Component<GridCustomCellProps> | string;
    };
    /**
     * Custom cell components for hierarchy columns.
     *
     * @example
     * ```vue
     * <Grid :cells="{ hierarchy: { data: MyHierarchyDataCell } }" />
     * ```
     */
    hierarchy?: {
        /**
         * Custom component for rendering the group header cell in hierarchy columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ hierarchy: { groupHeader: MyHierarchyGroupHeaderCell } }" />
         * ```
         */
        groupHeader?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the data cell in hierarchy columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ hierarchy: { data: MyHierarchyDataCell } }" />
         * ```
         */
        data?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the group footer cell in hierarchy columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ hierarchy: { groupFooter: MyHierarchyGroupFooterCell } }" />
         * ```
         */
        groupFooter?: Component<GridCustomCellProps> | string;
    };
    /**
     * Custom cell components for group columns.
     *
     * @example
     * ```vue
     * <Grid :cells="{ group: { data: MyGroupDataCell } }" />
     * ```
     */
    group?: {
        /**
         * Custom component for rendering the group header cell in group columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ group: { groupHeader: MyGroupGroupHeaderCell } }" />
         * ```
         */
        groupHeader?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the data cell in group columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ group: { data: MyGroupDataCell } }" />
         * ```
         */
        data?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the group footer cell in group columns.
         *
         * @example
         * ```vue
         * <Grid :cells="{ group: { groupFooter: MyGroupGroupFooterCell } }" />
         * ```
         */
        groupFooter?: Component<GridCustomCellProps> | string;
    };
    /**
    * Custom cell components for pin columns.
    *
    * @example
    * ```tsx
    * import { MyPinDataCell } from './MyPinDataCell';
    * <Grid cells={{ pin: { data: MyPinDataCell } }} />
    * ```
    */
    pin?: {
        /**
         * Custom component for rendering the group header cell in pin columns.
         */
        groupHeader?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the data cell in pin columns.
         */
        data?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the group footer cell in pin columns.
         */
        groupFooter?: Component<GridCustomCellProps> | string;
    };
    /**
     * Custom cell components for edit columns.
     *
     * @example
     * ```vue
     * <Grid :cells="{ edit: { text: MyTextEditCell } }" />
     * ```
     */
    edit?: {
        /**
         * Custom component for rendering the text edit cell.
         *
         * @example
         * ```vue
         * <Grid :cells="{ edit: { text: MyTextEditCell } }" />
         * ```
         */
        text?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the numeric edit cell.
         *
         * @example
         * ```vue
         * <Grid :cells="{ edit: { numeric: MyNumericEditCell } }" />
         * ```
         */
        numeric?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the boolean edit cell.
         *
         * @example
         * ```vue
         * <Grid :cells="{ edit: { boolean: MyBooleanEditCell } }" />
         * ```
         */
        boolean?: Component<GridCustomCellProps> | string;
        /**
         * Custom component for rendering the date edit cell.
         *
         * @example
         * ```vue
         * <Grid :cells="{ edit: { date: MyDateEditCell } }" />
         * ```
         */
        date?: Component<GridCustomCellProps> | string;
    };
}