ソート機能がある表の作成(JS前提)

とりあえず grid.js がシンプルで分かりやすいかな？

リファレンス

Grid.js
Data Tables
比較記事
- 10 Data Table Libraries for JavaScript in 2024

Grid.jsの例(index.html)

Grid.jsによる表(デモ)
- ソースコードは、こちらのindex.htmlを参照

<html>

  <head>
    <title>P.A.Works - test of data table - </title>
    <link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
  </head>

  <body>
    <div id="gridContainer"></div>

    <script>
      new gridjs.Grid({
	  columns: ['放映年', '番組名', '備考'],
	  search: true,  // 検索
	  sort: true,    // ソート
	  pagination: {  // ページネーション
	      limit: 10
	  },
	  data: [
	      ["2008","TRUETEARS",""],
	      ["2011","花咲くいろは","お仕事シリーズ第1段"],
	      ["2012","TARITARI",""],
	      ["2013","花咲くいろは劇場版",""],
	      ["2013","凪のあすから",""],
	      ["2014","グラスリップ",""],
	      ["2015","SHIROBAKO","お仕事シリーズ第2段"],
	      ["2017","サクラクエスト","お仕事シリーズ第3段"],
	      ["2018","さよならの朝に約束の花をかざろう",""],
	      ["2018","色づく世界の明日から",""],
	      ["2020","SHIROBAKO劇場版",""],
	      ["2021","白い砂のアクアトープ","お仕事シリーズ第4段"],
	      ["2023","駒田蒸留所へようこそ","お仕事シリーズ第5段"],
	  ],
      }).render(document.getElementById('gridContainer'));
    </script>
    
  </body>
  
</html>

リファレンス#

Grid.jsの例(index.html)#

リファレンス

Grid.jsの例(index.html)