Items

You can disable and provide an item or an empty item component when you render the items of the Sortable component.

Disabling Items

To disable the items of the Sortable, define its disabledField property.

Example
View Source
Edit In Stackblitz  
Change Theme:

Using the Item Component

The component that you pass to itemUI receives SortableItemUIProps as its properties. When you implement the item component, pass the following props to the first element child:

const SortableItemUI = (props) => {
    const { style, attributes, forwardRef, dataItem } = props;

    return (
        <div
            {...attributes}
            ref={forwardRef}
            style={{
                ...style
            }}
        >
            {dataItem.text}
        </div>
    );
};

Using the Empty Item Component

The component that you pass to emptyItemUI receives SortableEmptyItemUIProps as its properties. The empty item component will be rendered when the data of the Sortable is empty.

const SortableEmptyItemUI = (props: SortableEmptyItemUIProps) => {
    const { message } = props;

    return (<div>{message}</div>);
};