<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="product-list">
  <div id="list-header">
    <p>並び替え:</p>
    <button  class="sort sort-name" data-sort="name">商品名</button>
    <button  class="sort sort-price" data-sort="price">価格</button>
    <button  class="sort sort-produced" data-sort="produced">産地</button>
    <button  class="sort sort-crop" data-sort="crop">クロップ</button>
  </div>
  <ul class="list-flex list">
    <li>
      <div>
        <img src="https://gggzqa.db.files.1drv.com/y4mPH55th_NVXQ8wCq7-l68529CCpuWI_6Pv2VD7fK6Pq1exQZadTNh3ZKN-jt_TLY7kHbIKtbQ_KHLWq4Z7rt4hhKw8CiR9B3mjDcPUUEDdQtpPU6FrHaiLv_mvTOsIl8ismBI6Nt4UP3NrTIY-cjvtm_PJiWWsdDharobbaNevjSAgjztHgSf1vanMpVPdNxYD5d1roDde2P_M16Q-EPWAg?width=660&height=439&cropmode=none">
        <table>
          <tbody>
            <tr>
              <th>商品名</th>
              <td class="name">ブルーマウンテン</td>
            </tr>
            <tr>
              <th>価格</th>
              <td class="price">1500円</td>
            </tr>
            <tr>
              <th>産地</th>
              <td class="produced">ジャマイカ</td>
            </tr>
            <tr>
              <th>クロップ</th>
              <td class="crop">2019</td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>
     <li>
      <div>
        <img src="https://fwgzqa.db.files.1drv.com/y4mpDpaeuWDGil8-F-5kDuvF2k12mMysPRISfKMhowQlG5llJFNjSGshF_7LREZTlTsiialVyCgNUwO7L31rxjENs8daUMEQiWS2t7mDgroEmlPSWNmHy-0z6wBOBkHLgQLj8lyOntoy0A7Oo5YDIkQtBgNfjWFnNQ5ecnZrCBlcSoJfFAQObigy3QRHVSR1vFZwqZ9g4xxBrsFIehSYlQwfw?width=660&height=439&cropmode=none" alt="">
        <table>
          <tbody>
            <tr>
              <th>商品名</th>
              <td class="name">キリマンジャロ</td>
            </tr>
            <tr>
              <th>価格</th>
              <td class="price">1200<span>円</span></td>
            </tr>
            <tr>
              <th>産地</th>
              <td class="produced">タンザニア</td>
            </tr>
            <tr>
              <th>クロップ</th>
              <td class="crop">2018</td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>
     <li>
      <div>
        <img src="https://egjoca.db.files.1drv.com/y4mcsvhzzv54DZEJD-Ms6W2doXzYDlJylAsDRxCqaQSAKp35u9sc8M09ImWxfN4hEPyBLttIfZ3aNOjguyYwX4M0OsBsyk6ckDLfYPsy9Ru4rFr9J4t2JEb-DBDctb3f5v15JjBHE0gXHEHg92bquXTkgRJMXW8jBMVSagCBQ6M9FA1hHqetw6kxA9ABvdcR1_ZSGD9g13VZoF2iqkizXrxAQ?width=660&height=438&cropmode=none">
        <table>
          <tbody>
            <tr>
              <th>商品名</th>
              <td class="name">モカ</td>
            </tr>
            <tr>
              <th>価格</th>
              <td class="price">1000<span>円</span></td>
            </tr>
            <tr>
              <th>産地</th>
              <td class="produced">エチオピア</td>
            </tr>
            <tr>
              <th>クロップ</th>
              <td class="crop">2017</td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>
     <li>
      <div>
        <img src="https://fmgzqa.db.files.1drv.com/y4miWjQP5Q-rOprTVSJn7PBcby49U_D2XhDeZtXHnIiv6YNPqvzQQCybJdZvGiv3wOW57X8Y6r2x1DhDOClFq-kK0CHrg6LgL6g780d0IU4Gq8ostS2vHD4Ti4-uy0YslH8Wf_IL64WIymPLKMC4E1Pfup4h-hBvYUR66nxKqWeV-C4w1Zco3yuYlfU9Ce3UOEix1E_jY898l3sDCmvth1mjw?width=534&height=357&cropmode=none" alt="">
        <table>
          <tbody>
            <tr>
              <th>商品名</th>
              <td class="name">マンデリン</td>
            </tr>
            <tr>
              <th>価格</th>
              <td class="price">1300<span>円</span></td>
            </tr>
            <tr>
              <th>産地</th>
              <td class="produced">インドネシア</td>
            </tr>
            <tr>
              <th>クロップ</th>
              <td class="crop">2020</td>
            </tr>
          </tbody>
        </table>
      </div>
    </li>
  </ul>
  <ul class="pagination"></ul>
</div>

body {
  width: 1000px;
}
.list-flex li {
  list-style: none;
  padding: 0px 0px 10px 0px;
  margin-right: 10px;
  box-shadow: 1px 1px 3px  rgba(0,0,0,.2);
  border-radius: 5px;
}
img {
  width: 100%;
  height: 200px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.list-flex li {
  width: 300px;
  margin-bottom: 20px;
  background-color: #FFF4E0;
}

.list-flex {
  display: flex;
  flex-wrap: wrap;
  justify-contetnt: space-between;
  text-align: center;
}

.list-flex table {
  margin: 0 auto;
  width: 250px;
  border-collapse: collapse;
}

th {
  text-align: left;
  width:40%;
  height: 30px;
}

th,td {
  border-bottom: 2px solid rgb(208,64,55);
}

tr:nth-child(2) th, tr:nth-child(2) td {
  border-color:  rgb(43,152,203);
}

tr:nth-child(3) th, tr:nth-child(3) td {
  border-color:  rgb(227,165,74);
}

tr:nth-child(4) th, tr:nth-child(4) td {
  border-color:  rgb(114,180,76);
}

#list-header {
  text-align: center;
  margin-bottom: 40px;
}

#list-header p {
  display: inline-block;
  margin-right: 20px;
}

.sort {
  width: 150px;
  border-radius: 30px;
  height: 40px;
  font-size: 1.025em;
  font-weight: bold;
  border: none;
  color: white;
  background-color:rgb(208,64,55);
}

.sort-price {
  background-color: rgb(43,152,203);
}

.sort-produced {
  background-color: rgb(227,165,74);
}

.sort-crop {
  background-color: rgb(114,180,76);
}

.sort:focus {
  outline:none;
}
.sort:after {
  display:inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  content:"";
  position: relative;
  top:4px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  content:"";
  position: relative;
  top:-4px;
  right:-5px;
}
.pagination {
  display: flex;
}
.pagination li {
  list-style: none;
  border: 1px solid #555;
  margin-right: 10px;
}

.pagination li a {
  text-decoration: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  width: 40px;
  height: 40px;
  color: #000;
  transition: .5s;
}

.pagination li a:hover,
.pagination li a:focus {
  background-color: #555;
  color: #fff;
}

.pagination .active a {
  background-color: #555;
  color: #fff;
  pointer-events: none;
}

var options = {
  valueNames: [ 'name','price','produced','crop'],
  page: 3,
  pagination: true
};

var userList = new List('product-list',options);