How to set default expand in a q-table?

Question

I copied the code from "expanded rows" "Treats". https://quasar.dev/vue-components/table

Is there a way to set the first row as default expand?

Answer 1

There are two ways to do that.

You can pass expanded prop in q-table or can use v-model:expanded="expandedRows" if want to sync expanded rows.

<q-table
    ref="mytable"
    :expanded="expandedRows"
    ...
>
</q-table>

and define expandedRows ref with key of first row in setup.

const expandedRows = ref(["key-of-first-row"]);

and second way is with setExpanded method.

  const mytable = ref(null);

  onMounted(function () {
    mytable.value.setExpanded(["key-of-first-row"])
  })

Note:- When you ask any question in any forums, always put the code you have tried.