how to get icon columns sorted?

[pgoldweic]

This is actually a how-to question, as I've realized that if a particular table column contains only font-awesome icons (no text allowed in the cells), the regular sorting does not work. Is there a way to get such column sorted in sematable? Note: I've tried doing this reusing the answer suggested in http://stackoverflow.com/questions/25034503/sorting-a-table-with-columns-composed-of-icons but it did not work (moreover, I get an infinite loop :-().

[amir-hadzic]

Hi,

For such cases I usually use a value-based column with a custom component (that renders an icon based on the value). The actual value of the column is a number, string, or a boolean so the sorting should work. Does that make sense?

Can you post a code example of what you are doing, and I'll take a closer look?

[pgoldweic]

Thanks Amir, What I'm doing is simply render an icon in the column if some condition is true (that a value has been changed in an editable cell), so my table render includes the following line for the cell:

<td className="narrowfield"><i className={changedCellClassname} aria-label={ariaChangedLabel}/>

and here's the preparatory code: const changedCellClassname = thisvalue !== originalValue ? "fa fa-asterisk fa-fw" : "" const ariaChangedLabel = thisgrade !== originalValue ? "changed" : ""

How would you give a value to the column? I've tried adding a element in the same

with an associated value of "Yes" or "No" but unfortunately somehow this got me into an infinite rendering loop :-(. Would love to see your specific suggestion. Thanks!

[amir-hadzic]

Hi @pgoldweic,

Here's how I would do that. In the data I provide to the table there should be a field with true/false value. It doesn't matter if this field is part of original data, or if it's a computed field (with something like reselect). I would define a column for this field, and use a custom YesNo component that renders "Yes" or "No" depending on field value.

The column definition would look like this:

{
  key: 'confirmed',
  header: 'Confirmed',
  Component: YesNo,
  sortable: true,
}

We actually have an example in stories that uses this, so you can take a look at YesNo component as well. This is used in the UsersTable example.

That's it, since the column is marked as sortable, and it has a true/false value, it should be possible to click on the header to sort by that column.

I hope that helps!

[pgoldweic]

I actually render the table myself, so I would not create a column as the one you show above, since I'm not using Sematable's own Table component to render, so your example doesn't quite apply. I believe you seem to be suggesting that the sorter sorts on column 'value' but not on rendered contents, correct? And also, would my equivalent to the 'Yes/No' component render either an icon or nothing (instead of the Yes/No?). If I understand correctly, this is how I would integrate my problem with your suggested solution. Assuming your answer to my questions is YES, I still run into an infinite rendering loop when I try to do this, even when I extend my original data to contain this extra boolean value :-(. Can you point me to an example that also does the table rendering from scratch (like mine) and accomplishes this goal? This is how I'm rendering the field in the table:

<td ><YesNo children={line.changed} /></td>

note: I've also tried the following:

<td><YesNo>{line.changed}</YesNo></td>

while the header is:

<SortableHeader  {...changed} />

where 'line' is in scope (within a map loop) and contains the current line (object) in my data (array), the changed field is a boolean, and the 'changed' object represents the 'changed' header as defined in my array of headers:

changed: {sortKey: "changed", name: "changed", 
		title: "Whether you have changed your grade"},

with a corresponding column as follows:

{key: 'changed', header: 'Changed', sortable: true, title: 
    	 "Whether you have changed your grade"},

Not sure where the problem is that causes the infinite rendering loop :-(

[pgoldweic]

An update: turns out that now that I've added the extra 'changed' boolean field to my data objects, using my original code does in fact sort the icon column, without the need to use any other component to render the icon. So I've gone back to render the field as follows:

<td className="narrowfield"><i className={changedCellClassname} /></td>

where changedCellClassname is either "" or "fa fa-asterisk fa-fw" depending on the value (the second is what's needed to render the icon). And this is in fact now sorting the column! Can you tell what is that makes this code work but the one above (with the YesNo component) not?

Anyway, thanks for suggesting that I add the additional field. I think this probably was the key to the solution.