Table with default sortable header hides arrow icon

[jcunhafonte]

Overview of the problem

Buefy version: [0.9.2]
Vuejs version: [2.6.11]
OS/Browser: Chrome 85

Description

Buefy Table with custom header and sortable prop hides

Steps to reproduce

Define a table with a custom header and sortable
Sort the column
Notice the arrow not being shown

Expected behavior

I'd expect the table to have the custom header and maintaining the sort arrow.

Actual behavior

Example:
Sort on Identifier column:

Sort on ID column:

[jtommy]

I should think about it, probably with a prop because it's a breaking change

[nwidger]

Just as an extra data point, I'm currently upgrading from Buefy v0.8.17 to v0.9.3 and also ran into this issue. Using v0.8.17, I was using the following b-table-column template and the arrow icons were shown when the table was sorting on the column:

<b-table-column field="hidden" label="Archived" centered sortable :visible="hiddenColumn">
    <template slot="header">
        <b-icon size='is-small' pack="fa" icon="archive" title="Archived"></b-icon>
    </template>
    <b-icon v-if="system.hidden" size='is-small' pack="fa" icon="archive" title="Archived"></b-icon>
</b-table-column>

after upgrading to v0.9.3, the template had to change a bit due to the breaking changes in the v0.9.0 release, but in addition the sort arrows are no longer shown when the column is selected:

<b-table-column field="hidden" label="Archived" centered sortable :visible="hiddenColumn">
    <template v-slot:header>
        <b-icon size='is-small' pack="fa" icon="archive" title="Archived"></b-icon>
    </template>
    <template v-slot="{ row: system }">
        <b-icon v-if="system.hidden" size='is-small' pack="fa" icon="archive" title="Archived"></b-icon>
    </template>
</b-table-column>

I've looked over the Buefy release notes for the v0.9.x releases and didn't see any mention of the removal of the sort arrows when using a custom header template, so to me this seems like a breaking change. If the decision is made to not add the arrows back in, perhaps something could be added to the documentation showing how to add them back in manually inside the custom template, if that's even possible.

[mcmule]

I have the same problem (described by nwidger): in 0.9.4, sort arrow are not displayed if we use custom header template. There is no mention in the doc regarding how to re-create these arrows.

[mcmule]

Does someone have a workaround for this? I think the easiest way would be to get sort direction from buefy to display me own sort icon?

[eriksvedenlund]

Does someone have a workaround for this? I think the easiest way would be to get sort direction from buefy to display me own sort icon?

I used custom-sort on the column I want sorted. The function has an "isAsc" parameter, I used that to set a data variable in my component. Then I can show my own icon depending on that data variable.

[mcmule]

I used custom-sort on the column I want sorted. The function has an "isAsc" parameter, I used that to set a data variable in my component. Then I can show my own icon depending on that data variable.

That's a nice workaround. I'd have preferred a way to do it without relying an a side effect, but given there's no builtin solution in Buefy, your way seems the best atm, so thank you :)

[wesdevpro]

Closing because #3940 should have fixed this issue. If you happen to be able to reproduce this issue with the latest version of Buefy please reopen this issue. Thank You!

[Verdoso]

Hello there,
It's happening to me with Buefy v0.9.29.
If I comment the custom header:

            <b-table-column field="data" label="Data" width="10%" centered sortable searchable>
            <!--
              <template v-slot:header="{ column }">
                <b-tooltip label="Per filtrar fer servir el format YYYY-MM-DD" :append-to-body="false" dashed position="is-left" type="is-light">
                    {{ column.label }}
                </b-tooltip>
              </template>
            -->
              <template #searchable="props">
                <b-input
                  v-model="props.filters[props.column.field]"
                  icon-right="close-circle"
                  icon-right-clickable
                  @icon-right-click="$delete(props.filters,props.column.field)"
                />
              </template>
              <template v-slot="props">
                {{ props.row.data_Formatted }}
              </template>
            </b-table-column>

I see this:

However, if I remove the comment tags, I see this and even though the sorting works, the arrows are never displayed:

Checking the HTML created for the headers and comparing it with the previous one that uses no custom header, I can see that the span tag that should hold the arrows is missing from the generated content:

I tried to reproduce with the codepen from the current Buefy documentation (B-Table # Custom headers) and in this case not only the arrows are not displayed but the sorting does not even work. You can see it here: https://codepen.io/Verdoso/pen/wvZLvvm?editors=101&layout=right where I just added sortable to the 'First name' column.

Cheers!