Selecting on a single CheckBox in Table selects all rows.



  • I am new to JS and Quasar so please pardon my ignorance.

    We can clearly see here that only 1 item is selected but visually all boxes are checked.
    940045c1-a281-4b15-a25d-eb9dbe883c23-image.png

    initially, I was thinking maybe row-key="name" is incorrect? but I have no idea how to test if this is correct or not.

    Below is the entire Page for the table.

    <template>
      <div>
        <q-table
          ref="mainTable"
          class="my-sticky-virtscroll-table"
          style="height: 800px"
          :data="data"
          :columns="columns"
          row-key="name"
          :selected-rows-label="getSelectedString"
          selection="multiple"
          :selected.sync="selected"
          virtual-scroll
          :pagination.sync="pagination"
          :virtual-scroll-sticky-size-start="48"
          :rows-per-page-options="[0]"
          :filter="filter"
          flat
          bordered=""
          @focusin.native="activateNavigation"
          @focusout.native="deactivateNavigation"
          @keydown.native="onKey"
        >
          <template v-slot:top-left>
            <q-input
              ref="mainSearchInput"
              debounce="0"
              v-model="filter"
              label="Búsqueda"
              filled
              bottom-slots
              clearable=""
              style="width:500px"
            >
              <template v-slot:hint
                >Puede hacer búsquedas online con commandos.</template
              >
            </q-input>
          </template>
    
          <template v-slot:body-cell-qty="props">
            <q-td :props="props">
              <q-badge
                :class="'(props.value < 1000) ? bg-red : bg-green'"
                :label="props.value"
              />
            </q-td>
          </template>
    
          <template v-slot:body-cell-code="props">
            <q-td :props="props">
              <q-badge
                :class="'!props.value ? bg-orange : bg-red'"
                :label="props.value"
              />
            </q-td>
          </template>
        </q-table>
        <div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div>
        <br />
      </div>
    </template>
    
    <script>
    import path from "path";
    import { remote } from "electron";
    
    export default {
      data() {
        return {
          navigationActive: false,
          filter: "",
          selected: [],
          pagination: {
            rowsPerPage: 0
          },
          columns: [
            {
              name: "code",
              required: true,
              label: "Código",
              align: "left",
              // field: row => row.name,
              field: "CODIGO",
              format: val => `${val}`,
              sortable: true
            },
            {
              name: "description",
              align: "left",
              label: "Descipción",
              field: "DESCRIPCION",
              sortable: true
            },
            { name: "qty", label: "Qty", field: "INVENT", align: "right" },
            { name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },
            {
              name: "desAlt",
              label: "Desc Alt",
              field: "DESC.ALT.",
              align: "left"
            },
            {
              name: "groups",
              label: "Grupo",
              field: "GRUPO",
              align: "left"
            },
            { name: "price", label: "Precio", field: "PRECIO", align: "right" },
            {
              name: "discount20",
              label: "20 %",
              field: "PRECIO",
              align: "right",
              sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
            }
          ],
          data: []
        };
      },
    
      methods: {
        getSelectedString() {
          return this.selected.length === 0
            ? ""
            : `${this.selected.length} record${
                this.selected.length > 1 ? "s" : ""
              } selected of ${this.data.length}`;
        },
    
        activateNavigation() {
          this.navigationActive = true;
        },
    
        deactivateNavigation() {
          this.navigationActive = false;
        },
    
        onKey(evt) {
          if (
            this.navigationActive !== true ||
            [33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||
            this.$refs.mainTable === void 0
          ) {
            return;
          }
    
          evt.preventDefault();
    
          switch (evt.keyCode) {
            case 36: // Home
              page = 1;
              index = 0;
              break;
            case 35: // End
              page = lastPage;
              index = rowsPerPage - 1;
              break;
            case 33: // PageUp
              page = currentPage <= 1 ? lastPage : currentPage - 1;
              if (index < 0) {
                index = 0;
              }
              break;
            case 34: // PageDown
              page = currentPage >= lastPage ? 1 : currentPage + 1;
              if (index < 0) {
                index = rowsPerPage - 1;
              }
              break;
            case 38: // ArrowUp
              if (currentIndex <= 0) {
                page = currentPage <= 1 ? lastPage : currentPage - 1;
                index = rowsPerPage - 1;
              } else {
                index = currentIndex - 1;
              }
              break;
            case 40: // ArrowDown
              if (currentIndex >= lastIndex) {
                page = currentPage >= lastPage ? 1 : currentPage + 1;
                index = 0;
              } else {
                index = currentIndex + 1;
              }
              break;
          }
    
          if (page !== this.pagination.page) {
            this.pagination = {
              ...this.pagination,
              page
            };
    
            this.$nextTick(() => {
              const { computedRows } = this.$refs.mainTable;
              this.selected = [
                computedRows[Math.min(index, computedRows.length - 1)]
              ];
            });
          } else {
            this.selected = [computedRows[index]];
          }
        }
      },
    
      mounted() {
        // get file path
        const filePath = path.join(
          remote.app.getPath("home"),
          "/Dropbox/Sync/inventarioHL.json"
        );
    
        // load the File System to execute our common tasks (CRUD)
        var fs = require("fs");
    
        // read file content
        const fsData = fs.readFileSync(filePath, "utf-8");
    
        // parse text into json
        var jsonData = JSON.parse(fsData);
    
        // add entire data to table
        this.data = jsonData;
    
        // for (const x in jsonData) {
        //   console.log(x);
        // }
    
        console.log(jsonData[0]);
    
        // focus on q-input
        this.$refs.mainSearchInput.$el.focus();
      }
    };
    </script>
    
    <style lang="sass">
    .my-sticky-virtscroll-table
      /* height or max-height is important */
      height: 310px
    
      /* specifying max-width so the example can
        highlight the sticky column on any browser window */
      max-width: 1300px
    
      td:first-child
        /* bg color is important for td; just specify one */
        background-color: #fafafa !important
    
      tr th
        position: sticky
        /* higher than z-index for td below */
        z-index: 2
        /* bg color is important; just specify one */
        background: #fafafa
    
      /* this will be the loading indicator */
      thead tr:last-child th
        /* height of all previous header rows */
        top: 48px
        /* highest z-index */
        z-index: 3
      thead tr:first-child th
        top: 0
        z-index: 1
      tr:first-child th:first-child
        /* highest z-index */
        z-index: 3
    
      td:first-child
        z-index: 1
    
      td:first-child, th:first-child
        position: sticky
        left: 0
    </style>
    


  • @fenchai said in Selecting on a single CheckBox in Table selects all rows.:

    initially, I was thinking maybe row-key=“name” is incorrect? but I have no idea how to test if this is correct or not.

    You’re right. It’s incorrect 🙂
    It seems that you don’t have a name field in your data. Try with row-key="codigo"



  • Thank you again lol. You solved 2 of my posts already 🙂 @tof06
    unfortunately I don’t know how to change post as solved and site is not allowing me to edit post title either.



  • @fenchai go on your first post, click the options to your right, you can edit the title (prefixing [Solved] if it is), delete the topic etc… please avoid making similar threads next time. thx.


Log in to reply