Combining fixed and dynamic classes in Alpine.bind()

[docdunning]

I'm using Alpine.bind() to add attributes to table header cells.

<th x-bind="sortCol('name')">Name</th>

Alpine.bind('sortCol', (col) => ({
  'class': 'cursor',
  ':class' () {
    if (this.sortcol == col) return 'sortcol'
  },
  'title': 'Sort',
  '@click'() {
      this.sortcol = col
      this.sortItems(col)
  },
}))

It works OK apart from the classes. I want the element always to have the class cursor, and maybe also sortcol. As I have it above, the sortcol class is being applied correctly when necessary, but the cursor class is never being applied - like it's being overridden by the :class function.

I know I could do this:

':class' () {
    return (this.sortcol == col) ? 'cursor sortcol' : 'cursor' 
},

But :class is supposed to supplement, not replace class. What am I doing wrong?

[ekwoka]

It's just that both end up becoming a :class under the hood.

Just have the one and return just what you want in it.

No need for two.

[docdunning]

Thanks

I've settled on this as the tidiest way to do it. Although the cursor class is always required, at least using bind() means no repetitive class attributes in the th elements themselves.

Alpine.bind('sortCol', (col) => ({
  ':class' () {
    return {cursor:true, sortcol:this.sortcol == col}
  },
  'title': 'Sort',
  '@click'() {
      this.sortcol = col
      this.sortItems(col)
  },
}))