# ソート機能の実装
GROWIの管理画面のUserTableに、カラムごとにソート機能を追加した
![Screen Shot 0002-04-06 at 12.14.45.png](/attachment/5e8aadc15245e70048c22c7e)
## SortIcoins.jsx
まず、ソート機能を他のページでも使用することができるように、SortIcons.jsxと言うファイルを作成した。

- ソートされていない(default)状態では、細いマークが表示される  
![Screen Shot 0002-04-07 at 10.25.06.png](/attachment/5e8bd67bccdfb10048db43a5)
fa-angle-up(上のアイコン) / fa-angle-down(下のアイコン)

- (昇順/降順)ボタンをクリックするとアイコンが太くなるようにしたい  
![Screen Shot 0002-04-07 at 10.26.10.png](/attachment/5e8bd6d1ccdfb10048db43a6)fa-chevron-up(昇順されている状態)
![Screen Shot 0002-04-07 at 10.26.24.png](/attachment/5e8bd6dbccdfb10048db43a7)fa-chevron-down(降順されている状態)


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

```jsx:SortIcons.jsx
import 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

```jsx:UserTable.jsx
return (
      <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>
      );
...((省略))...
```
```jsx: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の値を変更
```js:AdminUsersContainer.js
  async sort(sort, isAsc) {   
    const sortOrder = isAsc ? 'asc' : 'desc';
    await this.setState({ sort, sortOrder });
    this.retrieveUsersByPagingNum(1);
```

おしまい

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/開発日記/ソート機能の実装
- Permalink: https://tips.weseek.co.jp/5e8aadc15245e70048c22c7c
- Parent: [開発日記](/5e3d294bcff797004b16abba.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 20 total
  - [GROWIのAPIを使用したアプリケーション](/5e5bd0e3e7f8db0048df3a08.md)
  - [GitとGitHubの違い](/5e417dcadecd0a0049953ad7.md)
  - [LDAP攻略への道](/5e48b2561ec5e4004811d4e9.md)
  - [Migrationsファイルを作成する](/5e9d1dc7b682620049e55a64.md)
  - [QiitaでGROWIが設計書システムとして紹介されました](/5e535a04eb17ce0048b9fb13.md)
  - [UserManagement](/65069da24603e7ff39a6b3d2.md)
  - [aタグ以外での画面遷移](/5e9cfd51b682620049e55a5d.md)
  - [jestを使ったテストを初実装しました](/5ef1ed225eea4b004a1912b2.md)
  - [npm とyarn の違いを簡単に説明](/5e3e6822591d7f0048b3cc5e.md)
  - [react-card-flipを使って回転するカードレイアウトを作る](/5ebaa05ad3055000488bd526.md)
  - [throttleでスクロールイベントを間引く](/5e8de43931511b0048ecf612.md)
  - [vuepressのテンプレート内で二重波括弧をエスケープ](/5f16ecf4c2f6150048b2955b.md)
  - [なぜsetStateをComponentDidMountで使用してはいけないのか](/5eb7728458c8ea00480d0825.md)
  - [アジャイルとウォーターフォール](/5e4137d343c1c400499b6bac.md)
  - [セルフレビューはどこまで確認しようか](/5e3d2adfcff797004b16abbe.md)
  - [タスクを円滑にこなすために必要な垂れ流しとは](/5e47a18a927c020048448a18.md)
  - [ページ内リンクの実装](/5e93c9d511007300489677ff.md)
  - [レビュー依頼する際に確認すること](/5e3ae41225751e00499297f6.md)
  - [動作確認用にページをたくさん作りたい](/5f80326633588b0048eaf865.md)
  - [間違えてマージしてさらにプッシュしちゃった](/5e9d176db682620049e55a60.md)
- Last updated: 2020-04-07T01:27:01.095Z by deleted_at_1715747466121
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e8aadc15245e70048c22c7c