vue-easytable plugin conditionally show columns

user_7952006 0
Viewed 218

I have used vue-easytable plugin version 2.8.2 to display a table inside a Vue component. I have a problem of finding how to conditionally display a table column.

In a demo displayed in here when either of the "Row Radio" or "Row Checkbox" switches are switched on we can see a column is added to the demo table dynamically. So I think this feature/functionality should be there already in vue-easytable, but I couldn't find how to achieve this referring to the documentation.

Within my Vue component the columns array I pass to vue-easytable is as follows.

columns: [
        {
          field: "entity",
          key: "c",
          title: "Entity",
          align: "left",
          sortBy: "asc",
        },
        {
          field: "version",
          key: "d",
          title: "Version",
          align: "center",
        },
        {
          field: "test_date",
          key: "e",
          title: "Test Date",
          align: "center",
        },
        {
          field: "score",
          key: "f",
          title: "Score",
          align: "center",
        },
        {
          field: "score_percentage",
          key: "g",
          title: "Score (%)",
          align: "center",
        },
        {
          field: "result",
          key: "h",
          title: "Result",
          align: "center",
        }
    ]

I want to show the "Entity" column when a condition is satisfied. What should I do to achieve that?

You can find the vue-easytable documentation here.

vuejs2 vue.js
1 Answers

In the source code of the demo, the column is being added to the columns array like so:

if (this.enableRowCheckbox) {
                columns.push({
                    field: "checkbox",
                    key: "checkbox",
                    title: "",
                    width: 100,
                    fixed: this.enableColumnFixed ? "left" : "",
                    type: "checkbox",
                });
            }

For your use case you might be better off setting the defaultHiddenColumnKeys option and/or the hiddenColumnsByKeys and showColumnsByKeys instance methods. See the link for examples.

Or you can use the cellStyleOption, like so:

cellStyleOption: {
                    headerCellClass: ({ column }) => {
                        if (column.field === "entity") {
                            return someCondition?'text-visible-class':'text-hidden-class';
                        }
                    },
                        bodyCellClass: ({ column }) => {
                        if (column.field === "entity") {
                            return someCondition?'text-visible-class':'text-hidden-class';
                        }
                    },
                },
user_140297800
Related