Anyway to remove icon from datatable when there is no results?

[toymachiner62]

Is there any way to remove the icon from the datatable where there are no results? I didn’t see any options for doing this.

[genyded]

Can you paste the html for your DataTable or fiddle a working example (here is a fiddle you can fork and modify)? The DOM elements are post-processing and of no real help.

[Hawkeye64]

@toymachiner62
You can always use slots to have more control.
Here’s an example:

      <q-table
        id="alerts"
        dense
        hide-bottom
        row-key="id"
        :color="mainColor"
        :data="alarms"
        :columns="columns"
        :pagination.sync="pagination"
      >
        <q-tr :id="props.row.id" slot="body" slot-scope="props" :props="props" @click.native.stop="rowClick(props.row)" @dblclick.native.stop="rowDoubleClick(props.row)" class="cursor-pointer" @mouseover.native="hoverMouseOver(props.row)" @mouseout.native="hoverMouseOut(props.row)" :style="selectedStyleObject(props.row)">
          <q-td key="downloaded" :props="props">
            <q-icon :name="getDownloadStatusIcon(props)" />
          </q-td>
          <q-td key="site" :props="props">
            {{ props.row.siteName }}
          </q-td>
          <q-td key="source" :props="props">
            {{ props.row.source }}
          </q-td>
          <q-td key="dateTimeLocal" :props="props">
            {{ getLocalTime(props.row.occurredAt, props.row.tzOffset) }}
          </q-td>
          <q-td key="dateTimeSite" :props="props">
            {{ getSiteTime(props.row.occurredAt, props.row.tzOffset) }}
          </q-td>
          <q-td key="message" :props="props">
            {{ props.row.message }}
          </q-td>
          <q-td v-if="isClassificationEnabled" key="classification" :props="props">
            <q-icon v-if="props.row.classificationState === 'QUEUED'" name='fas fa-spinner fa-spin' />
            <q-icon v-else-if="props.row.classificationState === 'PROCESSING'" name='fas fa-sync-alt fa-spin' />
            <q-icon v-else-if="props.row.classificationState === 'DISABLED'" name='fas fa-ban' />
            <div v-else>
              {{ getDetectedObject(props.row) }}
            </div>
          </q-td>
          <q-td v-if="isClassificationEnabled" key="score" :props="props">
            {{ getScore(props.row) }}
          </q-td>
          <q-td key="note" :props="props">
            {{ props.row.note }}
          </q-td>
          <q-td key="bookmark" :props="props">
            <q-icon v-if="!props.row.bookmark" name="far fa-star" color="grey-4" @click.native.stop="onBookmark(props.row)"/>
            <q-icon v-else name="far fa-star" :color="mainColor" @click.native.stop="onBookmark(props.row)"/>
          </q-td>
          <q-td key="acknowledgement" :props="props">
            <q-icon v-if="!props.row.ackWho" name="fas fa-ellipsis-h" color="grey-4" @click.native.stop="onAckWho(props.row)"/>
            <q-icon v-else name="fas fa-bolt" :color="mainColor" @click.native.stop="onAckWho(props.row)"/>
          </q-td>
          <q-td key="actions" :props="props">
            <q-btn
              dense
              style="font-size: 10px;"
            >
              <q-icon name="menu" @click.native.stop="onActionsClicked(props.row)" />
            </q-btn>
          </q-td>
        </q-tr>
      </q-table>