Eslint warning: react/prop-types

[MatejFacko]

Hello, Seems like there is a problem with prop/types , I am getting an eslint warnings/errors.

"material-react-table": "1.3.2",
 "typescript": "4.6.4",
 "react": "18.1.0",

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md

import MaterialReactTable, { MRT_ColumnDef as ColumnDef } from 'material-react-table';

const columns: ColumnDef<ExtendedRebate>[] = [
  {
    accessorKey: 'cash',
    header: 'AMOUNT',
    Cell: ({
      row: {
        original: { cash },
      },
    }): React.ReactElement => (
      <Typography variant="body3" fontWeight={700}>
        {formatToCurrency(cash, 0)}
      </Typography>
    ),
    size: 69,
  },
  {
    accessorKey: 'groupAffiliation',
    header: 'SOURCE',
    size: 80,
  },
  {
    accessorKey: 'description',
    header: 'PROGRAM NAME',
    Cell: ({ row: { original: rebate } }) => <ProgramNameTableCell rebate={rebate} />,
    size: 80,
  },
  {
    accessorKey: 'programType',
    header: 'TYPE',
    Cell: ({
      row: {
        original: { programType },
      },
    }) => <IncentivesTypeTableCell programType={programType} />,
    size: 71,
  },
  {
    accessorKey: 'programId',
    header: 'PROGRAM #',
    size: 35,
  },
  {
    accessorKey: 'expiryDate',
    header: 'END',
    Cell: ({
      row: {
        original: { expiryDate },
      },
    }): React.ReactElement => (
      <Typography variant="body3" fontWeight={700}>
        {formatDate(expiryDate)}
      </Typography>
    ),
    size: 80,
  },
];

[KevinVandy]

I don't know about react prop types, but all the typescript types seem to be working just fine.

[LvChengbin]

Thank you for you great job, and I encountered the same problem.
Eslint throws error/warning while customizing Cell component with code like the samples in documents.

For example:

{
    Cell : ( { row } ) => row.original.xxx
}

The code causes error with react/prop-types rule from eslint.

There is an closed issue of @tanstack/table repo ( TanStack/table#1207 ) and there isn't a great way to resolve this problem.

But in TypeScript, it'll be easier to suppress the errors by given a Type to the argument, for example:

{
    Cell : ( { row }: any ) => row.original.xxx
}

So in this situation, I would like to give a precise type for the argument like:

{
    Cell : ( { row }: {
        cell: MRT_Cell<X>;
        renderedCellValue: number | string | ReactNode;
        column: MRT_Column<X>;
        row: MRT_Row<X>;
        table: MRT_TableInstance<X>;
  } ) => row.original.xxx
}

Would you like to export an alias, such as CellProps for that type? It can make users more convenient and it may be something like this:

export interface CellProps<TData> {
    cell: MRT_Cell<TData>;
    renderedCellValue: number | string | ReactNode;
    column: MRT_Column<TData>;
    row: MRT_Row<TData>;
    table: MRT_TableInstance<TData>;
}

and also EditProps, FilterProps and so on.

[KevinVandy]

If you are using TypeScript, you should not have to use any in the column definitions if you use the MRT_ColumnDef type properly