material-tableで列のデータの最小幅を定義する

こんにちは、CX事業本部の若槻です。

Material-UI向けのテーブルコンポーネントであるmaterial-tableでは、列定義やデータの状況に応じて、文字列長の長いデータは列内で改行されて表示されることがあります。

今回は、データがある程度の文字列長までは改行されないように、列のデータの最小幅を設定する方法を確認してみました。

有効だった方法

次のようにMaterialTableコンポーネントのcolumnsで、最小幅を設定したい列の定義にheaderStyle: {minWidth: <最小幅>}を追加することにより、データ長が<最小幅>までであれば改行されないようにすることができました。

      <MaterialTable
        columns={[
          {
            title: '商品名',
            field: 'itemName',
            filtering: false,
            headerStyle: {
              minWidth: 150,
            },
          },
          // other columns
        ]}
        // other props
      />

PC、モバイルいずれからの閲覧でも、テーブル幅によらず最小幅以内のデータであれば改行されなくなりました。

• PC
  

• モバイル
  

データ長が最小幅を超えた場合は改行されます。

惜しかった方法

次のようにwidth: <最小幅>のように指定をした場合は、

      <MaterialTable
        columns={[
          {
            title: '商品名',
            field: 'itemName',
            filtering: false,
            width: 150,
          },
          // other columns
        ]}
        // other props
      />

PCからの閲覧時など画面幅が広い時は改行されませんが、

サイドバーメニューを開いたりモバイルから閲覧したりなど、テーブル幅が狭くなると改行されてしまう動作となりました。

おわりに

material-tableで列のデータの最小幅を定義してみました。

material-tableの仕様は、実現したいことが公式ドキュメントで見つからなくても下記の参考にあるようなIssueなども探れば見つかる場合があるので、根気よく調べましょう。

参考

• How to adjust the width of the Material Table and how do I make the icons show up? | mbrn/material-table - Issues

以上