rx-datatable API
    Preparing search index...

    Interface TreeListAuxProps<T, K, ItemProps>

    The rest of TreeListCoreProps.

    interface TreeListAuxProps<T, K = T, ItemProps = DefaultTreeItemProps> {
        class?: string;
        className?: string;
        expandedParents?: ISet<K>;
        getKey?: (item: T) => string | number;
        getSelKey?: (item: T) => K;
        indentPerLevel?: number;
        itemProps?: ItemProps | ((item: TreeItem<T>) => ItemProps | undefined);
        lastClicked?: Holder<K | undefined>;
        placeholder?: ReactNode;
        readOnly?: boolean;
        RenderItem?: ComponentType<TreeItemProps<T, K, ItemProps>>;
        role?: AriaRole;
        selection?: ISet<K>;
        selMode?: "single" | "multi" | "invertCtrl" | "noSelect";
        style?: CSSProperties;
        useDefaultClass?: boolean;
        virtualGapRenderer?: (height: number, ref?: Ref<Element>) => ReactNode;
        virtualize?: VirtualizationSettings<T>;
        filter?(item: TreeItem<T>, index: number): boolean;
        onClickItem?(
            this: ModifiedTreeItemProps<T, K, ItemProps>,
            item: TreeItem<T>,
        ): void | "abort" | Promise<void | "abort">;
        renderItem?(
            item: TreeItem<T>,
            props: ListItemProps<TreeItem<T, T>, K, ItemProps>,
        ): ReactNode;
        renderTreeIndent?(this: TreeItemProps<T, K, ItemProps>): ReactNode;
        sort?(list: TreeItemM<T>[]): void;
        sortComparer?(a: TreeItem<T>, b: TreeItem<T>): number;
    }

    Type Parameters

    Hierarchy (View Summary)

    • Omit<
          ListCoreProps<T, K, ItemProps>,

              | "renderItem"
              | "RenderItem"
              | "onClickItem"
              | "filter"
              | "itemProps"
              | "list",
      >
    • Styles
      • TreeListAuxProps
    Index
    class? className? expandedParents? getKey? getSelKey? indentPerLevel? itemProps? lastClicked? placeholder? readOnly? RenderItem? role? selection? selMode? style? useDefaultClass? virtualGapRenderer? virtualize?
    filter? onClickItem? renderItem? renderTreeIndent? sort? sortComparer?
    class?: string
    className?: string
    expandedParents?: ISet<K>

    The set of nodes that are currently expanded. If provided, this should be a MobX observable.set rather than a plain Set.

    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).

    indentPerLevel?: number

    Number of pixels to indent per level of nesting (default: the theme's treeIndent, i.e. the --dtbl-indent CSS variable, which itself defaults to 20)

    itemProps?: ItemProps | ((item: TreeItem<T>) => 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

    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?: ComponentType<TreeItemProps<T, K, ItemProps>>

    Component type used to render the entire row (including an outer div or tr).

    role?: AriaRole
    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.

    style?: CSSProperties
    useDefaultClass?: boolean
    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.

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

      Parameters

      Returns boolean

    • Called to render the indentation and tree expander button. It will return an element with display: inline-block and with a width that varies according to the appropriate amount of indentation. Note: this should usually be placed inside a flex row (display: flex) so that word-wrapping of the label after the indent looks right.

      Parameters

      Returns ReactNode

    • If provided, this is called after filtering to sort visible items at each level of the tree.

      Note: when sort or sortComparer is used in DataTable or DataTableCore, they stop being used to sort if the user sorts by clicking a column header, or if the DataTableCoreProps.columnsToSortBy prop is provided. However, these props still control the default sort order. When a table has a default sort order, the user can click the same column header three times to cancel user-defined sorting and return to the default sort order.

      Parameters

      Returns void

    • This prop is ignored if sort is provided. Otherwise, if provided, this is used after filtering to sort only the visible items.

      Note: rows are sorted level-by-level. For example, given this tree of items:

      Clothes Shirt Pants Shorts Toys Dolls Cars

      The three sublists [Clothes, Toys], [Shirt, Pants, Shorts], and [Dolls, Cars] are sorted separately, as one would expect.

      Parameters

      Returns number

    Settings
    Member Visibility

    On This Page
    Properties
    Methods