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

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;

export declare interface ListViewEvent extends BaseEvent<ListView> {
}

export declare const ListViewFooter: React_2.FunctionComponent<ListViewFooterProps>;

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

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

export declare const ListViewHeader: React_2.FunctionComponent<ListViewHeaderProps>;

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

/**
 * Represents the props of the 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;
}

export declare const ListViewItemWrapper: React_2.FunctionComponent<ListViewItemWrapperProps>;

/**
 * Represents the props of the 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.
     */
    className?: string;
    /**
     * Sets the data of the ListView.
     */
    data?: any[];
    /**
     * Defines the component that will be rendered for each item of the data collection.
     */
    item?: React.ComponentType<ListViewItemProps>;
    /**
     * Defines the component that will be rendered for ListView header.
     */
    header?: React.ComponentType<any>;
    /**
     * Defines the component that will be rendered for ListView footer.
     */
    footer?: React.ComponentType<any>;
    /**
     * Sets styles to the ListView container.
     */
    style?: React.CSSProperties;
    /**
     * Fires when the ListView has been scrolled.
     */
    onScroll?: (event: ListViewEvent) => void;
    /**
     * If set to `true`, the user can use dedicated shortcuts to interact with the ListView.
     * By default, navigation is disabled.
     */
    navigatable?: boolean;
}

export { }