@nexusui/components/core/VirtualizedCardList/VirtualizedCardList.container.d.ts

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

import { ReactNode } from 'react';
import { StackProps } from '@mui/material/Stack';
import { IComplexCard } from '../ComplexCard';
export type ICardsPerRow = {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
};
export type IDataItem = IComplexCard & {
    id: string;
};
export interface IVirtualizedCardList<T extends {
    id: string;
}> extends StackProps {
    /**
     * The source data of the Virtualized Card List component.
     *
     * It is a generic type and will allow the user to render items of their own choosing.
     *
     * @default []
     */
    data: ReadonlyArray<T>;
    /**
     * Return a custom card component that the user wants to render items
     */
    renderCard: (card: T) => ReactNode;
    /**
     * Specify how many cards will be displayed in a row at different breakpoints.
     * If it's specified the property 'cardWidth' will not take effect and the size of card will change as the size of its container changes.
     * ```
     *  export type ICardsPerRow = {
     *    xs: number;
     *    sm: number;
     *    md: number;
     *    lg: number;
     *    xl: number;
     *  };
     * ```
     */
    cardsPerRow?: ICardsPerRow;
    /**
     * Indicate the current page data is still under fetching or returned
     * @default false
     */
    loading?: boolean;
    /**
     * Total counts of cards
     * @default 0
     */
    total: number;
    /**
     * Initial page, default 0
     * @default 0
     */
    initialPage?: number;
    /**
     * Page size, default 50
     * @default 50
     */
    pageSize?: number;
    /**
     * Specify the width of a Card
     * @default 321
     */
    cardWidth?: number;
    /**
     *  An empty state component with custom message shows when no data
     * @default <EmptyState size={'small'} header={'No data'} />
     */
    emptyState?: React.ReactNode;
    /**
     *  A loading state component shows while fetching data
     *
     */
    loadingState?: React.ReactNode;
    /**
     * A callback function use for fetching data
     */
    onFetchData: (page: number, pageSize: number) => void;
    /**
     * ID of the selected card to scroll to and highlight
     */
    selectedCardId?: string;
}
export declare const VirtualizedCardList: <T extends {
    id: string;
}>(props: IVirtualizedCardList<T>) => import("react/jsx-runtime").JSX.Element;