table sort js
1.22.1
説明:HTMLテーブル並べ替えライブラリを並べ替えるタイプの推論を備えたビルトインとブラウザー拡張機能を使用できます。 #vanillajs
デモ
ドキュメント。 (進行中の作業)
NPMパッケージ。とjsdelivr
FirefoxおよびChromeブラウザー拡張機能:訪問するWebサイトのテーブルは、ソート可能になります!
< script src = "https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js" > </ script >または非マイニファイドバージョン(サイズが大きいがデバッグが簡単だ!):
< script src = "https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.js" > </ script >HTMLでテーブルソートJSの使用方法の例
npm install table - sort - js import tableSort from "table-sort-js/table-sort.js" ;React.jsやvue.jsなどのフロントエンドフレームワークを使用してテーブルソートJSを使用する例
class="table-sort" HTML <table>タグに追加します。| <表>クラス | 説明 |
|---|---|
| 「テーブルソート」 | テーブルをソート可能にします! (単語、数字、日付、ファイルサイズ)... |
| 「テーブルアロー」 | 上昇または下降矢印を表示します。カスタム矢印をサポートします。たとえば、「Table-Arrows-⇈⇋⇊」 |
| 「ノークラスインファー」 | ソートクラスを自動的に追加するための推論をオフにします。 |
| 「覚えておいて」 | 異なる列をクリックすると、元の列のようなものを覚えている場合。 |
| 「セルソート」 | テーブルの行(TR)ではなくソートセル(TD);クラス/属性を備えたテーブルの行を整備するのに役立ちます。 |
| <th>クラス | 説明 |
|---|---|
| 「データソート」 | eg <td data-sort = "42">、データ属性でソートします。カスタムソートを実行するのに役立ちます。 |
| 「デート-Sort」 | 米国スタイルMM/DD/YYYY形式で日付を並べ替えます。例(12/28/2023)。 「/」または「 - 」をセパレーターとして使用できます。推測された「Dates-DMY-SORT」クラスを覆します。 |
| 「オンロードソート」 | ページの読み込みで列をソートします。ユーザーからのクリックをシミュレートします。 (1つの列のonloadのみをソートすることができます) |
| 「disable-sort」 | この特定の列でテーブルのソートを許可しません。 |
| <th>推定クラス。 | 説明 |
|---|---|
| 「数字ソート」 | 小数を含む数字をソート - 正、負(マイナス表現と括弧表現の両方)。 |
| 一般的な通貨($££€¥)およびパーセンテージサイン(0.39%)をサポートします | |
| 「日付-DMY-SORT」 | 日付をDD/mm/yyyy形式で並べ替えます。例(1995年18/10)。 「/」または「 - 」をセパレーターとして使用できます。 |
| 「日付-IMD-SORT」 | ISO 8601 yyyy/mm/dd形式で日付を並べ替えます。例(2021/10/28)。 「/」または「 - 」をセパレーターとして使用します。 |
| 「ファイルサイズソート」 | ソートファイルサイズ(b-> tib)はバイナリプレフィックスを使用します。 (例:10 b、100キブ、1ミブ);番号とプレフィックスの間のオプションのスペース。 |
| 「ランタイムソート」 | ランタイムを数分と秒で並べ替えます(10H 1m 20s)。 githubアクションの実行時間列を並べ替えるのに役立ちます... |
| デフォルトを変更する<th>クラス。 | 説明 |
|---|---|
| 「注文ごとに」 | 最初のクリックで下降して注文します。 (デフォルトはaescendingです) |
| 「アルファソート」 | アルファベット順にソート(Z11、Z2);デフォルトは自然な種類です(Z2、Z11)。 |
| 「パンクソート」 | 句読点を並べ替えます。デフォルトは句読点を無視します。 |
貢献したい場合は、インストール手順をここにあります。