how to sort in table of react virtualized

Question

This is the project link using react virtualized table, i need to do sorting column-wise, but getting error while updating list array, How to write sort() function for table to update table when user click on column Header both ASC, DESC this is the documentation, https://github.com/bvaughn/react-virtualized/blob/ae38b6f58478026e6f19d828cad85a05fefd4260/source/Table/Table.example.js#L31-L32

import React from 'react';
import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import _ from 'underscore';
import 'react-virtualized/styles.css';

import { fakeJson } from './Data/fakeJson';

const datalist  = fakeJson;
const list = datalist; 
class TableComponent2 extends React.Component {
 
  constructor(){
    super();
     this.state = {
       sortBy: 'username',
       sortDirection: SortDirection.DESC,
       sortedList: list
     }
   }
  
   sort({ sortBy, sortDirection }) {
     console.log(list)
    const tempList = _.sortBy(list, item => item[sortBy]);
    console.log(tempList);
    const sortedList = tempList.update(
        list =>
          sortDirection === SortDirection.DESC ? list.reverse() : list
      );
  
    this.setState({ sortBy, sortDirection, sortedList });
  }

    render() {
      return (
        <AutoSizer disableHeight>
          {({ width }) => (
            <Table
              headerHeight={20}
              height={740}
              rowCount={datalist.length}
              rowGetter={({ index }) => this.state.sortedList[index]}
              rowHeight={60}
              width={width}
              sort={this.sort}
              sortBy={this.state.sortBy}
              sortDirection={this.state.sortDirection}
            >
              <Column
                dataKey='id'
                width={200}
                flexGrow={1}
                label='ID'
              />
              <Column
                dataKey='name'
                width={200}
                flexGrow={1}
                label='NAME'
              />
              <Column
                dataKey='username'
                width={200}
                flexGrow={1}
                label='USERNAME'
              />
            </Table>
          )}
        </AutoSizer>
      );
    }
  }
  
  export default TableComponent2;

const sortedList = tempList.update( list => sortDirection === SortDirection.DESC ? list.reverse() : list ); dont't understand what is Update do? and where it from? — egorchik

Prince Hernandez Prince Hernandez · Accepted Answer · 2019-01-31T14:02:28

basically you are using an update method over an array and update is not a method of Array.

const array = [1, 2, 3, 4, 5];
console.log(array.update); // undefined.
array.update(); //error.

What you only need to do is reverse your sorteredList based on your SortDirection, that is all what you need to set the state.

sort({ sortBy, sortDirection }) {
    console.log(list)
    const tempList = _.sortBy(list, item => item[sortBy]);
    console.log(tempList);
    const sortedList = sortDirection === SortDirection.DESC ? list.reverse() : list
    this.setState({ sortBy, sortDirection, sortedList });
}

how to sort in table of react virtualized

1 Answers