mantine-react-table Missing props validation on Cell when defining columns

mantine-react-table version

v1.0.0

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

When defining columns for table, I am getting missing props validation from ESlint (first screenshoot). It occuried in earlier beta versions of v1 as well, but it can be turned of by using /* eslint-disable react/prop-types */. Is this bug related to ESlint or table? I have latest version of ESlint, Prettier as well as TypeScript.

Another ESlint warning is react/no-unstable-nested-components (second screenshoot), which can be turned off by last rule in ESlint config I attached.

'react/no-unstable-nested-components': [
      'error',
      {
        allowAsProps: true,
      },
    ],

Basically it complains about React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state. But I need to use some data from hooks, use them to render component for Cell, so I dont know how to do that properly. Is this the right way tho and ESlint just trying to warn me or is this a bad way to do it? I just followed your examples .

Here are my columns:

const columns = useMemo<MRT_ColumnDef<TSpecimen>[]>(
    () => [
      {
        accessorKey: 'mutation',
        header: t('table.mutations'),
        maxSize: 110,
        Cell: ({ cell }) =>
          mutations.find((m) => m.id === Number(cell.getValue<string>()))?.name,
      },
      {
        accessorKey: 'publicationDate',
        header: t('table.publication_date'),
        Cell: ({ cell }) =>
          formatDateWithDashesToString(cell.getValue<string>()),
      },
      {
        accessorKey: 'name',
        header: t('table.name'),
      },
      {
        accessorKey: 'publication',
        header: t('table.publication'),
        maxSize: 110,
        Cell: ({ cell }) =>
          publications.find((p) => p.id === Number(cell.getValue<string>()))
            ?.name,
      },
      {
        accessorKey: 'number',
        header: t('table.number'),
        maxSize: 110,
      },
      {
        accessorKey: 'pagesCount',
        header: t('table.pages_count'),
        maxSize: 110,
      },
      {
        id: `owner${owners[0].name}`,
        accessorKey: 'owner',
        header: owners[0].name,
        Cell: ({ row }) => <OwnersBarCodeCell row={row} ownerRow={0} />,
      },
      {
        id: `owner${owners[1].name}`,
        accessorKey: 'owner',
        header: owners[1].name,
        Cell: ({ row }) => <OwnersBarCodeCell row={row} ownerRow={1} />,
      },
      {
        id: `owner${owners[2].name}`,
        accessorKey: 'owner',
        header: owners[2].name,
        Cell: ({ row }) => <OwnersBarCodeCell row={row} ownerRow={2} />,
      },
      {
        id: `owner${owners[3].name}`,
        accessorKey: 'owner',
        header: owners[3].name,
        Cell: ({ row }) => <OwnersBarCodeCell row={row} ownerRow={3} />,
      },
    ],
    [mutations, publications, t]
  )

Here is rendered component for Cell:

const OwnersBarCodeCell: FC<{
  row: MRT_Row<TSpecimen>
  ownerRow: 0 | 1 | 2 | 3
}> = ({ row, ownerRow }) => {
  const { classes } = useStyles()
  const { t, i18n } = useTranslation()

  return Number(row.original.owner) === owners[ownerRow].id ? (
    <Flex
      sx={(theme) => ({
        gap: theme.spacing.xs,
        alignItems: 'center',
        justifyContent: 'center',
      })}
    >
      {row.original.barCode}
      <Link
        className={classes.link}
        to={`/${i18n.resolvedLanguage}/${t('urls.volume_overview')}/${
          row.original.barCode
        }`}
      >
        <IconFileSymlink size={20} />
      </Link>
      {getSpecimenState(row.original)}
    </Flex>
  ) : undefined
}

Here is ESlint config:

module.exports = {
  settings: {
    react: {
      version: 'detect',
    },
  },
  env: {
    browser: true,
    es2022: true,
  },
  extends: [
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json'],
    tsconfigRootDir: __dirname,
  },
  ignorePatterns: ['vite.config.ts', 'vitest.config.ts'],
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 0,
    'react/function-component-definition': 0,
    'react/require-default-props': ['error', { functions: 'defaultArguments' }],
    'prettier/prettier': 'error',
    'import/no-extraneous-dependencies': 0,
    'no-continue': 0,
    '@typescript-eslint/no-unused-vars': 1,
    'react/no-unstable-nested-components': [
      'error',
      {
        allowAsProps: true,
      },
    ],
  },
}

Minimal, Reproducible Example - (Optional, but Recommended)

Described above

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

None

Terms

[X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.