可排序 Headers 语义 UI

Question

我正在尝试使用 https://react.semantic-ui.com/collections/table/#variations-sortable

获取我的 table 列 sortable

但我对如何设置要映射的数据有点迷茫。本质上，我不知道如何像他们的示例那样将我的数据放入 tableData 中，然后能够像他们在示例中那样进行排序。

我觉得它必须是非常简单的东西，我想多了。下面是我的代码，其中设置了列，当您单击排序箭头时可以正常工作，但数据没有任何变化。

import React, { Component } from 'react';
import {
  Table,
  Button,
} from 'semantic-ui-react';
import firebase from 'firebase';
import Router from 'next/router';
import _ from 'lodash';

export default class TransactionListingSLice extends Component {
  static editForm(path) {
    Router.push(path);
  }

  constructor(props) {
    super(props);

    this.state = {
      transactions: [],
      column: null,
      direction: null,
    };
  }

  componentDidMount() {
    this.getTransactions();
  }

  getTransactions() {
    const returnData = [];
    const {
      listType,
    } = this.props;

    firebase
      .firestore()
      .collection(listType)
      .get()
      .then((transactions) => {
        const data = transactions.docs.map((doc) => {
          const docData = doc.data();
          return {
            id: doc.id,
            activeRevision: docData.activeRevision,
          };
        });


        const fbPromises = [];

        _.each(data, (doc) => {
          fbPromises.push(
            firebase
              .firestore()
              .collection(listType)
              .doc(doc.id)
              .collection('Revisions')
              .doc(doc.activeRevision)
              .get()
              .then((formData) => {
                returnData.push(
                  _.merge({}, doc, formData.data()),
                );
              }),
          );
        });

        if (!_.isEmpty(fbPromises)) {
          Promise.all(fbPromises).then(() => {
            this.setState({ transactions: returnData });
          });
        }
      });
  }

  handleSort = clickedColumn => () => {
    const { column, data, direction } = this.state;

    if (column !== clickedColumn) {
      this.setState({
        column: clickedColumn,
        data: _.sortBy(data, [clickedColumn]),
        direction: 'ascending',
      });
      return;
    }

    this.setState({
      data: data.reverse(),
      direction: direction === 'ascending' ? 'descending' : 'ascending',
    });
  }

  render() {
    const { transactions } = this.state;
    const {
      listType,
    } = this.props;
    const { column, direction } = this.state;
    console.log('-------');
    console.log(transactions);
    console.log('----END----');
    const path = (listType === 'BuyerTransactions') ? 'buy' : 'sell';

    return (
      <div>
        <Table sortable compact singleLine>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell
                sorted={column === 'Primary' ? direction : null}
                onClick={this.handleSort('Primary')}
              >
                Primary Name

              </Table.HeaderCell>
              <Table.HeaderCell
                sorted={column === 'Transaction' ? direction : null}
                onClick={this.handleSort('Transaction')}
              >
                Transaction ID

              </Table.HeaderCell>
              <Table.HeaderCell
                sorted={column === 'Form' ? direction : null}
                onClick={this.handleSort('Form')}
              >
                Active Form
              </Table.HeaderCell>
              <Table.HeaderCell
                sorted={column === 'Step' ? direction : null}
                onClick={this.handleSort('Step')}
              >
                Active Step

              </Table.HeaderCell>
              <Table.HeaderCell
                sorted={column === 'Name' ? direction : null}
                onClick={this.handleSort('Name')}
              >
                Seller Name

              </Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {transactions
              && transactions.map(
                transaction => transaction && (
                  <Table.Row key={transaction.id}>
                    {_.has(transaction.involvedParties, 'prime') && (
                      <Table.Cell>{transaction.involvedParties.prime}</Table.Cell>
                    )
                    }
                    <Table.Cell>{transaction.id}</Table.Cell>
                    <Table.Cell>{transaction.activeForm}</Table.Cell>
                    <Table.Cell>{transaction.activeStep}</Table.Cell>
                    <Table.Cell>HERE</Table.Cell>
                    <Table.Cell>
                      <Button
                        color="grey"
                        onClick={() => TransactionListingSLice.editForm(`/app/${path}/${transaction.id}`)}
                      >
                        Edit
                      </Button>
                    </Table.Cell>
                  </Table.Row>
                ),
              )}
          </Table.Body>
        </Table>
      </div>
    );
  }
}

Answer 1

在渲染函数中，您使用状态中的交易字段，但在 handleSort 中，您试图对数据字段进行排序。我认为这是主要问题 ;)

可排序 Headers 语义 UI

Sortable Headers Semantic UI

sorting

reactjs

semantic-ui