Hakumi :: Rails ViewComponents

Basic

Move items between two panels.

Available

Item One First item
Item Two Second item
Item Four Fourth item

Chosen

Item Three Third item

Code

<%= render Hakumi::Transfer::Component.new(
  data_source: [
    { key: "one", title: "Item One", description: "First item" },
    { key: "two", title: "Item Two", description: "Second item" },
    { key: "three", title: "Item Three", description: "Third item" },
    { key: "four", title: "Item Four", description: "Fourth item" }
  ],
  target_keys: [ "three" ],
  titles: [ "Available", "Chosen" ]
) %>

Enable search to filter each list.

Cities

Chicago
Denver
Seattle

Selected

Miami

Code

<%= render Hakumi::Transfer::Component.new(
  data_source: [
    { key: "chicago", title: "Chicago" },
    { key: "denver", title: "Denver" },
    { key: "miami", title: "Miami" },
    { key: "seattle", title: "Seattle" }
  ],
  target_keys: [ "miami" ],
  titles: [ "Cities", "Selected" ],
  show_search: true
) %>

One Way

Disable moving items back to the source list.

Pipeline

Draft
In Review
Published

Selected

Approved

Code

<%= render Hakumi::Transfer::Component.new(
  data_source: [
    { key: "draft", title: "Draft" },
    { key: "review", title: "In Review" },
    { key: "approved", title: "Approved" },
    { key: "published", title: "Published" }
  ],
  target_keys: [ "approved" ],
  titles: [ "Pipeline", "Selected" ],
  one_way: true
) %>

Disabled Items

Individual items can be disabled to prevent selection.

Available

Active Item
Inactive Item
Archived Item

Selected

Pending Item

Code

<%= render Hakumi::Transfer::Component.new(
  data_source: [
    { key: "active", title: "Active Item" },
    { key: "inactive", title: "Inactive Item", disabled: true },
    { key: "pending", title: "Pending Item" },
    { key: "archived", title: "Archived Item", disabled: true }
  ],
  target_keys: [ "pending" ],
  titles: [ "Available", "Selected" ]
) %>

Custom Render

Use render_item to customize how items are displayed.

Languages

Python (PYTHON)
JavaScript (JAVASCRIPT)
Go (GO)

Selected

Ruby (RUBY)

Code

<%= render Hakumi::Transfer::Component.new(
  data_source: [
    { key: "ruby", title: "Ruby", description: "Dynamic language" },
    { key: "python", title: "Python", description: "General purpose" },
    { key: "javascript", title: "JavaScript", description: "Web scripting" },
    { key: "go", title: "Go", description: "Systems language" }
  ],
  target_keys: [ "ruby" ],
  titles: [ "Languages", "Selected" ],
  render_item: ->(item) { "#{item[:title]} (#{item[:key].upcase})" }
) %>

Custom Icons

Customize the transfer button icons with the operations prop.

Backlog

Write tests
Code review
Deploy to staging

Done

Design mockups

Code

<%= render Hakumi::Transfer::Component.new(
  data_source: [
    { key: "task1", title: "Design mockups" },
    { key: "task2", title: "Write tests" },
    { key: "task3", title: "Code review" },
    { key: "task4", title: "Deploy to staging" }
  ],
  target_keys: [ "task1" ],
  titles: [ "Backlog", "Done" ],
  operations: { to_target: :double_right, to_source: :double_left }
) %>

Transfer API

Prop	Type	Default	Description
`data_source`	`Array[Hash]`	`[]`	List of items with keys: key:, title:, description:, disabled:, class_name:.
`target_keys`	`Array[String]`	`[]`	Keys that start in the target list.
`titles`	`Array[String]`	`["Source", "Target"]`	Panel titles for source and target.
`disabled`	`Boolean`	`false`	Disable all interactions.
`show_search`	`Boolean`	`false`	Show search inputs for each panel.
`show_select_all`	`Boolean`	`true`	Show select-all checkbox in headers.
`one_way`	`Boolean`	`false`	Disable moving items back to the source list.
`pagination`	`Boolean \| Hash`	`false`	Enable pagination controls (UI placeholder).
`name`	`String`	`auto`	Base name for input controls.
`render_item`	`Proc`	`-`	Custom renderer for list items.
`operations`	`Hash`	`{ to_target: :right, to_source: :left }`	Customize transfer button icons. Keys: to_target, to_source.
`search_placeholder`	`String`	`"Search"`	Placeholder text for search inputs. Pass I18n.t(...) for localization.

Transfer JavaScript API (element.hakumiComponent.api)

Prop	Type	Default	Description
`getTargetKeys()`	`Function`	`-`	Return the keys currently in the target list.
`setTargetKeys(keys)`	`Function`	`-`	Move items so the provided keys are in the target list.
`getSelectedKeys()`	`Function`	`-`	Return selected keys from source and target lists.
`setSelectedKeys(keys)`	`Function`	`-`	Set selected keys in source/target lists.
`moveToTarget()`	`Function`	`-`	Move selected source items to the target list.
`moveToSource()`	`Function`	`-`	Move selected target items back to the source list.
`selectAll()`	`Function`	`-`	Select all items in both lists.
`unselectAll()`	`Function`	`-`	Clear all selections.
`isDisabled()`	`Function`	`-`	Return whether the component is disabled.