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