Ruby on Rails 6 に datatables を導入したい

前提・実現したいこと

https://atcoder.jp/ranking
このようなフィルタ付きのランキング表を作成したいと思って色々と調べていたところ、jquery の datatables が良さそうだったのでこれを導入したいです。現在 bootstrap 5 を用いて開発しているので、 rails6 bootstrap5 に対応した datatables を入れたいのですが、この方法が分かりません。
色々調べてどうやらwebpackを利用するとのことで、bootstrap5 を入れるときも使ったのですが、rails初心者なので良くわかっていません。

試したこと１

https://datatables.net/download/
公式サイトを見ましたが、具体的にrailsで入れる場合にどうすればいいのかよく分かりませんでした。

試したこと２

https://qiita.com/syukan3/items/5ac9f0d1b43334b5eb13
例えばこれは、恐らくrails5以下のバージョンであり、bootstrap3を使っていて、かつビューにslimを使っていたので飛ばしました。当方はerbを用います。

試したこと3

https://aarvy.me/blog/2019/09/21/datatables-with-bootstrap-4-minimal-setup-in-rails-6/
これは bootstrap4 ですが、試してみたところ

// app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('datatables.net-bs4')

import $ from 'jquery';
global.$ = jQuery;

のところで、

import $ from 'jquery';

がVScodeでは灰色になり、次の警告文が発生しました。

'$' が宣言されていますが、その値が読み取られることはありません。ts(6133)

そこで導入を諦めました。

試したこと４

https://stackoverflow.com/questions/57964095/rails-6-webpack-datatables-jquery
これも同様のことかと思ったのですが、具体的にどうすればいいのか分かりませんでした。

教えてもらいたいこと

１. rails初心者で、初めてwebアプリを作っています。その際、
https://atcoder.jp/ranking
このようなランキング表を作りたくて調べたところ、datatablesを見つけましたが、もし他にrails開発で使いやすくて見た目の良い表を作れるものがあれば教えて欲しいです。要件は次のものです
・フィルタリング可能
・ソート可能
・bootstrapなどを用いて見た目が簡単に整えられる

２. rails6 bootstrap5 を用いているものへの datatables　の導入の仕方を教えて欲しいです。webpackerを使うようですが、よく分かりません。既にjqueryとbootstrap5は導入済みです。

補足情報（FW/ツールのバージョンなど）

Rails 6.1.4.1
Mac os BigSur
"jquery": "^3.6.0",
"bootstrap": "^5.1.0",

mather

2021/08/26 04:25

> '$' が宣言されていますが、その値が読み取られることはありません。ts(6133) これは import で宣言しただけでまだ使ってないよ（不必要なら消していいのでは？）、という親切なメッセージです。エラーではありません。調べたけどわからないから何もしなかった、エラーが怖いので使わなかった、正解を教えて欲しい、というのは何も学びにならないと思いますので、できればまずはご自身で挑戦してみてください。