<div class="gf-form-group">
  <h5 class="section-heading">Data</h5>
  <div class="gf-form gf-form--grow">
    <label class="gf-form-label width-8">Table Transform</label>
    <div class="gf-form-select-wrapper">
      <select
        class="gf-form-input"
        ng-model="editor.panel.transform"
        ng-options="k as v.description for (k, v) in editor.transformers"
        ng-change="editor.transformChanged()"
      ></select>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label width-8">Columns</label>
    </div>
    <div class="gf-form" ng-repeat="column in editor.panel.columns">
      <label class="gf-form-label">
        <icon name="'times'" ng-click="editor.removeColumn(column)"></icon>
        <span>{{ column.text }}</span>
      </label>
    </div>
    <div class="gf-form" ng-show="editor.canSetColumns">
      <metric-segment
        segment="editor.addColumnSegment"
        get-options="editor.getColumnOptions()"
        on-change="editor.addColumn()"
      ></metric-segment>
    </div>
    <div class="gf-form" ng-hide="editor.canSetColumns">
      <label class="gf-form-label">
        Auto
        <info-popover mode="right-normal" ng-if="editor.columnsHelpMessage">
          {{ editor.columnsHelpMessage }}
        </info-popover>
      </label>
    </div>
  </div>
</div>

<div class="gf-form-group">
  <h5 class="section-heading">Paging</h5>
  <div class="gf-form">
    <label class="gf-form-label width-8">Rows per page</label>
    <input
      type="number"
      class="gf-form-input width-7"
      placeholder="100"
      data-placement="right"
      ng-model="editor.panel.pageSize"
      ng-change="editor.render()"
      ng-model-onblur
    />
  </div>
  <div class="gf-form max-width-17">
    <label class="gf-form-label width-8">Font size</label>
    <div class="gf-form-select-wrapper width-7">
      <select
        class="gf-form-input"
        ng-model="editor.panel.fontSize"
        ng-options="f for f in editor.fontSizes"
        ng-change="editor.render()"
      ></select>
    </div>
  </div>
</div>
