@progress/kendo-react-layout/tilelayout/TileLayout.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { TileLayoutGap, TileLayoutItem, TilePosition, TileLayoutRepositionEvent, TileStrictPosition, TileLayoutAutoFlow } from './interfaces/index.js';
import * as React from 'react';
/**
 * Represents the props of the [TileLayout](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout) component.
 */
export interface TileLayoutProps {
    /**
     * Sets the `id` property of the root element.
     *
     * @example
     * ```jsx
     * <TileLayout id="tile-layout" />
     * ```
     */
    id?: string;
    /**
     * Sets additional CSS styles to the TileLayout.
     *
     * @example
     * ```jsx
     * <TileLayout style={{ backgroundColor: 'lightgray' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets additional classes to the TileLayout.
     *
     * @example
     * ```jsx
     * <TileLayout className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Represents the `dir` HTML attribute. Use this to switch from LTR to RTL.
     *
     * @example
     * ```jsx
     * <TileLayout dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Specifies the gaps between the tiles ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
     *
     * * The possible keys are:
     * * `rows`
     * * `columns`
     *
     * @example
     * ```jsx
     * <TileLayout gap={{ rows: 10, columns: 10 }} />
     * ```
     */
    gap?: TileLayoutGap;
    /**
     * Specifies the default number of columns ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
     *
     * @example
     * ```jsx
     * <TileLayout columns={4} />
     * ```
     */
    columns?: number;
    /**
     * Specifies the default width of the columns ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
     *
     * @example
     * ```jsx
     * <TileLayout columnWidth={200} />
     * ```
     */
    columnWidth?: number | string;
    /**
     * Specifies the default height of the rows ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
     *
     * @example
     * ```jsx
     * <TileLayout rowHeight={100} />
     * ```
     */
    rowHeight?: number | string;
    /**
     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
     *
     * @example
     * ```jsx
     * <TileLayout dataItemKey="id" />
     * ```
     */
    dataItemKey?: string;
    /**
     * The collection of items that will be rendered in the TileLayout
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout#toc-tilelayout-configuration-options)).
     *
     * @example
     * ```jsx
     * <TileLayout items={[{ header: 'Header', body: 'Body' }]} />
     * ```
     */
    items?: TileLayoutItem[];
    /**
     * The list of tiles' positions which are used when the TileLayout is in controlled mode
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-controlling-the-position)).
     *
     * @example
     * ```jsx
     * <TileLayout positions={[{ col: 1, row: 1 }]} />
     * ```
     */
    positions?: TilePosition[];
    /**
     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
     * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
     *
     * @default column
     *
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/auto-flows)).
     *
     * @example
     * ```jsx
     * <TileLayout autoFlow="row" />
     * ```
     */
    autoFlow?: TileLayoutAutoFlow;
    /**
     * Fires when the user repositions the tile by either dragging or resizing
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-controlling-the-position)).
     *
     * @example
     * ```jsx
     * <TileLayout onReposition={(e) => console.log(e.value)} />
     * ```
     */
    onReposition?: (event: TileLayoutRepositionEvent) => void;
    /**
     * Use this callback to prevent or allow dragging of the tiles based on specific DOM events.
     * Setting `ignoreDrag={(e) => { return !(e.target.classList.contains("k-card-title")); }}` makes only the headers draggable.
     * Setting `ignoreDrag={(e) => { return e.target.nodeName == "INPUT"; }}` ignores dragging input elements.
     *
     * @example
     * ```jsx
     * <TileLayout ignoreDrag={(e) => e.target.nodeName === 'INPUT'} />
     * ```
     */
    ignoreDrag?: (element: HTMLElement) => boolean;
}
/**
 * @hidden
 */
export interface TileLayoutState {
    positions: TileStrictPosition[];
    activeHint?: boolean;
}
/**
 * Represents the public API of the TileLayout component.
 */
export interface TileLayoutHandle {
    /**
     * Gets the HTML element of the TileLayout component.
     */
    element: HTMLDivElement | null;
    /**
     * Focuses the TileLayout component.
     */
    focus: () => void;
}
/**
 * Represents the [KendoReact TileLayout component](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout).
 *
 * @example
 * ```jsx
 * <TileLayout />
 * ```
 */
export declare const TileLayout: React.ForwardRefExoticComponent<TileLayoutProps & React.RefAttributes<TileLayoutHandle>>;