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

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

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

• PC閲覧時

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

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

有効だった方法

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

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

有効ではなかった方法

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

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で作成したページをどのようにスマートフォンに適応させるかは今後の課題になってきそうです。

参考

• Is it possible to set fixed widths on tables in material-table? | stackoverflow

以上