Nervous Parrot Muttering

    mui-drip-table

    1.0.1 • Public • Published

    - material-uiを使用したフルスタックなテーブルコンポーネント -

    NPM

    Downloads Build Status Coverage Status Codacy Badge MIT License


    インストール

    ・パッケージ本体

    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 データの表示をカスタム。

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

    詳細

    Install

    npm i mui-drip-table

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    53.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • kento75