rx-datatable API
    Preparing search index...

    Interface ListCoreProps<T, K, ItemProps>

    Main properties of a <ListBox> or <ListCore>. The only required prop is list.

    T: Type of each item in the list K: Type of the "sel key" for each item (see selection and getSelKey) ItemProps: type of additional props passed to each item, e.g. for styling

    interface ListCoreProps<T, K = T, ItemProps = DefaultListItemProps> {
        filter?: (item: T, index: number) => boolean;
        getKey?: (item: T) => string | number;
        getSelKey?: (item: T) => K;
        itemProps?: ItemProps | ((item: T, i: number) => ItemProps | undefined);
        lastClicked?: Holder<K | undefined>;
        list: T[];
        onClickItem?: (
            this: ModifiedListItemProps<T, K, ItemProps>,
            item: T,
        ) => void | "abort" | Promise<void | "abort">;
        placeholder?: ReactNode;
        readOnly?: boolean;
        renderItem?: (item: T, props: ListItemProps<T, K, ItemProps>) => ReactNode;
        RenderItem?: ComponentType<ListItemProps<T, K, ItemProps>>;
        selection?: ISet<K>;
        selMode?: "single" | "multi" | "invertCtrl" | "noSelect";
        virtualGapRenderer?: (height: number, ref?: Ref<Element>) => ReactNode;
        virtualize?: VirtualizationSettings<T>;
    }

    Type Parameters

    Hierarchy (View Summary)

    Index
    filter? getKey? getSelKey? itemProps? lastClicked? list onClickItem? placeholder? readOnly? renderItem? RenderItem? selection? selMode? virtualGapRenderer? virtualize?
    filter?: (item: T, index: number) => boolean

    This is called for each item, if you provide it. Items for which this function returns false are hidden.

    getKey?: (item: T) => string | number

    Lists in React require a key prop. This function is called to get that key. If this is omitted, the index is used as the key. NOTE: in React 18 it is documented that "Non-unique keys may cause children to be duplicated and/or omitted" and duplicate list items have been observed in this context when there are duplicate keys. If you cannot guarantee unique keys, it is better not to provide getKey at all (but this can cause its own problems, e.g. items losing focus when the list order changes).

    getSelKey?: (item: T) => K

    If the items are stored in wrappers that can change between renders, provide this function to get a subobject or id of the item that does not change between renders. These "sel keys" are used in selection (and in expandedParents in the related TreeList component).

    itemProps?: ItemProps | ((item: T, i: number) => ItemProps | undefined)

    props that should apply to each item (usually Styles: className and style). If RenderItem is provided, these props are forwarded to it. In a <DataTable>, any styles in this object are applied to the row as a whole, not to each cell.

    lastClicked?: Holder<K | undefined>

    The most recently clicked item

    list: T[]

    List of items to display.

    onClickItem?: (
        this: ModifiedListItemProps<T, K, ItemProps>,
        item: T,
    ) => void | "abort" | Promise<void | "abort">

    This is called immediately when an item is clicked, and if it returns 'abort' the click on the item will be ignored rather than changing the selection.

    placeholder?: ReactNode

    Content to display when the list is empty. If this is a string, it's "grayed out" using opacity: 0.5.

    readOnly?: boolean

    If true, the whole list is read-only. If undefined, useIsReadOnlyContext is used to decide whether the whole list is read-only.

    renderItem?: (item: T, props: ListItemProps<T, K, ItemProps>) => ReactNode

    Called to render a T value. If this is not provided, defaultRenderItem is called to render each item.

    RenderItem?: ComponentType<ListItemProps<T, K, ItemProps>>

    Component type used to render the entire row (including an outer div or tr). This is expected to forward a ref so that arrow keys can scroll the item into view.

    selection?: ISet<K>

    This is the set of selected items. If not provided, items can still be selected but the selection state is internal to the list. If the caller wishes to re-render on changes to the set of selected items, it can use a MobX observable(set) rather than a plain Set<K>. ListCore uses runInAction just in case it's an ObservableSet. If type K isn't the same as T, you must provide a getSelKey prop.

    selMode?: "single" | "multi" | "invertCtrl" | "noSelect"

    Whether to support selecting multiple things (default: no). 'noCtrl' mode is a multiselect mode in which each click is treated as if the Ctrl key (⌘ on Mac) is pressed; if it is actually pressed then a single item is selected and the rest of the selection is cleared.

    'noSelect' mode prevents the selection from being changed by the user, so if the app itself does not select anything, nothing can be selected.

    virtualGapRenderer?: (height: number, ref?: Ref<Element>) => ReactNode

    Called when virtualization is enabled to render a placeholder element for a virtualized gap. Set the gap element's ref prop to the ref parameter; the list uses the ref to observe the gap so it can become real when it nears the viewport.

    virtualize?: VirtualizationSettings<T>

    These settings enable virtualization, which speeds up list rendering by not rendering off-screen items.

    Settings
    Member Visibility

    On This Page
    Properties