Search code examples
vue.jsvuejs2primevue

PrimeVue - is there any way to hide the row selection column in the DataTable component?


I'm looking for a way to conditionally hide the row selection column in the DataTable component, for example I want to render it if I have a certain prop passed:

<DataTable>
  <Column v-if="propName == true" :selectionMode="selectedMode" headerStyle="width: 3em"></Column>
</DataTable>

However, when I try to do the above my table randomly renders 4 empty columns instead.

screenshot of what I want to conditionally hide

what happens when I try to do use the v-if directive


Solution

  • Eventually I managed to fix it using CSS styling to conditionally hide the column I want.

    :style="useRowEditing === false ? 'display: none;' : ''"
    

    Just added this to the column and passed an additional property to the column in my arrays.