@progress/kendo-react-listview/index.d.ts

React ListView enables you to display a custom layout of data items. KendoReact ListView package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BaseEvent } from '@progress/kendo-react-common';
import * as React_2 from 'react';

export declare const ListView: React_2.ForwardRefExoticComponent<ListViewProps & React_2.RefAttributes<ListViewHandle | null>>;

/** @hidden */
export declare type ListView = ListViewHandle;

/**
 * The base event for ListView operations.
 */
export declare interface ListViewEvent extends BaseEvent<ListView> {
}

/**
 * The ListViewFooter component.
 */
export declare const ListViewFooter: React_2.FunctionComponent<ListViewFooterProps>;

/**
 * Represents the props of the ListViewFooter component.
 */
export declare interface ListViewFooterProps {
    /**
     * Sets the ListViewFooter children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the ListViewFooter.
     */
    style?: React.CSSProperties;
    /**
     * Adds additional classes to the ListViewFooter.
     */
    className?: string;
}

/** @hidden */
declare interface ListViewHandle {
    onScroll?: (event: ListViewEvent) => void;
    props: ListViewProps;
    context: {};
    state: {};
    refs: {};
}

/**
 * The ListViewHeader component.
 */
export declare const ListViewHeader: React_2.FunctionComponent<ListViewHeaderProps>;

/**
 * Represents the props of the ListViewHeader component.
 */
export declare interface ListViewHeaderProps {
    /**
     * Sets the ListViewHeader children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the ListViewHeader.
     */
    style?: React.CSSProperties;
    /**
     * Adds additional classes to the ListViewHeader.
     */
    className?: string;
}

/**
 * Represents the props of each ListView item.
 */
export declare interface ListViewItemProps {
    /**
     * The data object that represents the current item.
     */
    dataItem: any;
    /**
     * The index of the item in the data collection.
     */
    index?: number;
}

/**
 * The ListViewItemWrapper component.
 */
export declare const ListViewItemWrapper: React_2.FunctionComponent<ListViewItemWrapperProps>;

/**
 * Represents the props of each ListViewWrapper item.
 */
declare interface ListViewItemWrapperProps {
    /**
     * Sets the ListViewItemWrapper children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the ListViewItemWrapper.
     */
    style?: React.CSSProperties;
    /**
     * Specifies the CSS class names which are set to the ListViewItemWrapper.
     */
    className?: string;
}

/**
 * Represents the props of the [KendoReact ListView component]({% slug overview_listview %}).
 */
export declare interface ListViewProps {
    /**
     * Sets a class of the ListView DOM element.
     *
     * @example
     * ```jsx
     * <ListView className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets the data of the ListView.
     *
     * @example
     * ```jsx
     * <ListView data={[{ text: 'Item 1' }, { text: 'Item 2' }]} />
     * ```
     */
    data?: any[];
    /**
     * Defines the component that renders for each item of the data collection.
     *
     * @example
     * ```jsx
     * const CustomItem = (props) => <div>{props.text}</div>;
     *
     * <ListView item={CustomItem} />
     * ```
     */
    item?: React.ComponentType<ListViewItemProps>;
    /**
     * Defines the component that renders for the ListView header.
     *
     * @example
     * ```jsx
     * const CustomHeader = (props) => <div>Custom Header</div>;
     *
     * <ListView header={CustomHeader} />
     * ```
     */
    header?: React.ComponentType<any>;
    /**
     * Defines the component that renders for the ListView footer.
     *
     * @example
     * ```jsx
     * const CustomFooter = (props) => <div>Custom Footer</div>;
     *
     * <ListView footer={CustomFooter} />
     * ```
     */
    footer?: React.ComponentType<any>;
    /**
     * Sets styles to the ListView container.
     *
     * @example
     * ```jsx
     * <ListView style={{ height: '400px' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Fires when the ListView has been scrolled.
     *
     * @example
     * ```jsx
     * <ListView onScroll={(event) => console.log(event)} />
     * ```
     */
    onScroll?: (event: ListViewEvent) => void;
    /**
     * If set to `true`, the user can use dedicated shortcuts to interact with the ListView.
     * By default, navigation is disabled.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <ListView navigatable={true} />
     * ```
     */
    navigatable?: boolean;
}

export { }