开发者

Is there a way to make a row expand on clicking the row itself rather than the arrow icon in vue primevue datatable

I currently have a datatable in vue with rows and columns. I am trying to make the row itself clickable instead of the toggle arrow on the left side of the table. But I am unable to find a proper solution so far. Could you please help me out with it??

I have posted my code below

template>
  <div>
    <PV-DataTable
      :value="solutions"
      sortMode="multiple"
      stripedRows
      selectionMode="single"
      responsiveLayout="scroll"
      v-model:expandedRows="expandedRows" 
      >
      <template #empty> No solutions found </template开发者_Go百科>
      <PV-Column :expander="true" headerStyle="width: 3rem" />
      <PV-ColumnGroup type="header">
        <PV-Row>
          <PV-Column header="&nbsp;" :rowspan="2" />
          <PV-Column header="Solver" :rowspan="2" sortable />
          <PV-Column header="Runtime" :colspan="3" sortable />
        </PV-Row>
        <PV-Row>
          <PV-Column header="Total" :sortable="true" field="runtimeTotal" />
          <PV-Column
            header="Overhead"
            :sortable="true"
            field="runtimeOverhead"
          />
          <PV-Column header="QPU" :sortable="true" field="runtimeQPU" />
        </PV-Row>
      </PV-ColumnGroup>     
      <PV-Column field="solution.solver" />
      <PV-Column field="solution.runtime.total" />
      <PV-Column field="solution.runtime.overhead" />
      <PV-Column field="solution.runtime.qpu" />

      <template #expansion="slotProps" >
        <div class="solutions-subtable " >
          <PV-DataTable
            :value="getSampleWithEnergy(slotProps.data.solution)"
            responsiveLayout="scroll"
            selectionMode="single"
            v-model:selection="selectedSample"
            @rowSelect="onRowSelect"
          >
            <PV-ColumnGroup type="header" >
              <PV-Row>
                <PV-Column header="Sample" :rowspan="2"/>
                <PV-Column header="Energy" :rowspan="2" />
              </PV-Row>
            </PV-ColumnGroup>
            <PV-Column field="sample"  />
            <PV-Column field="energy" />
          </PV-DataTable>
        </div>
      </template>
    </PV-DataTable>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import axios from "@/api";
import type { Solution } from "@/types";

export default defineComponent({
  props: {
    optId: {
      type: String,
      default: "" as string,
    },
  },
  data() {
    return {
      solutions: null,
      expandedRows: [],
      selectedSample: null,
   
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      await axios
        .get(`/api/optimizations/${this.optId}/solutions`)
        .then((res: { data: any; }) => {
          this.solutions = res.data;
        })
        .catch((e: { message: any; }) => {
          console.error(e);
          const content = {
            severity: "error",
            summary: "Solutions could not be loaded.",
            detail: e.message,
            life: 3000,
          };
          this.$emitter.emit("show-toast", content);
        });
    },
    getSampleWithEnergy(solutionData: Solution) {
      const samples = [];
      for (let i = 0; i < solutionData.samples.length; i++) {
        const sampleWithNums = solutionData.samples[i].map(function (
          element: boolean
        ) {
          return Number(element);
        });
        samples.push({
          sample: sampleWithNums,
          energy: solutionData.energies[i],
        });
      }
      return samples;
    },
    onRowSelect(event: any) {
      this.$toast.add({
        severity: "info",
        summary: "Sample Selected",
        detail:
          "Selected sample " +
          event.data.sample +
          ". Check Solutions Tab for more details.",
        life: 3000,
      });
      this.$emit("sampleSelected", this.selectedSample);
    },
  },
});
</script>



type here

I have tried going through the primevue datatable documentation but so far no use.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜