rails6 でのレコードを表示する際、頭文字を『あ,か,さ,た,な,は,ま,や,ら,わ』に分けて表示したい。横スクロール機能も付けたい。

Question

やりたいこと

Rails6でユーザーのレコードを取得し表示するとき
ユーザーの名前の頭文字を『あ,か,さ,た,な,は,ま,や,ら,わ』で分けて表示したい。

---

レコード取得後以下のようにインスタンス変数の配列に入れてあります

頭文字が『あ〜お』のユーザー
@users_a
頭文字が『か〜こ』のユーザー
@users_ka
頭文字が『さ〜そ』のユーザー
@users_sa
...

.
.
.

ただユーザーのレコードが『あ〜わ』まで全ているわけではない場合も考えられます。
今回の場合こうなってしまいます。

やりたい表示

• それぞれ『削除』の後に改行を入れたいです。
• 苗字の最初から削除までは改行したくないです。
• 結果、『あ〜を』までがページに収まらない場合、横スクロールで表示したいです。
• それぞれに対応する頭文字の苗字がない場合は、その頭文字は削除する。

　(例えば『か行』の苗字がいない場合、『か』の列を削除。『あ』のとなりが『さ』になる。)

試したこと

下記の2つを参考にいろいろやってみましたが
思ったような仕様になりません。

①
flexboxを使い、下記のURLを参考にしてCSSを書いた
https://hitoribucho.com/post/20180810213821

②
Bootstrapを使い、下記のURLを参考にしてクラスを付けてみた
https://studio-key.com/Bootstrap/tableDecoration05.html

.

.

.

.

すいませんが、どなたかご教授いただけたら幸いですm(__)m

Answer 1

CSSは苦手なので、その一歩手前まで。

まず @users_a、　@users_ka、、、をやめて @users['あ'],@users['か’」に入れるようにしてください。

<table>
 <tr>
   <% @users.each do | yomi, users | %>
     <% next unless users.present? %>
     <td><%= yomi %></td>
   <% end %>
 </tr>

で header 行をつくれば空の欄をなくせます。
データの方は、手抜き版ですと

  <tr>
   <% @users.each do | yomi, users | %>
     <% next unless users.present? %>
     <td>
      <% users.each do |user| %>
        <%= user.name %>
        <%= 変更のボタン %>
        <%= 削除のボタン %>
　      <br>
      <% end %>
     </td>
   <% end %>
 </tr>

Comments

[sanmi]

なるほど！
少しいじってみます！
ありがとうございますm(__)m