Material React Table component typing issue

Question

I'm using MRT in my react project. I've created a component that returns MRT and I'm reusing this component across the application to avoid repeating the same props everywhere. I'm running through an issue in typing the columns props in the component.

Here's my component

import React from "react";
import {
  MaterialReactTable,
  type MRT_Row,
  type MaterialReactTableProps,
  MRT_ColumnDef,
  MRT_Column,
} from "material-react-table";
import { MRT_Localization_AR } from "../../locales/ar";

export interface Props<TData extends Record<string, any>> {
  columns: Array<MRT_ColumnDef<TData>>;
  data: MaterialReactTableProps["data"];
  onPaginationChange?: MaterialReactTableProps["onPaginationChange"];
  onColumnFiltersChange?: MaterialReactTableProps["onColumnFiltersChange"];
  onGlobalFilterChange?: MaterialReactTableProps["onGlobalFilterChange"];
  onSortingChange?: MaterialReactTableProps["onSortingChange"];
  initialState?: MaterialReactTableProps["initialState"];
  state?: MaterialReactTableProps["state"];
  renderRowActionMenuItems?: MaterialReactTableProps["renderRowActionMenuItems"];
  renderTopToolbarCustomActions?: MaterialReactTableProps["renderTopToolbarCustomActions"];
  muiTableBodyRowProps: MaterialReactTableProps["muiTableBodyRowProps"];
  isError?: boolean;
  enableGlobalFilter?: boolean;
  enableRowSelection?: boolean;
  manualFiltering?: boolean;
  manualPagination?: boolean;
  manualSorting?: boolean;
  enableEditing?: MaterialReactTableProps["enableEditing"]
  editingMode?: MaterialReactTableProps["editingMode"]
  onEditingRowSave?: MaterialReactTableProps["onEditingRowSave"]
  enableRowActions?: boolean;
}

export const BaseTable: React.FC<Props> = ({ isError, ...props }) => {
  return (
    <MaterialReactTable
      localization={MRT_Localization_AR}
      enableRowActions
      enableColumnOrdering
      enableGrouping
      enablePinning
      {...props}
    />
  );
};

Here's an example of columns prop from one page of my application:

  const EColumns = useMemo<MRT_ColumnDef<EVariablesType>[]>(
    () => [
    ],
    []
  );

And here's the issue I'm getting: `Generic type 'Props' requires 1 type argument(s).ts(2314)

Please note that EVariablesType changes in the other places I'm using the component in.

Is there a solution or way around this issue or should I use MRT directly in every place in the app?

I tried using MRT directly in every place in the app, but this resulted in a lot of duplicated and redundant code

please add your code, the explanation is not enough. A better way to understand is an example — Asking, Aug 29 '23 at 18:30

Material React Table component typing issue

0 Answers0