Next.jsでmaterial-tableを使う

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;

参考

https://stackoverflow.com/questions/59648434/material-table-typeerror-cannot-add-property-tabledata-object-is-not-extensibl

下記に参考書をまとめておきます。

created by Rinker
¥1,663 (2024/03/28 13:12:00時点 Amazon調べ-詳細)

りーほー
りーほー

JavaScriptを基礎からしっかり学びたい方におすすめ!

りーほー
りーほー

JavaScriptを基礎から応用までガッツリ学びたい方におすすめ!

りーほー
りーほー

Reactの概念や仕組みを把握し、開発で使えるReactを学びたい方にオススメ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする


The reCAPTCHA verification period has expired. Please reload the page.

目次