material-tableで画面幅に応じてヘッダーが改行されないようにする

2020.09.01

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

material-tableでは、PCから閲覧時には問題ありませんが、スマートフォンなどからの閲覧時に画面幅が狭くなると、画面幅に応じてヘッダーが改行されて列名が縦長に表示されてしまいます。

  • PC閲覧時 image.png

  • スマートフォンからの閲覧時 image.png

今回は、画面幅に応じてヘッダーが改行されないようにしてみました。

有効だった方法

結論としては、次のようにMaterialTableコンポーネントのoptionsheaderStyle: { whiteSpace: 'nowrap' }の定義を追加することにより、ヘッダーを改行させないようにすることができました。

      <MaterialTable
        options={{
          showTitle: false,
          filtering: true,
          headerStyle: { whiteSpace: 'nowrap' },
        }}
      />

image.png

有効ではなかった方法

有効だった方法に行き着くまでに色々と試しましたが、次の方法では改行が行われてしまい有効ではありませんでした。

options

同じくMaterialTableコンポーネントのoptionsに次の定義を追加した場合。

        fixedColumns: {
          right: 100,
        },
       overflowY: 'auto',
      style: {
        width: '100pt',
      },
      style: {
        width: '100%',
      },

columns

MaterialTableコンポーネントのcolumnsの各列の要素に次の定義を追加した場合。

        columns={[
          {
            title: '商品名',
            field: 'itemName',
            defaultSort: 'asc',
            filtering: false,
            width: '100%',
          },
            width: '100px',
            style: { whiteSpace: 'nowrap', },
            overflow: 'auto',
            headerStyle: { width: '100%' },
            headerStyle: { width: '100pt' },
            style: { width: '100pt', },
            style: { width: '100%', },

おわりに

material-tableで画面幅に応じてヘッダーが改行されないようにしてみました。

MaterialUIやmaterial-tableで作成したページをどのようにスマートフォンに適応させるかは今後の課題になってきそうです。

参考

以上