Handsontableの dropMenu 及び、条件フィルタは、バージョン 7.0.0 以降から利用可能で
かなり Excel 同様の条件フィルタに操作性が近づいている。
Handsontable インスタンス生成のオプションで、filters: true と dropdownMenu: true を付与する。
バージョン 7 以降、無償版として使うには、
licenseKey: 'non-commercial-and-evaluation'
をオプションとして記述も必要
var data = [ [ 'Apple', 180, '2021/08/15' ], [ 'Lemon', 80, '2021/07/09' ], [ 'kiwi', 90, '2021/08/31' ], [ 'Fish', 260, '2021/07/30' ], [ 'banana', 320, '2021/08/21' ], [ 'Meron', 520, '2021/08/24' ], ]; var hot = new Handsontable(document.getElementById("table"), { data: data, columns:[ { type: 'text' }, { type: 'numeric' }, { type: 'date', dateFormat: 'YYYY/MM/DD' }, ], colHeaders: ["A", "B", "C" ], copyPaste: true, autoColumnSize: true, filters: true, dropdownMenu: true, licenseKey: 'non-commercial-and-evaluation', });
でも、このままでは、英語のままである。
ドキュメント:Column filter - Guide - Handsontable Documentation
のとおり、
dropdownMenu: true, を以下のように
dropdownMenu: ['filter_by_condition', 'filter_action_bar'],
とすることで、
条件フィルタだけにはなる。
本題:これらメニュー表示を日本語化する
Handsontable 配布をダウンロードして同梱されている言語パックを適用する。
配布物の中に、languages というフォルダがあるはずだ。
その中に、日本語用に、
ja_JP.js
または、
ja_JP.min.js
があるので、ja_JP.min.js 読むようにする。
インスタンス生成のオプションで、language: を指定する。
var hot = new Handsontable(document.getElementById("table"), { data: data, language: 'ja-JP',
すると、、日付のセルでは、、
この条件のプルダウンは、、、
数値のセルでは、、、
文字列のセルでは、、、
ANDも指定できる
dropdownMenu: ['filter_by_condition', 'filter_action_bar'],
だけにした場合は、、、
を表示する。
dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
にした時は、、