office-ui-fabric-react/lib/components/DetailsList/ShimmeredDetailsList.types.d.ts

Reusable React components for building experiences for Microsoft 365.

import * as React from 'react';
import { IDetailsListProps } from './DetailsList.types';
import { IDetailsRowProps } from './DetailsRow.types';
import { IStyle } from '../../Styling';
import { IStyleFunctionOrObject, Omit } from '../../Utilities';
/**
 * ShimmeredDetailsList props interface
 * {@docCategory DetailsList}
 */
export interface IShimmeredDetailsListProps extends Omit<IDetailsListProps, 'styles'> {
    /**
     * DetailsList styles to pass through.
     */
    detailsListStyles?: IDetailsListProps['styles'];
    /**
     * Boolean flag to control when to render placeholders vs real items.
     * It's up to the consumer app to know when fetching of the data is done to toggle this prop.
     */
    enableShimmer?: boolean;
    /**
     * Aria label for shimmer. Set on grid while shimmer is enabled.
     */
    ariaLabelForShimmer?: string;
    /**
     * Determines whether to remove a fading out to bottom overlay over the shimmering items
     * used to further emphasize the unknown number of items that will be fetched.
     */
    removeFadingOverlay?: boolean;
    /**
     * Custom placeholder renderer to be used when in need to override the default placeholder of a DetailsRow.
     * `rowProps` argument is passed to leverage the calculated column measurements done by DetailsList
     * or you can use the optional arguments of item `index` and `defaultRender` to execute additional
     * logic before rendering the default placeholder.
     */
    onRenderCustomPlaceholder?: (rowProps: IDetailsRowProps, index?: number, defaultRender?: (props: IDetailsRowProps) => React.ReactNode) => React.ReactNode;
    /**
     * Custom styles to override the styles specific to the ShimmeredDetailsList root area.
     * @deprecated Use `styles` prop instead. Any value provided will be ignored.
     */
    shimmerOverlayStyles?: IStyleFunctionOrObject<IShimmeredDetailsListStyleProps, IShimmeredDetailsListStyles>;
    /**
     * Custom styles to override the styles specific to the ShimmeredDetailsList root area.
     */
    styles?: IStyleFunctionOrObject<IShimmeredDetailsListStyleProps, IShimmeredDetailsListStyles>;
    /**
     * Number of shimmer placeholder lines to render.
     * @defaultvalue 10
     */
    shimmerLines?: number;
}
/**
 * Defines props needed to construct styles.
 * This represents the simplified set of immutable things which control the class names.
 * {@docCategory DetailsList}
 */
export declare type IShimmeredDetailsListStyleProps = Required<Pick<IShimmeredDetailsListProps, 'theme'>>;
/**
 * Represents the stylable areas of the control.
 * {@docCategory DetailsList}
 */
export interface IShimmeredDetailsListStyles {
    /**
     * Represents styles passed to the `List` component for creating a fade-out to the bottom overlay.
     */
    root: IStyle;
}