React 虚拟化表 - sort 和 sortBy

Question

我正在尝试使我的反应虚拟化表可排序。单击可排序标题时，我希望表格按特定列排序。我已经关注了文档，但到目前为止它根本不起作用。代码如下：

// @flow
import React from 'react';

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

class TableView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sortBy: 'index',
            sortDirection: SortDirection.ASC 
        };
    }
    render() {
  if (this.props.table.length < 1) return null;
  const list = this.props.table[0].tabs.map(function({ info, call_stats, ...a }) {
    var call_stats_lookup = {
      lookup_max: 0,
      lookup_min: 0,
      lookup_median: 0,
      lookup_percentile_75: 0,
      lookup_percentile_90: 0,
      lookup_percentile_95: 0,
      lookup_percentile_99: 0,
      lookup_percentile_999: 0,
      lookup_count: 0
    };
    var call_stats_insert = {
      insert_max: 0,
      insert_min: 0,
      insert_median: 0,
      insert_percentile_75: 0,
      insert_percentile_90: 0,
      insert_percentile_95: 0,
      insert_percentile_99: 0,
      insert_percentile_999: 0,
      insert_count: 0
    };
    if (call_stats !== 'undefined' && typeof call_stats !== 'undefined') {
      var Lookup = call_stats.filter(function(obj) {
        return obj.func === 'lookup';
      });
      var Insert = call_stats.filter(function(obj) {
        return obj.func === 'insert';
      });
      if (Lookup.length !== 0) {
        call_stats_lookup.lookup_max = Lookup[0].time.max;
        call_stats_lookup.lookup_min = Lookup[0].time.min;
        call_stats_lookup.lookup_median = Lookup[0].time.median;
        call_stats_lookup.lookup_percentile_75 = Lookup[0].time.percentile[75];
        call_stats_lookup.lookup_percentile_90 = Lookup[0].time.percentile[90];
        call_stats_lookup.lookup_percentile_95 = Lookup[0].time.percentile[95];
        call_stats_lookup.lookup_percentile_99 = Lookup[0].time.percentile[99];
        call_stats_lookup.lookup_percentile_999 =
          Lookup[0].time.percentile[999];
        call_stats_lookup.lookup_count = Lookup[0].count;
      }
      if (Insert.length !== 0) {
        call_stats_insert.insert_max = Insert[0].time.max;
        call_stats_insert.insert_min = Insert[0].time.min;
        call_stats_insert.insert_median = Insert[0].time.median;
        call_stats_insert.insert_percentile_75 = Insert[0].time.percentile[75];
        call_stats_insert.insert_percentile_90 = Insert[0].time.percentile[90];
        call_stats_insert.insert_percentile_95 = Insert[0].time.percentile[95];
        call_stats_insert.insert_percentile_99 = Insert[0].time.percentile[99];
        call_stats_insert.insert_percentile_999 =
          Insert[0].time.percentile[999];
        call_stats_insert.insert_count = Insert[0].count;
      }
    }
    var call_stats_obj = {
      ...call_stats_insert,
      ...call_stats_lookup
    };
    return { ...a, ...info, ...call_stats_obj };
  });
  const rowGetter = ({ index }) => list[index];
  return (
    <AutoSizer>
      {({ width, height }) => (
        <Table
          ref="Table"
          disableHeader={false}
          width={width}
          headerHeight={50}
          height={height}
          rowHeight={30}
          rowGetter={rowGetter}
          rowCount={list.length}
          sortBy={this.state.sortBy}
          sortDirection={this.state.sortDirection}
          rowClassName={({ index }) => {
              if(index !== -1){
                  return 'ets-table-row';
              } else {
                  return 'ets-table-header';
              }
          }}
          sort={({ sortBy, sortDirection }) => {
              this.setState({sortBy, sortDirection});
          }}
        >
          <Column
            width={150}
            label="Name"
            cellRenderer={({ cellData }) => cellData}
            dataKey="name"
            disableSort={false}
          className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Memory"
            dataKey="memory"
            cellRenderer={({ cellData }) => cellData}
            disableSort={false}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Size"
            dataKey="size"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Type"
            disableSort
            dataKey="type"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Write concurrency"
            disableSort
            dataKey="write_concurrency"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="Read concurrency"
            disableSort
            dataKey="read_concurrency"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="lookup max time"
            dataKey="lookup_max"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="lookup count"
            dataKey="lookup_count"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="insert max time"
            dataKey="insert_max"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
          <Column
            width={100}
            label="insert count"
            dataKey="insert_count"
            cellRenderer={({ cellData }) => cellData}
            className={'ets-table-cell'}
          />
        </Table>
      )}
    </AutoSizer>
  );
  }
}

export default TableView;

任何帮助将不胜感激！

Answer 1

一般来说，对于这类问题，我建议您创建一个 Plnkr 来演示您报告的问题。对于试图提供帮助的人来说，它比粘贴到问题中的一堆代码更有帮助。

话虽如此，您实际上并没有排序您的数据。您正在设置 state 然后期望 react-virtualized 对数据进行排序，但这不是库的工作方式。它从不修改数据。 Table 甚至只知道当前的排序信息，以便它可以显示正确的标题样式。

您实际上需要在某处对数据进行排序（例如componentWillUpdate）：

const { list } = this.context;
const sortedList = list
    .sortBy(item => item[sortBy])
    .update(list =>
      sortDirection === SortDirection.DESC
        ? list.reverse()
        : list
    )
  : list;