Conditional Rendering with Vue and Prime Vue Library - node.js

Question

I have a diagram that is composed of inputs and outputs. Using Primevue I am rendering a table with data for the inputs or outputs. However inputs and outputs should render different columns (not simultaneously it either displays input data or out put data)
I am wondering how I can render different columns on the table depending on what the API is returning. Instead of having to create two different tables. Is it possible to have a ternary operator in the ?
Here is a sample of the table component:
<DataTable
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:value="cardListData[0]"
:loading="isLoading"
:sortOrder="-1"
:paginator="true"
v-model:filters="filters"
:rows="rowsPerPage"
:rowsPerPageOptions="[10, 20, 50]"
responsiveLayout="stack"
:globalFilterFields="['date', 'lotNumber']"
>
<template #header>
<div class="flex justify-content-between">
<Button
type="button"
icon="pi pi-filter-slash"
:label="$t('Clear')"
class="p-button-outlined"
#click="clearFilter()"
/>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" :placeholder="$t('Keyword Search')" />
</span>
</div>
</template>
<template #empty> {{ $t('No data found')}}. </template>
<template #loading> {{ $t('Loading data. Please wait')}}. </template>
<Column field="date" :header="$t('Date')" :sortable="true">
<template #body="slotProps">
<div class="detail">
{{ slotProps.data.date ? formatDate(slotProps.data.date): 'N/A' }}
</div>
</template>
</Column>
<Column field="name" :header="$t('Name')" :sortable="true">
<template #body="slotProps">
<div class="detail">
{{ slotProps.data.name ? slotProps.data.name: 'N/A' }}
</div>
</template>
</Column>
<Column field="provider" :header="$t('Supplier')" :sortable="true">
<template #body="slotProps">
<div class="detail">
{{ slotProps.data.provider ? slotProps.data.provider: 'N/A' }}
</div>
</template>
</Column>
<Column field="quantity" :header="$t('Quantity')" :sortable="true">
<template #body="slotProps">
<div class="detail">
{{ slotProps.data.quantity ? slotProps.data.quantity +' g' : 'No Value' }}
</div>
</template>
</Column>
<Column field="type" :header="$t('Type')" :sortable="true">
<template #body="slotProps">
<div class="detail">
{{ slotProps.data.type ? slotProps.data.type : 'No Value' }}
</div>
</template>
</Column>
</DataTable>

Answer 1

Sure, you can use conditional rendering on <Column> like this:
<Column v-if="yourCondition">...</Column>
<Column v-else>...</Column>