TypeScript Type Mismatch Error with MaterialReactTable

Question

I'm trying to set up a table using the MaterialReactTable library in a React application. However, I'm encountering a TypeScript type mismatch error when defining the columns for the table.

Error Message:

S2322: Type 'MRT_ColumnDef<ResponseData, unknown>[]' is not assignable to type 'MRT_ColumnDef<MRT_RowData, any>[]'. Type 'MRT_ColumnDef<ResponseData, unknown>' is not assignable to type 'MRT_ColumnDef<MRT_RowData, any>'. Type 'MRT_ColumnDef<ResponseData, unknown>' is not assignable to type 'Omit<ColumnDef<MRT_RowData, any>, "accessorKey" | "aggregatedCell" | "aggregationFn" | "cell" | "columns" | "filterFn" | "footer" | "header" | "id" | "sortingFn">'. Types of property 'getUniqueValues' are incompatible. Type 'AccessorFn<ResponseData, unknown[]> | undefined' is not assignable to type 'AccessorFn<MRT_RowData, unknown[]> | undefined'. Type 'AccessorFn<ResponseData, unknown[]>' is not assignable to type 'AccessorFn<MRT_RowData, unknown[]>'. Property 'data' is missing in type 'MRT_RowData' but required in type 'ResponseData'.

Code Snippet:

import { useMemo } from "react";
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from "material-react-table";

interface ResponseData {
  data: {
    date: string;
    shift: {
      shift: string;
      morning: {
        machines: {
          machineName: string;
          operators: {
            operatorId: string;
            partNames: {
              partName: string;
              partCount: number;
            }[];
          }[];
        }[];
      };
    }[];
  }[];
}

import { response } from "./dummyResponse";

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<ResponseData>[]>(
    () => [
      {
        accessorKey: "date",
        header: "Date",
      },
      {
        accessorKey: "shift.shift",
        header: "Shift",
      },
      {
        accessorKey: "shift.morning.machines.machineName",
        header: "Machine Name",
      },
      {
        accessorKey: "shift.morning.machines.operators.operatorId",
        header: "Operator ID",
      },
      {
        accessorKey: "shift.morning.machines.operators.partNames.partName",
        header: "Part Name",
      },
      {
        accessorKey: "shift.morning.machines.operators.partNames.partCount",
        header: "Part Count",
      },
    ],
    []
  );

  const table = useMaterialReactTable({
    columns,
    response,
    enableExpandAll: false,
    enableExpanding: true,
    filterFromLeafRows: true,
    initialState: { expanded: true },
    paginateExpandedRows: false,
  });

  return <MaterialReactTable table={table} />;
};

export default Example;

I've defined the columns based on the structure of my ResponseData interface, but I'm still getting the type mismatch error. Could anyone help me understand what's causing this issue and how to resolve it?

Answer 1

change interfaces to type , possible reason is that interface can't be seen as ResponseData type

type ResponseData = {
  data: {
    date: string;
    shift: {
      shift: string;
      morning: {
        machines: {
          machineName: string;
          operators: {
            operatorId: string;
            partNames: {
              partName: string;
              partCount: number;
            }[];
          }[];
        }[];
      };
    }[];
  }[];
}