vue-easytable plugin conditionally displays columns

Question

I am using vue-easytable plugin version 2.8.2 to display the table inside the Vue component. I'm having trouble finding how to conditionally display a table column.

In the demo shown here, when the "Row Radio" or "Row Checkbox" switch is turned on, we can see that a column is dynamically added to the demo table. So I think this feature/functionality should already exist in vue-easytable, but I can't find how to implement this referring to the documentation.

In my Vue component, the column 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 display the "Entity" column when the condition is met. What should I do to achieve this?

You can find vue-easytable documentation here.

Answer 1

In the code demonstrated in the source, columns are added to the columns array as follows:

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

For your use case, you'd better set the defaultHiddenColumnKeys option and/or the hiddenColumnsByKeys and showColumnsByKeys instance methods. See link for examples.

Or you can use cellStyleOption like this:

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';
                        }
                    },
                },