dynamic columns declaration in q-table ?



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



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



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

Log in to reply