react virtualized grid sort icon

Question

I've implemented on a grid from react-virtualized, the possibility for the user to sort values on click of an icon. I wish that the icon have the same behavior than the sort icon on react-bootstrap table.

Currently, my icon is working this. The column number doesn't come back to the circle icon, when I click on the column string.

Here's my sort component :

class SortColumn extends React.Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.state = {
      sortIcon: 'fa fa-circle',
      id: null,
    };
  }

  onClick() {
    const { columnId, sort } = this.props;
    const newSort = sort;
    newSort.id = columnId;

    if (sort.asc === true) {
      newSort.asc = false;
      this.setState({
        sortIcon: 'fa fa-chevron-down',
        id: columnId,
      });
    } else if (sort.asc === false) {
      newSort.asc = true;
      this.setState({
        sortIcon: 'fa fa-chevron-up',
        id: columnId,
      });
    }
    this.props.updateSort(newSort);
  }

  render() {
    return (
      <i
        onClick={this.onClick}
        styleName="columnSettingsSort"
        className={this.state.sortIcon} aria-hidden="true"
      />
    );
  }
}

Do you have any ideas ?

score 1 · Accepted Answer · answered Jul 31 '17 at 15:25

1

Sounds like you want the header icons to work similarly to how react-virtualized Table headers work.

The basic approach to this requires you to track both sort-by and sort-direction at the level of your Grid. You seem to be tracking it in component state at the level of a column which will run into the issue you've mentioned.

The easiest fix for this is just to move your component state for tracking the current sort criteria from your column component into your updateSort callback. Then pass the sort criteria to each column component as props. This way when a new sort direction is clicked, the old column will be informed (via new props) that it's no longer active.

answered Jul 31 '17 at 15:25

bvaughn

13,300
45
46

I’m not sure I’ve understood everything. Here’s what I’ve did. I have 3 components, GridView rendering ColumnHeader, rendering SortColumn. I’ve put in my GridView component the state of columnId and sort-direction. I’ve passed the sort-direction from GridView to SortColumn as props. In the render of SortColumn, I’m checking if the prop sort-direction is ascending or descending and display the corresponding icon. Now, every time I’m clicking on SortColumn, it’s changing the icon of all the columns. Did I miss or misunderstood something ? – Philippe Aug 01 '17 at 12:27
Sounds like you're close! You also need to store the _sort by column_ itself. This way you know to only show the up/down arrow on the column that's currently being sorted by. The others should show whatever default UI they show when they're inactive. Make sense? – bvaughn Aug 01 '17 at 15:50

react virtualized grid sort icon

1 Answers1