DataTable - compiling data from more JSONs, default view



  • 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)

  • Admin

    All these will be possible in QDataTable revamp of future v0.15 (currently in the works).