Quasar: Data Table: Allow programmatical hiding of columns

[LeanderG]

In my use case, I need to be able to hide and show entire columns. (add and remove would be even better)
This is already possible for the user with the following option, however I want to do this programmatically. As far as I understand this in not possible right now.

 config = {
  // (optional)
  // User will be able to choose which columns
  // should be displayed
  columnPicker: true,
 }

A solution could be to add a hidden option to columns and hide the column once it gets set to true.

columns = [
  {
   // (optional) By default, column is displayed
   // but you can hide the column by setting the property to "true"
   hidden: false
  }
]

[rstoenescu]

Will do.

[peterviergutz]

I implemented a mini solution for this here, but changed the suggested hiddenproperty to DataTable's own term visible. When the column picker is disabled this property does not have any effect and all columns are shown.

@rstoenescu should I prepare a pull request or do you have something more sophisticated in mind? Happy to adapt :)

[ssuess]

@peterviergutz I can't get this to work, any tips/advice? I am just doing a simple

import ColumnSelection from './column-selection.js'

in the component (DataTable.vue) and then putting visible: false into the col def.

Am I missing something or doing something wrong? Thanks!

[rstoenescu]

DataTable revamp is in progress for v0.15. It will include this. Thanks for your patience.

[ssuess]

That is cool, thanks. Is there a beta version to play around with by any chance?

[ssuess]

Nevermind, good for now. I got it working by modifying quasar.esm.js directly. Thanks!

[ssuess]

FYI, I had to substantially modify the code to get it to build without uglify errors:

var ColumnSelection = {
  data: function data () {
    return {
      columnSelection: this.columns.map(function (col) { return col.visible === false ? col.visible : col.field; })
    }
  },
  watch: {
    'config.columnPicker': function config_columnPicker (value) {
      if (!value) {
        this.columnSelection = this.columns.map(function (col) { return col.field; });
      }
      else {
        this.columnSelection = this.columns.map(function (col) { return col.visible === false ? col.visible : col.field; });
      }
    }
  },
  computed: {
    cols: function cols () {
      var this$1 = this;

      return this.columns.filter(function (col) { return this$1.columnSelection.includes(col.field); })
    },
    columnSelectionOptions: function columnSelectionOptions () {
      return this.columns.map(function (col) {
        return {
          label: col.label,
          value: col.field
        }
      })
    }
  }
};

[heberalmeida]

1. in columns data include in all the following property visible true | false i property vlr to false

data() {
 return {
   vlr: false,
   columns: [
                {
                     visible: true
                 .... }]
 }
}

1. created computed allcolumns

allcolumns() {
            setTimeout(this.vlr = true , 500)
            return this.columns.filter(i => i.visible)
        }

1. in template include computed
   <q-data-table :data="result" :config="config" :columns="allcolumns" ...>

2. watch obsevable update properts vlr

 watch: {
        vlr() {
             this.columns.filter(i => !i.visible ? i.visible = true : i)
        },
}

1. ready

[rstoenescu]

Datatable revamp has this feature request. Very easy and clean to use. You will like it :)
Closing this issue. Available in future v0.15

[galipmedia]

@heberalmeida thank you! Works perfectly :)