Transfer lists

The transfer list is two lists side by side — what is available and what is chosen — and the moves between them: people to a role, columns to a report, fields to an export. The chosen list is the value, in order.

Both lists filter as you type, across labels, second lines, groups and keywords, with accents and case ignored. Items move with the buttons, Enter, a double click or a drag, and the chosen list is put in order by dragging or with Alt and the arrow keys. Items can be locked once chosen, limits can be set, and your page can refuse any move. Only the rows in view are drawn, so a hundred thousand items open as quickly as ten.

People in a role

Who may approve payments over £10,000. Sixty people in five departments; type a name, a job title or a department to find them. The two directors are built in and cannot be taken out.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-transfer-list id="tl-role" label="Payment approvers" source-label="Everyone" target-label="Approvers" style="inline-size: 100%"></bmx-transfer-list>

<script>
  const transferList = document.getElementById('tl-role');
  transferList.items = [ /* your items */ ];
</script>

Report columns, in order

Two to eight columns, in the order the report shows them. Drag within In the report, or select a column and press Alt with the up or down arrow. The invoice number is always first, and Tax cannot be used in this report.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-transfer-list id="tl-columns" label="Report columns" source-label="Available columns" target-label="In the report" min="2" max="8" style="inline-size: 100%"></bmx-transfer-list>

<script>
  const transferList = document.getElementById('tl-columns');
  transferList.items = [ /* your items */ ];
</script>

Your page has the last word

Assigning five design-tool licences. Every move is asked about first: the page refuses a sixth seat, and refuses contractors, whose licences come from their own firm. The reason appears below.

5 seats, none used.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-transfer-list id="tl-seats" label="Licence holders" source-label="Design team" target-label="Licensed" style="inline-size: 100%"></bmx-transfer-list>

<script>
  const transferList = document.getElementById('tl-seats');
  transferList.items = [ /* your items */ ];
</script>

A hundred thousand products

A catalogue of a hundred thousand products made up by the page, for a promotion. Filter for walnut or sku 4207, choose with Shift for a range or Ctrl+A for all that are shown, and move them. Only the rows in view are drawn.

Load a hundred thousand products

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-transfer-list id="tl-large" label="Products in the promotion" source-label="Catalogue" target-label="In the promotion" grouped="false" style="inline-size: 100%"></bmx-transfer-list>

<script>
  const transferList = document.getElementById('tl-large');
  transferList.items = [ /* your items */ ];
</script>

In a form

A required field with a name: the form receives one entry for each chosen value, in order, and Reset puts the lists back.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-transfer-list name="fields" label="Fields to export" required min="1" source-label="Fields" target-label="Export" style="inline-size: 100%"></bmx-transfer-list>