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

2020.09.20

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

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

image.png

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

有効だった方法

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

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

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

  • PC image.png

  • モバイル image.png

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

惜しかった方法

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

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

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

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

おわりに

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

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

参考

以上