mui-datatablesについての忘備録

前書き

mui-datatablesに関することをメモしていきます。
必要なことのみメモしますので歯抜けなことや、調べながらかいているので間違っていることなどがあります。

参考サイトです。
https://github.com/gregnb/mui-datatables
https://www.npmjs.com/package/mui-datatables#muidatatable-

---

オプション (propsのoptionsの値)

ツールバーの各項目をオプション

名前	説明
download	ダウンロードアイコン
print	印刷アイコン
viewColumns	viewColumnsアイコン
filter	フィルターアイコン
search	検索アイコン
searchOpen	最初は検索バーが表示
searchAlwaysOpen	検索バーを表示し、ツールバーの検索アイコンを非表示

ツールバーすべて非表示

const options = {
      download : false,
      print: false,
      viewColumns:false,
      filter: false,
      search: false,
}

---

各列のオプションの有効無効

名前	説明
filter	列をデフォルトフィルターポップアップに表示・非表示
sort	列のソート

Name列ソート無効・フィルター非表示

const columns = [
      {
        name: 'Name',
        options: {
            filter: false,
            sort: false,
        },
    },
}

フィルターボタンを外部に作成

/*
 props:url:url
 props:filterList:フィルターの値リスト
 filter済みテーブルデータが返す
 ここはバックエンドで別ファイルに記入
*/
xhrRequest = (url, filterList) => {
    return new Promise(resolve => {
        window.setTimeout(
            () => {
                const data = theData;
                if (filterList.reduce( (accu, cur) => accu + cur.length, 0) === 0) {
                    resolve({ data });
                } else {
                    /*
                      This code simulates filtering that would occur on the back-end
                    */
                    var filteredData = data.filter(row => {
                        var ret = true;
                        for (var ii = 0; ii <= 4; ii++) {
                            if (filterList[ii] && filterList[ii].length) {
                                ret = ret && filterList[ii].filter(ff => {
                                    return row[ii] == ff;
                                }).length > 0;
                            }
                        }
                        return ret;
                    });
                    resolve({ data: filteredData });
                }
            },
            2000
        );
    });
}
/* 
 props:filterList:フィルターの値リスト
 xhrRequestにfilterListを渡すとfilter済みテーブルデータが返る
 filter済みテーブルデータをテーブルにセットする
 
*/
filterexe = (filterList) =>{
    this.xhrRequest(`/myApiServer?filters=${filterList}`, filterList).then(res => {
        console.log(filterList);
        this.setState({ isLoading: false, data: res.data });
    });
}

/* 
フィルター対象の列分配列作成　
対象列のインデックスの配列にフィルターの値を入力
*/
<button onClick={() => this.filterexe([
    ['1列目の値'],
    ['2列目の値'],
    ['3列目の値'],
    ['4列目の値'],
    ['5列目の値'],
])}>

こちらのコードから抜き出し

---