No worries @rstoenescu. A few extra days are not a huge deal given the number of improvements. Do not compromise on quality and keep up the good work.

Beta is out. Thanks so much @rstoenescu and @s-molinari

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.

Excellent, thank you so much @rstoenescu. I was looking for this exact same feature after seeing it in action in Keen UI (https://josephuspaye.github.io/Keen-UI/#/ui-select, “With search” demo). I have adopted Quasar instead due to the excellent documentation and the overall quality of the components, and I was only missing this part. Keep up the good job. I am looking forward to the 0.14 release in a few days.

I am curious to know if 0.14 (or any version by the way) supports select components in dialogs using the form object approach (as described here). The documentation shows how to define text fields or radio buttons in the form object, but no selects.

Radio buttons are already supported. What I really need is a select field with search. Should I customize a modal so it fits my needs? Dialogs are so simple to use with this form property. I wish selects were supported out of the box, but I can probably figure something out with modals if this feature is not available yet (or not on the roadmap). @rstoenescu, any insight to share? Thanks again for the 0.14 by the way. In addition to the wealth of components, the documentation is one of the most comprehensive I have ever seen.

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?