Griddle heading ascending/descending classnames not generated

[moraleslos]

I'm using Griddle with pagination, filter and local plugin, with useGriddleStyles = false so that I can use custom styles defined externally. I'm trying to style the ascending/descending icons of the header to those from fontawesome. I'm doing this by overriding the griddle-heading-ascending and griddle-heading-descending classes like this:

.griddle-heading-ascending:before {
   content: "\f15d";
   font-family: FontAwesome;
}

However griddle just uses the built-in up/down arrow icons. Looking at the elements via Chrome, it seems that there are no griddle-heading-ascending and griddle-heading-descending classes generated. It just creates an inline <span> inside the <th> with the griddle-table-heading-cell classname:

Is there supposed to be griddle-heading-ascending and griddle-heading-descending span classes generated?

BTW using Griddle 1.6.0

[dahlbyk]

Not sure about "supposed to be", but you rightly observe that there are not (code). However, you can replace those icons with styleConfig:

<Griddle plugins={[LocalPlugin]}
  styleConfig={{
    icons: {
      TableHeadingCell: {
        sortDescendingIcon: <i className="fa fa-caret-square-o-up" />,
        sortAscendingIcon: <i className="fa fa-caret-square-o-down" />,
      },
    },
  }}
  />

[moraleslos]

@dahlbyk In the docs the ascending/descending classnames were listed as supposed to be there--well, at least from my own understanding =) This is what is described in the styles section: https://griddlegriddle.github.io/Griddle/docs/styles/.

I could use styleConfig but I would prefer styling to be externalized in it's own css (actually we use sass). Every other classname in that link above seems to exist (we were able to stylize just fine externally) except for the ascending/descending ones.

[dahlbyk]

@moraleslos interesting... the classNames entries exist, we just don't use them. I'll see if I can get that fixed.

[moraleslos]

@dahlbyk thanks!