//
A drag-and-drop sortable list and grid container with touch and keyboard accessibility.
bun add xiod-ui1import {2 Sortable,3 SortableColumn,4 SortableColumnHeader,5 SortableColumnTitle,6 SortableItem,7 SortableItemHandle,8 SortableItemRemove9} from "xiod-ui/sortable";1<Sortable>2 <SortableColumnHeader />3 <SortableColumnTitle />4 <SortableItem />5 <SortableColumn />6 <SortableItemHandle />7 <SortableItemRemove />8</Sortable>| Prop | Type | Default | Description |
|---|---|---|---|
itemsReq | string[] | - | |
onReorderReq | (newItems: string[]) => void | - | |
onRemove | ((id: string) => void)| undefined | - | |
orientation | SortableOrientation| undefined | vertical | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
variant | "default"| "ghost"| "bordered"| null| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
idReq | string | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
idReq | string | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
variant | "default"| "flat"| "accent"| null| undefined | default | |
isDragging | boolean| null| undefined | - | |
isHoveredTarget | boolean| null| undefined | - | |
isKeyboardActive | boolean| null| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
idReq | string | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |