svelte-pick-list
Svelte component to reorder items between different lists.
API
PickList (Default)
Svelte component comprised of two lists arranged using CSS List Layout with button controls.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| data | Array<Array.<{key: String, label: String, disabled: Boolean}>> | false | [[], []] | Nested arrays of data. Each nested array should include key, label and disabled properties. |
| selectedKeys | Array<Array |
false | [[], []] | Nested array of selected list keys |
| renderFormat | Function: String | false | (item) => item.label || item.key | Function for rendering item label |
| sortFn | Function: Array | false | (a, b) => a.key.localeCompare(b.key) | Function for sorting items in each list |
| titles | Array |
false | ["Available", "Selected"] | Array of titles/headings to render |
Events
| Name | Description |
|---|---|
| selectAll | Fired when select all is checked. |
| move | Fired when items are move to another list. |
| moveAll | Fired when all items are move to another list. |
Installation
npm install svelte-pick-list
Usage
<script>
import PickList from "svelte-pick-list";
let data = [
[
{ key: "1", label: "Content 1", disabled: false },
{ key: "2", label: "Content 2", disabled: true },
{ key: "3", label: "Content 3", disabled: false },
{ key: "4", label: "Content 4", disabled: false },
],
[
{ key: "5", label: "Content 5", disabled: false },
{ key: "6", label: "Content 6", disabled: true },
],
];
</script>
<PickList bind:data />
Todo
- Allow custom components for list items
- Allow custom components for controls
- Allow custom styles
- Allow custom list object data structure
- Allow custom animation
- Dispatch events
- Add search functionality
- Add re-order functionality
