energylink/public/app/panels/table/options.html

<div class="editor-row">
	<div class="section">
		<h5>Data</h5>
		<div class="tight-form-container">
			<div class="tight-form">
				<ul class="tight-form-list">
					<li class="tight-form-item" style="width: 170px">
						To Table Transform
					</li>
					<li>
						<select class="input-xlarge tight-form-input"
							ng-model="panel.transform"
							ng-options="k as v.description for (k, v) in transformers"
							ng-change="render()"></select>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>

	<div class="section">
		<h5>Table Display</h5>
		<div class="tight-form-container">
			<div class="tight-form">
				<ul class="tight-form-list">
					<li class="tight-form-item">
						Pagination (Page size)
					</li>
					<li>
						<input type="text" class="input-small tight-form-input" placeholder="50"
						empty-to-null ng-model="panel.pageSize" ng-change="render()" ng-model-onblur>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
</div>

<div class="editor-row" style="margin-top: 20px">
	<h5>Column Styles</h5>

	<div class="tight-form-container" ng-repeat="column in panel.columns">
		<div class="tight-form">
			<ul class="tight-form-list">
				<li class="tight-form-item">
					<i class="fa fa-remove pointer" ng-click="removeColumnStyle(column)"></i>
				</li>

				<li class="tight-form-item">
					Name or regex
				</li>

				<li>
					<input type="text" ng-model="column.pattern" bs-typeahead="getColumnNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input">
				</li>

				<li class="tight-form-item">
					Unit
				</li>
				<li class="dropdown"
					ng-model="column.unit"
					dropdown-typeahead="unitFormats"
					dropdown-typeahead-on-select="setUnitFormat(column, $subItem)">
				</li>
				<li class="tight-form-item">
					Decimals
				</li>
				<li style="width: 105px">
					<input type="number" class="input-mini tight-form-input" ng-model="column.decimals" ng-change="render()" ng-model-onblur>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>
		<div class="tight-form">
			<ul class="tight-form-list">
				<li class="tight-form-item">
					<i class="fa fa-remove pointer invisible"></i>
				</li>
				<li class="tight-form-item">
					Coloring
				</li>
				<li>
					<select class="input-small tight-form-input"
							ng-model="panel.transform"
							ng-options="k as v.text for (k, v) in colorModes"
							ng-change="render()"></select>
				</li>
				<li class="tight-form-item">
					Thresholds<tip>Comma seperated values</tip>
				</li>
				<li>
					<input type="text" class="input-small tight-form-input" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
				</li>
				<li class="tight-form-item">
					Colors
				</li>
				<li class="tight-form-item">
					<spectrum-picker ng-model="column.colors[0]" ng-change="render()" ></spectrum-picker>
					<spectrum-picker ng-model="column.colors[1]" ng-change="render()" ></spectrum-picker>
					<spectrum-picker ng-model="column.colors[2]" ng-change="render()" ></spectrum-picker>
				</li>
				<li class="tight-form-item last">
					<a class="pointer" ng-click="invertColorOrder()">invert order</a>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>

	</div>

	<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addSeriesOverride()">
		Add column display rule
	</button>
</div>