DataTables

HTML/Blade:
<div class="bg-red-dark p-6 min-h-[611px]">
    <table id="clansTable" class="display">
        <thead>
            <tr role="row">
                <th class="dt-orderable-asc dt-orderable-desc dt-ordering-asc">Tag</th>
                <th class="dt-orderable-asc dt-orderable-desc dt-ordering-asc">Name</th>
                <th class="dt-orderable-asc dt-orderable-desc dt-ordering-asc">Founder</th>
                <th class="dt-orderable-asc dt-orderable-desc dt-ordering-asc">Points</th>
                <th class="dt-orderable-asc dt-orderable-desc dt-ordering-asc">Kills</th>
                <th class="dt-orderable-asc dt-orderable-desc dt-ordering-asc">Total Members</th>
            </tr>
        </thead>
        <tbody>
            @foreach($clans as $clan)
                <tr>
                    <td>{{ $clan->tag }}</td>
                    <td>{{ $clan->name }}</td>
                    <td>{{ $clan->founder->name }}</td>
                    <td>{{ $clan->points }}</td>
                    <td>{{ $clan->kills }}</td>
                    <td>{{ $clan->members_count }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

CSS:
@import "../../../node_modules/datatables.net-dt/css/dataTables.dataTables.css";
@import "../../../node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css";

JS:
import DataTable from "datatables.net-dt";
import "datatables.net-responsive-dt";

export function init() {
  renderIf("body#clans.index").then(() => {
    $("#clansTable").DataTable({
      responsive: true,
    });
  });
}