Сортировка колонок в таблице с помощью sortBy (lodash)

139
07 ноября 2019, 10:50

Для сортировки колонок в таблице использую sortBy (lodash). Не могу додуматься как передать sortColumn из state компонента. Кто подскажет что не так? Вот код:

    import React from 'react';
import OrderRow from './OrderRow';
import userInfo from './userInfo';
import './css/table.css';
import SearchBar from './SearchBar';
const sortBy = require('lodash/sortBy');
class Table extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      filterText: '',
      order: require('../data/orders.json'),
      user: require('../data/users.json'),
      company: require('../data/companies.json'),
      sortColumn: 'card_type'
    };
    this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
  }
  handleFilterTextChange(filterText) {
    this.setState({
      filterText: filterText
    });
  }
  render() {
    const filterText = this.state.filterText;
    const user = this.state.user;
    const company = this.state.company;
    const order = this.state.order;
    const sortColumn = this.state.sortColumn;
    let rows = [];
        sortBy(order, c => c.sortColumn).forEach( order => {
          if (
            order.transaction_id.indexOf(filterText) === -1 &&
            order.total.indexOf(filterText) === -1 &&
            order.order_country.indexOf(filterText) === -1 &&
            order.card_type.indexOf(filterText) === -1 &&
            order.order_ip.indexOf(filterText) === -1 &&
            userInfo(order.user_id, user).indexOf(filterText) === -1) {
              return;
            }
            rows.push(
                  <OrderRow
                    user={user}
                    order={order}
                    company={company}
                    key={order.id}
                  />);
        });
  return (
    <table>
      <thead>
      <SearchBar
        filterText={this.state.filterText}
        onFilterTextChange={this.handleFilterTextChange}
        />
        <tr>
          <th>Transaction ID</th>
          <th>User Info</th>
          <th>Order Date</th>
          <th>Order Amount</th>
          <th>Card Number</th>
          <th>Card Type</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
        {rows}
      </tbody>
    </table>
  );
  }
};
export default Table
Answer 1

Вместо sortBy(order, c => c.sortColumn) надо sortBy(order, sortColumn)!

READ ALSO
Как собрать vue-проект в один js-файл?

Как собрать vue-проект в один js-файл?

нужно проект на vue собрать в один файл (например appjs) Для создания проекта использовал vue-cli-3 и команду vue create <my-project>

102
при поиске исчезает запятая в массиве

при поиске исчезает запятая в массиве

В общем при поиске, исчезает запятая если 2 должностиЕсли искать вручную имя, то запятая присутствует

96
Вспомогательные методы при отрисовке

Вспомогательные методы при отрисовке

Есть чат, в котором списком выводятся сообщения:

115
Не рабочий скрипт в GoogleSheets ,который показывает изменения в соседней ячейке/диапазоне

Не рабочий скрипт в GoogleSheets ,который показывает изменения в соседней ячейке/диапазоне

Этот вопрос уже поднимался в этой теме : не запускается скрипт И в конце дали рабочий скрипт,но проблема в том,что когда я начал его использовать...

94