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