Conditional Rendering with Vue and Prime Vue Library-CodePudding

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 >
          <Button
          type="button"
          icon="pi pi-filter-slash"
          :label="$t('Clear')"
          
          @click="clearFilter()"
          />
          <span >
          <i  />
          <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 >
          {{ slotProps.data.date ? formatDate(slotProps.data.date): 'N/A' }}
          </div> 
      </template>
      </Column>
      <Column field="name" :header="$t('Name')" :sortable="true">
      <template #body="slotProps">
          <div >
          {{ slotProps.data.name ? slotProps.data.name: 'N/A' }}
          </div> 
      </template>
      </Column>
      <Column field="provider" :header="$t('Supplier')" :sortable="true">
      <template #body="slotProps">
          <div >
          {{ slotProps.data.provider ? slotProps.data.provider: 'N/A' }}
          </div> 
      </template>
      </Column>
      <Column field="quantity" :header="$t('Quantity')" :sortable="true">
      <template #body="slotProps">
          <div >
          {{ slotProps.data.quantity ? slotProps.data.quantity  ' g' : 'No Value' }}
          </div>
      </template>
      </Column>
      <Column field="type" :header="$t('Type')" :sortable="true">
      <template #body="slotProps">
          <div >
          {{ slotProps.data.type ? slotProps.data.type : 'No Value' }}
          </div>
      </template>
      </Column>
      </DataTable>

CodePudding user response：

Sure, you can use conditional rendering on <Column> like this:

<Column v-if="yourCondition">...</Column>
<Column v-else>...</Column>