How to use the react-virtualized.SortDirection.ASC function in react-virtualized

function initialState() {
  return {
    search: '',
    grade: ALL,
    englishProficiency: ALL,
    house: ALL,
    counselor: ALL,
    level: ALL,
    trigger: ALL,
    sortBy: 'level',
    sortDirection: SortDirection.ASC,
    isDownloadOpen: false
  };
}

classNames.push(`color-${connection.class}`);
      }

      return {
        name: this.props.direction === 'incoming' ? connection.source.getName() : connection.target.getName(),
        errorRate: errors / total || 0,
        errors: errors,
        total: total,
        className: classNames.join(' '),
        disabled: disabled,
        notices: connection.notices
      };
    });

    connectionRows.sort(sorters[this.state.sortBy]);
    if (this.state.sortDirection !== SortDirection.ASC) { _.reverse(connectionRows); }

    if (this.refs.flexTable && this.refs.flexTable.props.estimatedRowSize) {
      estimatedRowHeight = this.refs.flexTable.props.estimatedRowSize - 4;
    }
    const tableHeight = Math.min(maxTableHeight, (estimatedRowHeight * connectionRows.length) + headerHeight);


    return (
      connectionRows.length > 0
        ? <div>
          </div>

constructor (props) {
    super(props);
    this.state = {
      nodes: props.nodes,
      sortBy: 'totalPercent',
      sortDirection: SortDirection.ASC
    };

    this.linkPopover = (node) => {
      const atlasBackend = this.props.region ? `&backend=http:%2F%2Fatlas-main.${this.props.region}.prod.netflix.net:7001` : '';
      const atlasLink = `http://atlasui.prod.netflix.net/ui/graph?g.q=nf.cluster,${node.name},:eq,name,RequestStats-all-requests-_Num,:re,:and,:sum,(,name,),:by&g.e=now-1m&g.s=e-3h&g.tz=US%2FPacific&mode=png&vsplit=520px&sel=expr.0.0${atlasBackend}`;
      const spinnakerRegion = this.props.region ? `®=${this.props.region}` : '';
      const spinnakerLink = `https://spinnaker.prod.netflix.net/#/applications/${node.app}/clusters?acct=prod&q=cluster:${node.name}${spinnakerRegion}`;
      return (
        
          <div>OPEN IN</div>
          <div><a href="{atlasLink}">Atlas UI</a></div>
          <div><a href="{spinnakerLink}">Spinnaker</a></div>
        
      );
    };

function getState(props: Props) {
  const data = props.data;
  const schema = props.schema || inferSchema(data);
  return {
    data,
    schema
  };
}

export default class VirtualizedTable extends React.Component {
  props: Props;
  state: State = {
    data: [],
    schema: { fields: [] },
    sortBy: '',
    sortDirection: SortDirection.ASC
  };

  componentWillMount() {
    const state = getState(this.props);
    this.setState(state);
  }

  componentWillReceiveProps(nextProps: Props) {
    const state = getState(nextProps);
    this.setState(state);
  }

  render() {
    const rowCount = this.state.data.length + 1;
    const height = rowCount * ROW_HEIGHT;
    return (

constructor(props) {
    super(props);
    this.state = {
      sortDirection: SortDirection.ASC,
      sortBy: 'userName',
      sortedList: props.data,
    };
  }

constructor(props: IPagerProps) {
    super(props);

    const { $stateParams } = ReactInjector;
    this.state = {
      accountName: (SETTINGS.pagerDuty && SETTINGS.pagerDuty.accountName) || '',
      app: $stateParams.app || '',
      filterString: $stateParams.q || '',
      hideNoApps: $stateParams.hideNoApps || false,
      notFoundApps: [],
      initialKeys: $stateParams.keys || [],
      sortBy: $stateParams.by || 'service',
      sortDirection: $stateParams.direction || SortDirection.ASC,
      sortedData: [],
      selectedKeys: new Map(),
    };
  }

constructor (props) {
    super(props);
    this.state = {
      connections: props.connections,
      sortBy: 'errorRate',
      sortDirection: SortDirection.ASC
    };
  }

onScroll: PropTypes.func,
  onSelection: PropTypes.func,
  onSort: PropTypes.func,
  onKeyDown: PropTypes.func,
  onRef: PropTypes.func
};
const defaultProps = {
  rowContextMenuId: nanoid(),
  filesViewContextMenuId: nanoid(),
  items: [],
  layout: () => [],
  layoutOptions: {},
  selection: [],
  loading: false,
  sortBy: 'title',
  sortDirection: SortDirection.ASC,
  onRowClick: () => {},
  onRowRightClick: () => {},
  onRowDoubleClick: () => {},
  onScroll: () => {},
  onSelection: () => {},
  onSort: () => {},
  onKeyDown: () => {},
  onRef: () => {}
};

export default
class ListView extends Component {
  state = {
    scrollToIndex: 0,
    clientHeight: 0,
    scrollTop: 0,

onTableSort({defaultSortDirection, event, sortBy, sortDirection}) {
    if (sortBy === this.state.sortBy) {
      const oppositeSortDirection = (this.state.sortDirection == SortDirection.DESC)
        ? SortDirection.ASC
        : SortDirection.DESC;
      this.setState({ sortDirection: oppositeSortDirection });
    } else {
      this.setState({sortBy});
    }
  }