CODEWITHSUNDEEP
csspositionvuejs3quasar-framework
Little Monkey
Little Monkey

Reputation: 6157

Set content position inside Quasar Table

I'm working with Vuejs 3 and Quasar. I'm using the Quasar table component, in which one of the column (Name) has a Quasar tree, that the user can expand: enter image description here

As you can see, when the tree is expanded, the content of the other columns goes in the middle of the row, but I would like them to stay on top (basically aligned to "Test 1"). Is there a way to do this?

This is my code so far:

     <q-table
      v-model:selected="selected"
      :rows="rows"
      :columns="columns"
      row-key="id"
      selection="multiple"
      virtual-scroll
      :rows-per-page-options="[0]"
      hide-bottom
  >
    <template #body="props">
      <q-tr
          v-ripple
          :props="props"
          style="position:relative;"
      >
        <q-td key="selected">
          <q-checkbox
              v-model="props.checkbox"
          />
        </q-td>

        <q-td
            :key="column1"
            :props="props"
        >
          <q-toggle
              v-model="props.switch"
              dense
          />
        </q-td>

        <q-td
            :key="column2"
            :props="props"
        >
          {{ props.row.column2Data }}
        </q-td>

        <q-td
            :key="column3"
            :props="props"
        >
          <div class="q-pa-md q-gutter-sm">
            <TreeObject :data="props.row.data"/>
          </div>
        </q-td>

        <q-td
            :key="column4"
            :props="props"
        >
          Test
        </q-td>
      </q-tr>
    </template>
  </q-table>

Upvotes: 1

Views: 3231

Answers (1)

Marco
Marco

Reputation: 268

Maybe you can use flexbox align the content of each column vertically to top. So display: flex; justity-content: flex-start; flex-direction: column;

I didnt tried it out, but I would do it like this.

Upvotes: 1

Related Questions