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.

There are two issues:

1.) I think you meant to not set emit-value on your q-select, because your model is an array of objects (with label and value) when you initialize it.
That causes the values (only the numbers) to be added to the model when you select an option.
You can (should) either have your model hold values or objects.

2.) To fix the syncronization between the q-select option and the q-toggle, you can replace your q-toggle with this:

<q-toggle
   :value="scope.selected"
   @input="change => scope.toggleOption(scope.opt)"
/>

It’s already in there.
I found this in the QSplitter examples, here: https://quasar.dev/vue-components/splitter#Fun-examples

• remove <q-space></q-space> because it does nothing in your case (it is only for horizontal gaps, I think)
• add the class q-gutter-y-xl to the div in line 2

Explanation:
That div contains three elements (two divs and the <hr>) which you want to space out. Whenever you want to add equal spacing between all elements, using a q-gutter class on the container does the trick (except when working with cols, then it’s q-col-gutter, see https://quasar.dev/layout/grid/gutter).

(Alternatively, you could manually add margins to your rows or the separator, for example q-my-xl on the <hr> or the divs, but the gutter method is better)

Also, consider replacing <hr> with <q-separator />.

@metalsadman hmm… it seems I didn’t make the problem clear enough I edited my original post to make it more clear.
The jsfiddle shows the desired behavior, which I can’t re-produce in the current version of Quasar.

I’m not talking about multi select mode. And I don’t mind that the options in my jsfiddle link are not displayed with multiple lines.
The key point is that the user writes a multi-line text. That means when he hits the enter-key, there is a new line (in the same string) - just like <q-input type="textarea" />. But this as the input in a q-select, so that the user can also choose from options as an alternative to typing everything in.

With Quasar v0.17, it could easily be done with <q-autocomplete> inside a textarea.
See here: https://jsfiddle.net/og4dy9zu/3/ This is what I’m looking for.

It is the last thing that holds me back from rolling out a new version of my project including the Quasar v1 upgrade

So you want to be able to select the leaves of the tree (which is called “activate” in Vuetify) and also toggle the expansion state when a node is clicked?

<q-tree
      :nodes="nodes"
      node-key="key"
      :expanded.sync="expandedNodeKeys"
      :selected.sync="selectedNodeKey"
 />

data() {
   return {
      expandedNodeKeys: [],
      selectedNodeKey: null
   };
},
watch: {
   selectedNodeKey(value) {
      if (value) {
        if (this.expandedNodeKeys.includes(value)) {
          this.expandedNodeKeys = this.expandedNodeKeys.filter(x => x !== value);
        } else {
          this.expandedNodeKeys.push(value);
        }
      }
      // TODO: check if the selected node has children and if so, set this.selectedNodeKey to null
      // that effectively makes only the leaves of the tree selecteable
    }
}

Dark Mode!!! Awesome!!!

This is how I do it:

<q-tree
    :nodes="nodes"
    :ticked.sync="tickedNodeKeys"
    node-key="key"
   ...
 />

data() {
   return {
      tickedNodeKeys: [],
      allNodeKeys: []
   }
},
computed() {
   nodes() {
      // !!! while generating the nodes, I collect the keys and write them into this.allNodeKeys
      // if you want to tick everything initially, you can set this.tickedNodeKeys here right away
      // return generated nodes
   }
},
methods: {
   tickAll() {
      this.tickedNodeKeys = [...this.allNodeKeys];
    }
}

I hope it helps

@metalsadman I have a record that stores a text with multiple lines. And in the form there should be suggestions/autocomplete results