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
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>);
};