React-data-grid: Sorting in v7 - works only once, no indicator shown

Created on 17 Apr 2020 · 4Comments · Source: adazzle/react-data-grid

I tried to follow the example here:
https://adazzle.github.io/react-data-grid/docs/examples/column-sorting

A simplified version of it with react-data-grid 5.1
https://codesandbox.io/s/rdg-column-sorting-yk9ob?file=/src/index.js

react-data-grid version: "7.0.0-canary.14"

onGridSort was replaced with onSort (as described in the changelog).
import 'react-data-grid/dist/react-data-grid.css'; was added
except for that the code is identical

After clicking on the header row the table is sorted in ascending order, clicking on it again does not change the order to descending as in the previous versions.
Also the span where the sort order indicator is shown stays empty.

Is there any parameter I'm missing?

Complete code:
index.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import 'react-data-grid/dist/react-data-grid.css';

import createRowData from "./createRowData";
import "./styles.css";

const defaultColumnProperties = {
  sortable: true,
  width: 120
};

const columns = [
  {
    key: "id",
    name: "ID",
    sortDescendingFirst: true
  },
  {
    key: "firstName",
    name: "First Name"
  },
  {
    key: "lastName",
    name: "Last Name"
  }
].map(c => ({ ...c, ...defaultColumnProperties }));

const ROW_COUNT = 10;

const sortRows = (initialRows, sortColumn, sortDirection) => rows => {
  console.log(sortDirection);
  const comparer = (a, b) => {
    if (sortDirection === "ASC") {
      return a[sortColumn] > b[sortColumn] ? 1 : -1;
    } else if (sortDirection === "DESC") {
      return a[sortColumn] < b[sortColumn] ? 1 : -1;
    }
  };
  return sortDirection === "NONE" ? initialRows : [...rows].sort(comparer);
};

function Example({ initialRows }) {
  const [rows, setRows] = useState(initialRows);
  return (
    <ReactDataGrid
      columns={columns}
      rows={rows}
      rowsCount={ROW_COUNT}
      onSort={(sortColumn, sortDirection) =>
        setRows(sortRows(initialRows, sortColumn, sortDirection))
      }
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example initialRows={createRowData(50)} />, rootElement);

createRowData.js
```import faker from "faker";

function createFakeRow(index) {
return {
id: index,
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
};
}

export default function createRowData(count) {
return [...Array(count).keys()].map(i => createFakeRow(i));
}
```

Source