I want to have a DataTable with data compiled from 2 JSONs (questions, answers). I have:
The component:
<q-data-table
:data="data"
:config="config"
:columns="columns"
ref="table" >
</q-data-table>
I load the datasets:
import questions from '../data/questions.json'
import answers from '../data/answers.json'
import { QDataTable } from 'quasar'
Then I export the component:
export default {
data: function () {
questions,
answers,
data: [{}],
columns: [],
config: {
leftStickyColumns: 1,
noHeader: false,
// other configuration
}
},
mounted: function () {
// first column:
this.columns.push({
label: 'Question',
field: 'question',
width: '100px',
type: 'string'
})
// other columns
this.answers.map((answer) => {
this.columns.push({
label: answer.name,
field: answer.id,
width: '15px',
type: 'string'
})
})
// data from 2 files:
this.questions.map((question) => {
var item = {}
item.question = question.question
this.answers.map((answer) => {
item[answer.id] = answer['votes'][question.id]
})
this.data.push(item)
})
},
components: {
QDataTable
}
}
And the problems:
- No columns are shown at the load, I must select them manually in the Column Picker
- Is it possible to show just some of the columns at load and leave the rest for the Column Picker?)
- Is is possible to style the column name? (e.g., add picture/icon based on column name/description)