DataTable small tips

[danielo515]

This is an answer to: http://forum.quasar-framework.org/topic/1874/doubts-about-data-table/5
Well, here is the summary of how I fixed (almost) all my issues on Quasar v0.15.2:

• If you want an extra column, then add it to the columns list, and don’t forget to include it in the list of visible columns if you are using that feature
• If you want to customize how cells are rendered, you don’t need to manually customize the entire row, you can customize just the cell slot. This allowed me to render different types of cells based on their type:

    <q-td slot='body-cell' slot-scope='props' :props='props'>
        <span v-if='isDate(props.row[props.col.field])'>
            {{ formatDate(props.row[props.col.field]) }}
        </span>
        <span v-else-if='props.col.field==="interval"'>
            {{ formatInterval(props.row[props.col.field]) }}
        </span>
        <p v-else-if='isPlainArray(props.row[props.col.field])' v-for='v in props.value' :key='v'>{{v}}</p>
        <object-tree v-else-if='isObject(props.row[props.col.field])' :traverse='props.row[props.col.field]' />
        <span v-else>{{props.row[props.col.field]}}</span>
    </q-td>

Now I have to see if I find a way to make columns sticky (low prio) and a way to understand how slot-scope works, because the props thing is still a bit obscure to me.

[polger]

Useful. Unless you need the <span> tag, you could replace it by <template>, so no additional nested span tags are created inside <td>

[danielo515]

I don’t need it to be a span at all. I thought that template was just for encapsulate the component, and that it will be read by quasar and transformed into dom elements. I didn’t knew that you can use as a “virtual” dom element.