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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.