dynamic columns declaration in q-table ?

[jitendra16]

In q-table we need to declare columns object, but in my case user is uploading csv file and i need to show all columns(columns names are user dependent) in q-table. I don’t want to use Markup table because in need rich features(selection, sorting, filtering) of q-table. Any clue how this can be done?

[chyde90]

The columns object doesn’t need to be static.
You can always modify it or generate it dynamically, for example as a computed property.

Maybe this will give you an idea:

computed: {
  columns() {
    return this.columnNamesFromCsv.map(columnName => {
      return {
        name: columnName,
        label: columnName,
        align: "left",
        sortable: true,
        field: row => row[columnName]
      };
    });
  }
}

Note that the field attribute is a function to extract the cell value from the row.

I’m assuming you parse the CSV into a Javascript object.
This all depends on how your data looks, of course.

[jitendra16]

@chyde90 Thanks for clue. I achieved this following way

columns() {
      return Object.keys(this.parsedJsonArrayOfObjectsFromCsv[0]).map(key => {
        return {
          name: key,
          label: key,
          align: "left",
          sortable: true,
          field: key
        }
      })
    }