Items

Premium

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.

Change Theme

Theme

Loading ...

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:

• attributes
• forwardRef
• style

jsx

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.

jsx

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

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

Suggested Links

• API Reference of the Sortable