ソート機能の実装

GROWIの管理画面のUserTableに、カラムごとにソート機能を追加した

SortIcoins.jsx

まず、ソート機能を他のページでも使用することができるように、SortIcons.jsxと言うファイルを作成した。

ソートされていない(default)状態では、細いマークが表示される
fa-angle-up(上のアイコン) / fa-angle-down(下のアイコン)
(昇順/降順)ボタンをクリックするとアイコンが太くなるようにしたい
fa-chevron-up(昇順されている状態) fa-chevron-down(降順されている状態)

このファイルでは、クリックによってアイコンの表示が切り替わり、昇順か降順かを指定する。

SortIcons.jsximport React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';

const SortIcons = (props) => {

  const { isSelected, isAsc } = props;

  return (
  
　//ascの場合： isAscがtrueの場合は太い上矢印アイコン、falseの場合は細い上矢印アイコンを表示
    <div className="d-flex flex-column text-center">
      <a
        className={`fa ${isSelected && isAsc ? 'fa-chevron-up' : 'fa-angle-up'}`}
        aria-hidden="true"
        onClick={() => props.onClick('asc')}
      />
      
　//descの場合： isAscがtrueの場合は太い下矢印アイコン、falseの場合は細い下矢印アイコンを表示
      <a
        className={`fa ${isSelected && !isAsc ? 'fa-chevron-down' : 'fa-angle-down'}`}
        aria-hidden="true"
        onClick={() => props.onClick('desc')}
      />
    </div>
  );
};

SortIcons.propTypes = {
  onClick: PropTypes.func.isRequired,
  isSelected: PropTypes.bool.isRequired,
  isAsc: PropTypes.bool.isRequired,
};


export default withTranslation()(SortIcons);

UserTable.jsx

UserTable.jsxreturn (
      <Fragment>
        <table className="table table-default table-bordered table-user-list">
          <thead>
            <tr>
              <th width="100px">#</th>
              <th>
                <div className="d-flex align-items-center">
                  <div className="mr-3">
                    {t('status')}
                  </div>
                  <SortIcons
                    isSelected={adminUsersContainer.state.sort === 'status'}
                    isAsc={isCurrentSortOrderAsc}
                    onClick={(sortOrder) => {
                      this.sortIconsClickedHandler('status', sortOrder);
                    }}
                  />
                </div>
              </th>
              <th>
                <div className="d-flex align-items-center">
                  <div className="mr-3">
                    <code>username</code>
                  </div>
                  <SortIcons
                    isSelected={adminUsersContainer.state.sort === 'username'}
                    isAsc={isCurrentSortOrderAsc}
                    onClick={(sortOrder) => {
                      this.sortIconsClickedHandler('username', sortOrder);
                    }}
                  />
                </div>
              </th>
...((省略))...
          </table>
        </Fragment>
      );
...((省略))...

UserTable.jsx  sortIconsClickedHandler(sort, sortOrder) {
    const isAsc = sortOrder === 'asc';　//isAscはsortOrderがascの時trueになる

    const { adminUsersContainer } = this.props;
    //adminUserContainersortメソッドを呼ぶ
    //sortにはカラム名、isAscにはtrueかfalseが入る
    adminUsersContainer.sort(sort, isAsc);
  }

AdminUsersContainer.jsx

①どのカラム(sort)か、②昇順か降順か(isAsc)を確認して、stateの値を変更

AdminUsersContainer.js  async sort(sort, isAsc) {   
    const sortOrder = isAsc ? 'asc' : 'desc';
    await this.setState({ sort, sortOrder });
    this.retrieveUsersByPagingNum(1);

おしまい