Thanks @a47ae, this really helps.

@rstoenescu: before I dive into this, are you working on such a feature already?

Any hint as to how you would implement the feature? I could try it myself and submit a pull request.

I am looking for something similar to http://element.eleme.io/#/en-US/component/table#expandable-row

I am pretty sure this feature is not available out of the box with Quasar. I am also pretty sure it can be done but I lack the front-end skills to do so. That is exactly why I am using frameworks and libraries like Quasar

Thanks for 0.14.1 by the way. Excellent job!

Untested, but should work:

<template>
  <q-input type="email" v-model="email" float-label="Email" :suffix="suffix" clearable />
</template>

<script>
export default {
  data () {
    return {
      email: '',
      suffix: '@gmail.com'    
    }
  },
  methods: {
    login: function (event) {
      console.log(this.email + this.suffix + ':' + this.password)
    }
  }
}
</script>

Vue.js is data-centric, so it makes sense to define your settings in data() and bind to them. On top of that, you get reactivity out of the box and your suffix is dynamic.

@glittle: makes sense, thank you. I do not need all the features of the DataTable (like sorting and filtering) for my current project. I might be better off rolling my own table with a simple v-for too. I am still interested in this revamped version for other projects though.
@rstoenescu: any estimate on what “soon” means? A few days? A few weeks? I know it is hard to tell. No pressure. I am just assessing whether I should work on other projects in the mean time.

I am interested in this too. @glittle: were you able to come up with a workaround, like styling all cells in a row independently?

Right, my bad. I will keep this in mind.

Thanks, I am fine with it. I just wanted to make sure it was the best option.

I went through the documentation looking for an option to access the index of a row in a data table, but could not find any.

I tried the following with scope="row" and then {{ row.index }}:

<q-data-table ...>
  <template slot="col-error" scope="row">
    <q-icon name="error" size="2em">
      <q-tooltip>{{ row.index }}</q-tooltip>
    </q-icon>
  </template>
  ...
</q-data-table>

I also tried {{ row.$index }} with no success.

Thanks a lot. My only option is modal with custom layout, right?