Material UIのTableをさっそく使ってみて

Material UI v0.9.2でTableコンポーネントが追加されました。

Table - Material UI

f:id:umi-uyura:20150625130056p:plain

ちょうどデータの閲覧ツール的なものを作っていたこともあり、これを使うと見た目が整理できて良さ気だな、と思ったのですが、まだ First iteration と言っているくらいなので、まだまだ未実装の部分や不具合っぽいです。

まあ開発速度は早いので、この辺りもすぐに修正されてくるのではと思いますが、遭遇したことをメモっておきます。

行選択チェックボックスが消せない

公式サイトのサンプルを見るとわかるのですが、主に複数選択時などに使うと思われるチェックボックスがあります。

当初自分的には、行を選択しておこなうアクションは不要だったので、このチェックボックスを消したいなーと思って、それらしいプロパティをいくつか試したのですが…

showRowSelectCheckbox

行の選択チェックボックスの表示を切り替える？どちらかと言うとTableではなくRowのプロパティな気もしますが、 false に設定しても変化なし。

ソースを検索してみても、定義されているけど参照している箇所がないので、まだ実装されていないのかな、という感じです。

displaySelectAll

全ての選択チェックボックスの表示を切り替える？ false にしたところ、確かに「全て選択」のチェックボックスだけ消えました。

f:id:umi-uyura:20150625130114p:plain

・・・いや、これ意味あるんでしょうか。

カラムがズレるのが不具合なのか、行のチェックボックスも一緒に消えてくれないのが不具合なのか、微妙に判断できませんが…

canSelectAll

全選択できるかどうか。 false にすると、全選択チェックボックスが無効になります。

当然、行のチェックボックスは消えません。

f:id:umi-uyura:20150625130124p:plain

暫定対処

いずれ修正される（というか実装される）と思いますが、とりあえず非表示にするだけなら、Material UIのソースに手をいれることで対処できます。

node_module/material-ui/lib/table/table-row.js がTableの行を扱うコンポーネントのようですが、そのPropsにある displayRowCheckbox が本来その役目を持っているもののようなので、そのデフォルト値を変更してあげれば消えてくれます。

getDefaultProps: function getDefaultProps() {
  ...
  return {
    ...
    displayRowCheckbox: false       // <-- trueから変更
  };
},

f:id:umi-uyura:20150625130141p:plain

今見たら修正のPull Requestも取り込まれているようなので、次回のリリースでは修正されていそうな気配。

行選択イベントが複数回発生する

現状、スタイルの都合もあって、長めの文字列が入ってくると省略表示になってしまうようです。

f:id:umi-uyura:20150625130150p:plain

CSSをいじって調整することもできますが、あまり手を入れ過ぎると、今後のアップデートで影響が出てしまうかもしれないので、行をクリックしたらダイアログで詳細画面を表示することにしたのですが。

ドキュメントを見たら、それらしい onRowSelection というイベントがあったので、これをハンドリングするようにしてみたのですが。

なぜか、行を1回クリックしているだけなのに、3回イベントハンドラが呼び出されました。

暫定対処

しかたがないので、セルをクリックした際のイベント onCellClick を使ってみたところ、問題なく1回しか呼び出されなかったので、こちらを使っておくことにしました。

_onRowSelection: function(selectedRows) {
  alert(selectedRows);        // <-- 複数回呼び出される？
},
_onCellClick: function(rowNumber, columnId) {
  // rowNumber で行を判断
},
render: function() {
  return (
    ...
    <!-- <Table onRowSelection={this._onRowSelection} /> -->
    <Table onCellClick={this._onCellClick} />
    ...
  );
}

カラムの順序とスタイルの指定

ちょっとわかりにくかったのが、 rowData を公式サイトのサンプルのような形でセットした場合、カラムの順序を指定する columnOrder が必須なようです。

var rowData = [
  {id: {content: '1'}, name: {content: 'John Smith'}, status: {content: 'Employed'}},
  {id: {content: '2'}, name: {content: 'Randal White'}, status: {content: 'Unemployed'}},
  {id: {content: '3'}, name: {content: 'Stephanie Sanders'}, status: {content: 'Employed'}},
  ...
];

公式サイトのdocumentには rowData が配列の配列？になっていると columnOrder は必須ではない、のようなことが書かれていたのですが、こっちは試していないので、具体的にどういうデータを入れればよいのかはわかっていません。

f:id:umi-uyura:20150625130201p:plain

また、各データに style キーでCSS情報を指定することで、適用することができるようです。

例えば、デフォルトでは全てのカラムが同じ幅になってしまうようですが、以下のように style キーを追加して width を指定することで、カラムの幅を指定することができます。

var rowData = [
  {
    id: {
      content: '1',
      style: {
        width: '20%'
      }
    },
    name: {
      content: 'John Smith',
      style: {
        width: '70%'
      }
    },
    status: {
      content: 'Employed',
      style: {
        width: '10%'
      }
    }
  },
  ...
];