Sort icon missing

[martinspudich]

Overview of the problem

Buefy version: 0.5.4

Description

Hi why you remove dynamic is-visible css on icon? It stop showing sort arrow icon. Can you please return the code back.

Fix #356 Table header alignment

Before fix:

<b-icon icon="arrow_upward" both size="is-small" :class="{ 'is-desc': !isAsc, 'is-visible': currentSortColumn === column }"> </b-icon>

---

After fix:

<b-icon v-show="currentSortColumn === mobileSort" icon="arrow_upward" both size="is-small" :class="{ 'is-desc': !isAsc }"> </b-icon>

Thank you,
Best regards,
Martin

[jtommy]

@martinspudich The sort icon is still visible. It's a fixed about custom header and the we removed is-visible because the icon takes up space.
What's your issue ?

[martinspudich]

Hi,
thank you for your response. I'm seeing now where I had a problem. I was using old buefy.min.css file.

I'm sory for this report. It's possible to close this issue.

One more time thank you,
have a nice day,
Martin

[woodgates]

#378
Hi. I have the same issue. I cant see the sort Icon on the table headers.

This is my install:

import Buefy from 'buefy'
Vue.component(Buefy.Icon.name, Buefy.Icon)
Vue.component(Buefy.Table.name, Buefy.Table)
Vue.component(Buefy.TableColumn.name, Buefy.TableColumn)

I reinstalled buefy today.

This is the Table.vue extract:

<b-icon
    v-show="currentSortColumn === column"
    icon="arrow-up"
    both
    size="is-small"
    :class="{ 'is-desc': !isAsc }">
</b-icon>

icon appears with opacity:0 on the html so I think the v-show is giving false. I checked the currentSortColumn and the colunm objects and it should give true.

This is my table:

<b-table
  :data="misPosts"
  default-sort="id"
  >
  <template slot-scope="props">

    <b-table-column label="ID" width="30" numeric sortable field="id">
      <span>@{{props.row.id}}</span>
    </b-table-column>

    <b-table-column  label="Creado" width="80" sortable centered field="created_at.date">
      <p v-if="props.row.created_at">@{{(new Date(props.row.created_at.date)).toLocaleDateString()}}</p>
    </b-table-column>

    <b-table-column label="Titulo" width="200" field="title">
      <a v-if="props.row.links" :href="props.row.links.edit">@{{props.row.title}}</a>
      <p v-else>@{{props.row.title}}</p>
    </b-table-column>

  </template>

</b-table>

Appreciate your help