cosmos-explorer/src/Explorer/Tabs/QueryTablesTab.html

<div class="tab-pane tableContainer" data-bind="attr:{id: tabId}" role="tabpanel">
  <!-- Tables Query Tab Query Builder - Start-->
  <div
    class="query-builder"
    data-bind="with: queryViewModel, attr: {
                                                id: queryViewModel.id
                                            }"
  >
    <!-- Tables Query Tab Errors - Start-->
    <div class="error-bar">
      <div class="error-message" aria-label="Error Message" data-bind="visible: hasQueryError">
        <span><img class="entity-error-Img" src="../../../images/error_red.svg" /></span>
        <span class="error-text" role="alert" data-bind="text: queryErrorMessage"></span>
      </div>
    </div>
    <!-- Tables Query Tab Errors - End-->
    <!-- Tables Query Tab Query Text - Start-->
    <div class="query-editor-panel" data-bind="visible: isEditorActive">
      <div>
        <textarea
          class="query-editor-text"
          data-bind="textInput: queryText,
                css: { 'query-editor-text-invalid': hasQueryError },
                readOnly: true"
          name="query-editor"
          rows="5"
          cols="100"
          aria-label="Query text editor"
        ></textarea>
      </div>
    </div>
    <!-- Tables Query Tab Query Text - End-->
    <!-- Tables Query Tab Query Helper - Start-->
    <div data-bind="visible: isHelperActive" style="padding-left: 13px">
      <div class="clause-table" data-bind="with: queryBuilderViewModel ">
        <div class="scroll-box scrollable" id="scroll">
          <table class="clause-table">
            <thead>
              <tr class="clause-table-row">
                <th class="clause-table-cell header-background action-header">
                  <span data-bind="text: actionLabel"></span>
                </th>
                <th class="clause-table-cell header-background group-control-header">
                  <button
                    type="button"
                    data-bind="enable: canGroupClauses, attr:{title: groupSelectedClauses}, click: groupClauses"
                  >
                    <img class="and-or-svg" src="../../../images/And-Or.svg" alt="Group selected clauses" />
                  </button>
                </th>
                <th class="clause-table-cell header-background">
                  <!-- Grouping indicator -->
                </th>
                <th class="clause-table-cell header-background and-or-header">
                  <span data-bind="text: andLabel"></span>
                </th>
                <th class="clause-table-cell header-background field-header">
                  <span data-bind="text: fieldLabel"></span>
                </th>
                <th class="clause-table-cell header-background type-header">
                  <span data-bind="text: dataTypeLabel"></span>
                </th>
                <th class="clause-table-cell header-background operator-header">
                  <span data-bind="text: operatorLabel"></span>
                </th>
                <th class="clause-table-cell header-background value-header">
                  <span data-bind="text: valueLabel"></span>
                </th>
              </tr>
            </thead>
            <tbody data-bind="template: { name: 'queryClause-template', foreach: clauseArray, as: 'clause' }"></tbody>
          </table>
        </div>
        <button
          data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }"
          style="border: none; background: none"
        >
          <div class="addClause" data-bind=" ">
            <div class="addClause-heading">
              <span class="clause-table addClause-title">
                <img
                  class="addclauseProperty-Img"
                  style="margin-bottom: 5px"
                  src="../../../images/Add-property.svg"
                  alt="Add new Clause"
                />
                <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
              </span>
            </div>
          </div>
        </button>
      </div>
    </div>
    <!-- Tables Query Tab Query Helper - End-->
    <!-- Tables Query Tab Advanced Options - Start-->
    <div class="advanced-options-panel">
      <div class="advanced-heading">
        <span
          class="advanced-title"
          role="button"
          data-bind="click:toggleAdvancedOptions, event: { keydown: ontoggleAdvancedOptionsKeyDown }, attr:{ 'aria-expanded': isExpanded() ? 'true' : 'false' }"
          tabindex="0"
        >
          <!-- ko template: { ifnot: isExpanded} -->
          <div class="themed-images" type="text/html" id="ExpandChevronRight" data-bind="hasFocus: focusExpandIcon">
            <img
              class="imgiconwidth expand-triangle expand-triangle-right"
              src="../../../images/Triangle-right.svg"
              alt="toggle"
            />
          </div>
          <!-- /ko -->
          <!-- ko template: { if: isExpanded} -->
          <div class="themed-images" type="text/html" id="ExpandChevronDown">
            <img class="imgiconwidth expand-triangle" src="../../../images/Triangle-down.svg" alt="toggle" />
          </div>
          <!-- /ko -->
          <span>Advanced Options</span>
        </span>
      </div>
      <div class="advanced-options" data-bind="visible: isExpanded">
        <div class="top">
          <span>Show top results:</span>
          <input
            class="top-input"
            type="number"
            data-bind="hasFocus: focusTopResult, textInput: topValue, attr: { title: topValueLimitMessage }"
            role="textbox"
            aria-label="Show top results"
          />
          <div role="alert" aria-atomic="true" class="inline-div" data-bind="visible: isExceedingLimit">
            <img
              class="advanced-options-icon"
              src="../../../images/QueryBuilder/StatusWarning_16x.png"
              alt="Warning"
              role="presentation"
            />
            <span data-bind="text: topValueLimitMessage"></span>
          </div>
        </div>
        <div class="select">
          <span> Select fields for query: </span>
          <div data-bind="visible: isSelected">
            <img class="advanced-options-icon" src="../../../images/QueryBuilder/QueryInformation_16x.png" />
            <span class="select-options-text" data-bind="text: selectMessage" />
          </div>
          <a
            class="select-options-link"
            data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
            tabindex="0"
            role="button"
            href=""
          >
            <span>Choose Columns... </span>
          </a>
        </div>
      </div>
    </div>
    <!-- Tables Query Tab Advanced Options - End-->
  </div>
  <!-- Tables Query Tab Query Builder - End-->
  <div
    class="tablesQueryTab tableContainer"
    data-bind="with: tableEntityListViewModel, attr: {
                                                id: tableEntityListViewModel.id
                                            }"
  >
    <!-- Keyboard navigation - tabindex is required to make the table focusable. -->
    <table
      id="storageTable"
      class="storage azure-table show-gridlines"
      tabindex="0"
      data-bind="tableSource: items, tableSelection: selected"
    ></table>
  </div>
</div>

<!-- Script for each clause in the tables query builder -->
<script type="text/html" id="queryClause-template">
  <tr class="clause-table-row">
    <td class="clause-table-cell action-column">
      <button
        data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}"
      >
        <span class="entity-Add-Cancel" role="button">
          <img class="querybuilder-addpropertyImg" src="../../../images/Add-property.svg" alt="Add clause" />
        </span>
      </button>
      <button
        data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}"
      >
        <span class="entity-Add-Cancel" role="button">
          <img class="querybuilder-cancelImg" src="../../../images/Entity_cancel.svg" alt="Delete clause" />
        </span>
      </button>
    </td>
    <td class="clause-table-cell group-control-column">
      <input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping" />
    </td>
    <td>
      <table class="group-indicator-table">
        <tbody>
          <tr
            data-bind="template: { name: 'groupIndicator-template', foreach: $parent.getClauseGroupViewModels($data), as: 'gi' }"
          ></tr>
        </tbody>
      </table>
    </td>
    <td class="clause-table-cell and-or-column">
      <select
        class="clause-table-field and-or-column"
        data-bind="hasFocus: isAndOrFocused, options: $parent.clauseRules, value: and_or, visible: canAnd, attr:{ 'aria-label': and_or }"
      ></select>
    </td>
    <td class="clause-table-cell field-column" data-bind="click: $parent.updateColumnOptions">
      <select
        class="clause-table-field field-column"
        data-bind="options: $parent.columnOptions, value: field, attr:{ 'aria-label': field }"
      ></select>
    </td>
    <td class="clause-table-cell type-column">
      <select
        class="clause-table-field type-column"
        data-bind="
                  options: $parent.edmTypes,
                  enable: isTypeEditable,
                  value: type,
                  css: {'query-builder-isDisabled': !isTypeEditable()},
                  attr: { 'aria-label': type }"
      ></select>
    </td>
    <td class="clause-table-cell operator-column">
      <select
        class="clause-table-field operator-column"
        data-bind="
                  options: $parent.operators,
                  enable: isOperaterEditable,
                  value: operator,
                  css: {'query-builder-isDisabled': !isOperaterEditable()},
                  attr: { 'aria-label': operator }"
      ></select>
    </td>
    <td class="clause-table-cell value-column">
      <!-- ko template: {if: isValue} -->
      <input
        type="text"
        class="clause-table-field value-column"
        type="search"
        data-bind="textInput: value, attr: {'aria-label': $parent.valueLabel}"
      />
      <!-- /ko -->

      <!-- ko template: {if: isTimestamp} -->
      <select
        class="clause-table-field time-column"
        data-bind="options: $parent.timeOptions, value: timeValue"
      ></select>
      <!-- /ko -->

      <!-- ko template: {if: isCustomLastTimestamp} -->
      <input class="clause-table-field time-column" data-bind="value: customTimeValue, click: customTimestampDialog" />
      <!-- /ko -->
      <!-- ko template: {if: isCustomRangeTimestamp} -->
      <input class="clause-table-field time-column" type="datetime-local" step="1" data-bind="value: customTimeValue" />
      <!-- /ko -->
    </td>
  </tr>
</script>

<!-- Script for each clause group in the tables query builder -->
<script type="text/html" id="groupIndicator-template">
  <td
    class="group-indicator-column"
    data-bind="style: {backgroundColor: gi.backgroundColor, borderTop: gi.showTopBorder.peek() ? 'solid thin #CCCCCC' : 'none', borderLeft: gi.showLeftBorder.peek() ? 'solid thin #CCCCCC' : 'none', borderBottom: gi.showBottomBorder.peek() ? 'solid thin #CCCCCC' : gi.borderBackgroundColor}"
  >
    <!-- ko template: {if: gi.canUngroup} -->
    <button type="button" data-bind="click: ungroupClauses, attr: {title: ungroupClausesLabel}">
      <img src="../../../images/QueryBuilder/UngroupClause_16x.png" alt="Ungroup clauses" />
    </button>
    <!-- /ko -->
  </td>
</script>