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 ?

bvaughn · Accepted Answer · 2017-07-31 15:25:53Z

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, 2017 at 15:25

bvaughn

13.5k49 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Philippe Over a year ago

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 ?

bvaughn Over a year ago

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?

Collectives™ on Stack Overflow

react virtualized grid sort icon

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related