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



  • 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.

    0_1536196035968_9a02af55-e647-4592-bf46-a95c28d1b433-image.png



  • 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.



  • @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>