ractive-ez-table/lib/EzTableControls.html

Ractive Ez UI Table

<div class="ez-table-controls"
     on-dragover="@this.dragOverGroup(@event)"
     on-drop="@this.dropGroup(@event, null)">

    <div class="ribbon">

        <div class="groups">
			 {{#if groups.length }}
			 
				{{#each groups as group }}
					<div class="ez-table-group-control"
						 draggable="true"
						 on-dragstart="@this.dragStartGroup(@event, group)"
						 on-drop="@this.dropGroup(@event, group)"
						 on-click="@this.toggleSortDirection(group)">

						<span class="label">{{ group.label }}</span>
						<!-- todo: display asc/desc icon -->
						<button class="close" on-click="@this.removeGroup(group)"><span>Close</span></button>
					</div>
				{{/each}}
				
			{{else}}
			
				{{ ~/groupLabel }}
			
			{{/if}}
        </div>

        <div class="menu">
            <button on-click="@this.toggleDetails()">
                <span>Menu</span>
            </button>
        </div>

    </div>

    {{#if ~/showDetails }}

        <div class="details">
            
            <div class="columns">
                {{#each columns as column }}
                    <label class="column">
                        <span>{{ column.label }}</span>
                        <input type="checkbox" checked="{{ column.isVisible }}">
                    </label>
                {{/each}}
            </div>

        </div>

    {{/if}}

</div>