---
title: Option Group Columns
nav_title: Option Group Columns
tags: demo
---


{% from "demo.njk" import demo %}




{% set label %}
<label class="h2 mb-3">
	Example
</label>
<p>
	The opgroup_columns plugin uses CSS flexbox layouts to display optgroups in columns and adds keyboard shortcuts for navigating between columnns with <kbd>&larr;</kbd> and <kbd>&rarr;</kbd> keys.
</p>
{% endset %}

{% set html %}
<input type="text" id="select-car" placeholder="Select cars...">
{% endset %}

<script>
{% set script %}
new TomSelect("#select-car",{
	options: [
		{id: 'avenger', make: 'dodge', model: 'Avenger'},
		{id: 'caliber', make: 'dodge', model: 'Caliber'},
		{id: 'caravan-grand-passenger', make: 'dodge', model: 'Caravan Grand Passenger'},
		{id: 'challenger', make: 'dodge', model: 'Challenger'},
		{id: 'ram-1500', make: 'dodge', model: 'Ram 1500'},
		{id: 'viper', make: 'dodge', model: 'Viper'},
		{id: 'a3', make: 'audi', model: 'A3'},
		{id: 'a6', make: 'audi', model: 'A6'},
		{id: 'r8', make: 'audi', model: 'R8'},
		{id: 'rs-4', make: 'audi', model: 'RS 4'},
		{id: 's4', make: 'audi', model: 'S4'},
		{id: 's8', make: 'audi', model: 'S8'},
		{id: 'tt', make: 'audi', model: 'TT'},
		{id: 'avalanche', make: 'chevrolet', model: 'Avalanche'},
		{id: 'aveo', make: 'chevrolet', model: 'Aveo'},
		{id: 'cobalt', make: 'chevrolet', model: 'Cobalt'},
		{id: 'silverado', make: 'chevrolet', model: 'Silverado'},
		{id: 'suburban', make: 'chevrolet', model: 'Suburban'},
		{id: 'tahoe', make: 'chevrolet', model: 'Tahoe'},
		{id: 'trail-blazer', make: 'chevrolet', model: 'TrailBlazer'},
	],
	optgroups: [
		{$order: 3, id: 'dodge', name: 'Dodge'},
		{$order: 2, id: 'audi', name: 'Audi'},
		{$order: 1, id: 'chevrolet', name: 'Chevrolet'}
	],
	labelField: 'model',
	valueField: 'id',
	optgroupField: 'make',
	optgroupLabelField: 'name',
	optgroupValueField: 'id',
	lockOptgroupOrder: true,
	searchField: ['model'],
	plugins: ['optgroup_columns'],
	openOnFocus: false
});
{% endset %}
</script>

{{ demo( label, html, script) }}

<h2>Plugin Configuration</h2>
<p>No additional configuration settings for this plugin</p>