<div viewModel="@id('vm')@init('pkg$.ListboxSortVm')">

        <button label="update model" onClick="@command('updateModel')" />

        <listbox id="box" width="100%" model="@init(vm.model)" onHeadSort="@command('sortModel', asc=event.getOrigin().getAscending(), data=event.getData())">

            <listhead>

                <listheader label="Author" sort="auto(str1)" forward="onSort=box.onHeadSort(str1)" />

                <listheader label="Title" sort="auto(str2) forward="onSort=box.onHeadSort(str2)" />

                <listheader label="Publisher" sort="auto(str3) forward="onSort=box.onHeadSort(str3)" />

                <listheader label="Hardcover" sort="auto(str4) forward="onSort=box.onHeadSort(str4)" />

            </listhead>

            <template name="model">

                <listitem>

                    <listcell label="${each.str1}" />

                    <listcell label="${each.str2}" />

                    <listcell label="${each.str3}" />

                    <listcell label="${each.str4}" />

                </listitem>

            </template>

        </listbox>

    </div>

</zk>