インストール

・パッケージ本体

npm install mui-drip-table

・依存パッケージ

npm install @material-ui/core @material-ui/icons

デモページ

・demo

・sample code

変更履歴

・CHENGE_LOG

機能

・テーブル一覧表示
・カラムソート
・フィルタリング
・ページネーション
・表示行数制御
・行選択
・検索
・削除
・CSVダウンロード
・プリント

API

<DripTable />

サポートするprops:

|Name|Type|Description |:--:|:-----|:-----| |title|array|テーブルタイトル。 |columns|array|テーブルヘッダー。文字列の配列または、オプションを含むオブジェクト。 |data|array|テーブルデータ。文字列の配列。 |options|object|テーブル機能の制御を設定。

Options:

|Name|Type|Default|Description |:--:|:-----|:--|:-----| |filterType |string|'dropdown'|フィルタリングタイプを指定。 "checkbox"、"dropdown"、"multiselect"の3種類 |textLabels |object||ラベルを指定。詳細 |pagination|boolean|true|ページネーション機能の有効・無効。 |selectableRows|boolean|true|行選択機能の有効・無効。 |caseSensitive |boolean|false|検索アクション実行時、大文字と小文字の区別の有効・無効。 |responsive|string|'stacked'|ヘッダーのタイプを指定。 "stacked"、"scroll"の2種類 |rowsPerPage|number|10|1ページ当たりの最大表示行数。 |rowsPerPageOptions|array|[5,10,15,100]|表示行数選択項目。 |rowHover|boolean|true|行のホバー有効・無効。 |sortFilterList|boolean|true|フィルタリストのソート有効・無効。 |sort|boolean|true|列のソート有効・無効。 |filter|boolean|true|フィルターアイコン表示の有効・無効。 |search|boolean|true|検索アイコン表示の有効・無効。 |print|boolean|true|プリントアイコン表示の有効・無効。 |download|boolean|true|ダウンロードアイコン表示の有効・無効。 |onRowsSelect|function||行選択実行後の後続処理を設定。詳細 |onRowsDelete|function||行削除実行後の後続処理を設定。詳細 |onChangePage|function||ページネーション実行後の後続処理を設定。 |onChangeRowsPerPage|function||表示行数変更後の後続処理を設定。 |onSearchChange|function||検索実行後の後続処理を設定。 |onFilterChange|function||フィルター設定変更時の後続処理を設定。 |onColumnSortChange|function||ソート実行時の後続処理を設定。 |onColumnViewChange|function||表示カラムの変更後の後続処理を設定。

Column:

|Name|Type|Description |:--:|:-----|:-----| |Name|string|テーブルヘッダーに表示されるカラム名 |options|object|テーブル機能の制御を設定。下記オプション項目を参照。

Column Options:

|Name|Type|Default|Description |:--:|:-----|:--|:-----| |display|boolean|true|カラム表示の有効・無効。 |filter|boolean|true|フィルター機能の有効・無効。 |sort|boolean|true|ソート機能の有効・無効。 |customRender|function||データの表示をカスタム。

テーブルスタイルのカスタマイズ

・詳細