Next.jsでmaterial-tableを使う

2023年4月12日

Next.jsとmaterial-tableはとても使い勝手がいいので僕はよく使います。
しかし、これらは相性が悪く、Next.jsでmaterial-tableは素直に動いてくれません。

Next.jsでmaterial-tableを使用するにはハマりポイントがあり、以下のエラーが出ます。

TypeError: Cannot add property tableData, object is not extensible
material table Invariant failed: Draggable[id: 1]: Unable to find drag handle

今回はNext.jsでmaterial-tableを使う際のハマりポイントとその解消方法をご紹介します。

material tableのdataには新しい配列を渡す

Next.jsのmaterial-tableにjsonをそのまま入れてしまうと以下のエラーが出ます。

Unhandled Runtime Error
TypeError: Cannot add property tableData, object is not extensible

このエラーを解消するには新しい配列にしてmaterial-tableに渡す必要があります。
以下のコードように渡してあげるとmaterial-tableにデータを渡せます。

import React, { useEffect, useState } from "react";
import MaterialTable from "material-table";

function table() {

    return (
        <>
            <MaterialTable
              data={JSON.parse(JSON.stringify(rows))}
              // or
              // data={rows.map(row => ({ ...row }))}
              ...
            />
        </>
    );
}
export default table;

ウィンドウオブジェクトができてからmaterial tableで表示する

コンポーネントがロードされる前にDOMとウィンドウがロードされていないために発生します。
そのため以下のエラーが出ます。

material table Invariant failed: Draggable[id: 1]: Unable to find drag handle

このエラーが出ていても、テールブルは表示されます。
しかし、削除アイコンのonClick()などの挙動が発火しません。

このエラーを解消するにはウィンドウオブジェクトの準備ができてからテーブルを表示させる必要があります。

import React, { useEffect, useState } from "react";
import MaterialTable from "material-table";

function table() {
    const [winReady, setwinReady] = useState(false);
    useEffect(() => {
        setwinReady(true);
    }, []);

    return (
        <>
            {winReady ? <MaterialTable ... /> : null}
        </>
    );
}
export default table;