Axinom Mosaic Libraries
    Preparing search index...

    Interface ListProps<T>

    interface ListProps<T extends Data> {
        className?: string;
        columnGap?: string;
        columns: Column<T>[];
        customRowRenderer?: (
            props: ListRowProps<T>,
        ) => ReactElement<any, string | JSXElementConstructor<any>> | null;
        data: T[];
        defaultSortOrder?: SortData<T>;
        enableSelectAll?: boolean;
        enableSelectAllDeselect?: boolean;
        errorMsg?: string;
        generateItemLink?: (data: T) => LocationDescriptor<unknown>;
        handleRetry?: boolean;
        headerRowActionSize?: string;
        headerRowHeight?: string;
        horizontalTextAlign?: "right" | "left" | "center";
        inlineMenuActions?: (data: T) => ActionData[];
        isError?: boolean;
        isLoading?: boolean;
        isRowDisabled?: (data: T, index: number) => boolean;
        keyProperty?: keyof T;
        listRowActionSize?: string;
        listRowHeight?: string;
        loadingTriggerOffset?: number;
        minimumWidth?: string;
        onItemClicked?: (data: T) => void | Promise<void>;
        onItemSelected?: (itemSelectEvent: ItemSelectEventArgs<T>) => void;
        onRequestMoreData?: () => void;
        onRetry?: () => void;
        onSortChanged?: (sort: SortData<T>) => void;
        rowGap?: string;
        selectionMode?: ListSelectMode;
        showActionButton?: boolean | ((data: T) => boolean);
        textWrap?: boolean;
        verticalTextAlign?: "end" | "center" | "start";
    }

    Type Parameters

    Index

    Properties

    className? columnGap? columns customRowRenderer? data defaultSortOrder? enableSelectAll? enableSelectAllDeselect? errorMsg? generateItemLink? handleRetry? headerRowActionSize? headerRowHeight? horizontalTextAlign? inlineMenuActions? isError? isLoading? isRowDisabled? keyProperty? listRowActionSize? listRowHeight? loadingTriggerOffset? minimumWidth? onItemClicked? onItemSelected? onRequestMoreData? onRetry? onSortChanged? rowGap? selectionMode? showActionButton? textWrap? verticalTextAlign?

    Properties

    className?: string

    CSS Class name for additional styles

    columnGap?: string

    Spacing between columns

    columns: Column<T>[]

    Column definitions The order of this array determines the order of columns

    customRowRenderer?: (
        props: ListRowProps<T>,
    ) => ReactElement<any, string | JSXElementConstructor<any>> | null

    Custom row renderer - if it returns null, the default ListRow will be used

    data: T[]

    List data

    defaultSortOrder?: SortData<T>

    Defines how the list data should be sorted

    enableSelectAll?: boolean

    In multiselect mode, whether the Select All button will be displayed. When Select All button is clicked the onItemClicked button will return SELECT_ALL instead of an array of items. (default: true)

    enableSelectAllDeselect?: boolean

    Sets whether deselection should be allowed in multiselect mode when select all is enabled. This would allow the user to deselect items after select all checkbox is checked. Once an item is deselected, the list will switch to a SINGLE_ITEMS selection mode.

    errorMsg?: string

    Optional error message to display if an error occurs. (default: 'There was an error.)

    generateItemLink?: (data: T) => LocationDescriptor<unknown>

    When set, this function is used to generate the link that the user should be navigated to for each item.

    This property takes precedence over onItemClicked, which will not be executed in case generateItemLink is set!

    handleRetry?: boolean

    Determines whether the component should render the error message and the 'onRetry' button. Set this to false if error handling will be done outside this component. (default: true)

    headerRowActionSize?: string

    Header checkbox size (default: '28px')

    headerRowHeight?: string

    Header row height

    horizontalTextAlign?: "right" | "left" | "center"

    Horizontal alignment of text

    inlineMenuActions?: (data: T) => ActionData[]

    Provide inline actions which are available through '...' context menu

    isError?: boolean

    Defines whether there was an error with the data. If true a button will be shown that will trigger onRetry when hit.

    isLoading?: boolean

    Defines whether data is being loaded (default: false)

    isRowDisabled?: (data: T, index: number) => boolean

    Function to determine if a specific row should be disabled

    keyProperty?: keyof T

    The name of the property on the data object that should be used to identify objects (default: 'id')

    listRowActionSize?: string

    List row action button and checkbox size (default: '50px')

    listRowHeight?: string

    List row height

    loadingTriggerOffset?: number

    Defines when the loading of the next page is triggered. The number represents the number of row left, before a load is triggered. (default: 10)

    minimumWidth?: string

    Minimum width of this component

    onItemClicked?: (data: T) => void | Promise<void>

    Raised when an data item is clicked.

    This is not being used, if generateItemLink is set!

    onItemSelected?: (itemSelectEvent: ItemSelectEventArgs<T>) => void

    Raised when item selection has changed

    onRequestMoreData?: () => void

    Raised when list has scrolled down to the item indicated by loadingTriggerOffset

    onRetry?: () => void

    Callback emitted if the user clicks on the retry button which is shown when isError is set to true

    onSortChanged?: (sort: SortData<T>) => void

    Callback to emit when a sort event occurs. Name of the property and order of the direction are sent back.

    rowGap?: string

    Spacing between rows

    selectionMode?: ListSelectMode

    Determines which select mode the list is in. (default: ListSelectMode.None) If 'Single' is selected, a check mark will be rendered for each row of data If 'Multi' is selected, a checkbox will be rendered for the header and each row of data

    showActionButton?: boolean | ((data: T) => boolean)

    Defines whether an action button will be rendered (default: true) Will not render if selectMode is not 'None'

    textWrap?: boolean

    If set to true, column text overflow will be wrapped to a new line. Otherwise, it will be truncated with an ellipsis (default: false)

    verticalTextAlign?: "end" | "center" | "start"

    Vertical alignment of text

    Settings

    Member Visibility

    On This Page

    Properties