新）テーブル内検索実装

[shari-sushi]

• 登録データが増えると見ずらいため
• 各VTuberや各歌枠事のページをダイナミックルーティングで生成できるようにもしたいが、まずは低コストなテーブル内検索を実装する

TanStack Table: React Example: Filters

この0.5s待機いいね
[React] React Table で テーブル内のファジー（あいまい）検索 をしてみる | 心を無にして始める React

検索用の入力フォームに文字を入力されると、検索を実行して結果を表示します。
検索方法には「入力された文字列が含まれているか」を採用します。

また、検索用の入力フォームに文字を入力して 0.5秒間 変化がなければ、検索を実行するようにします。
（入力中はすぐに検索せず、待機させます。）

[shari-sushi]

TanStack TableのReact Tableでリッチなテーブルを実装してみる
こっちの方が分かりやすいというか、ピンポイントで即導入しやすい

けど、ドロップダウンはないので、まずfilterの理解に使う

---

react-tableはv8(最新)からtanstack-tableに名前を変えたらしい

ちょこちょこ構造変わってて互換性無かった。
組み合わせるのもきつそうだった。

なので以上で記載したサイト全部使えない。
PoCまではやって、実装本番の時に気づいた…

[shari-sushi]

以下、v7の

filter機能

• GitHub
• sundbox

[shari-sushi]

sundbox開いてみたらreference error出てるが…

別でそれっぽいのあった
https://codesandbox.io/p/sandbox/react-table-7-filter-column-267ys?file=%2Fsrc%2FPages.js%3A2%2C38

もっと良いのあった
https://codesandbox.io/p/sandbox/react-table-v7-manual-filters-uffnq?file=%2Fsrc%2FApp.js%3A97%2C19-97%2C81

もっと良いのあったその２
https://medium.com/@thewidlarzgroup/react-table-7-sorting-filtering-pagination-and-more-6bc28af104d6

だけど、わからん…。

ただ、ふと思ったのが、使用しやすいようにカラムの並びはVTuber→歌枠→歌ではないので直感的に検索しにくくなる。

そして、VTuberと歌枠の両方で絞り込むとき、目当て以外の歌枠が選択肢に出てくると、あまりに不便ではないのだろうか。

となると既存の

の機能を流用したほうが、実装コストを低く、ユーザー体験を高められると思う。

[shari-sushi]

思ったより手間だなw

想定される状態

No.	状態	V Drop	M Drop	K Table
1	no selected	選択肢表示	何も表示しない	全て表示
2	V選択	-	Vでfilter	Vでfilter
3	V, M選択	-	-	M(url)でfilter

必要な処理

• 何も選択していない状態の認識
• Vを選択している状態の認識
• Mを選択している状態の認識

[shari-sushi]

進捗

• 済
  • filter機能はok
• 未
  • vtuberの選択解除したときにmovieの選択も解除されるように
  • css

https://gyazo.com/3614e5fab4548eb114a3b99755c10520

---

ただ、ここでこの開発は一時停止とする。
このページを既存/sing/karaokeとは別で用意し、/sing/karaokeに「開発中」としてリンクを配置する

そして、VTuber毎のページ作製を優先する。 #149

[shari-sushi]

でも実質完成だからつくり切ることにしたやってしまった←
（vtuberの選択解除したときにmovieの選択も解除されるようにはそもそも別の機能でも技術的に分からなかったとこで、今回も実装できる前提で考える必要は無かった。…負債である。）

また、当ページに登録を促すリンクを作成したが、肝心の/crud/createで非ログイン状態で会員登録を促すものがなく、非常に分かりにくいことになっていた。
'/profile'のログインが必要なコンテンツですの表示を共通化して、ちょっとUX改善した上で使いまわすことにする。

[shari-sushi]

データ登録を促すリンクを作成した関係で、
ついでに
非ログイン中の会員用コンテンツレイアウト作成・配置
もしてしまった。
本来はissue, branch分けるべきなんだけども。