79713295

Date: 2025-07-24 11:55:11
Score: 1
Natty:
Report link

Looking at your code, the "Maximum update depth exceeded" error is occurring because of an infinite loop in your useRowSelect hook implementation. The issue is in how you're adding the selection column.

Here's the code you need to replace:

1. Move IndeterminateCheckbox outside your component (place it before export default function Table7):

// Move this OUTSIDE and BEFORE your Table7 component
const IndeterminateCheckbox = React.forwardRef(
    ({ indeterminate, ...rest }, ref) => {
        const defaultRef = React.useRef()
        const resolvedRef = ref || defaultRef

        React.useEffect(() => {
            resolvedRef.current.indeterminate = indeterminate
        }, [resolvedRef, indeterminate])

        return (
            <input type="checkbox" ref={resolvedRef} {...rest} />
        )
    }
)

IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';

2. Remove the IndeterminateCheckbox definition from inside your Table7 component (delete the entire const IndeterminateCheckbox = React.forwardRef(...) block that's currently inside your component).

3. Fix the empty data display:

Replace:

{page.length === 0 ?
    <MDDataTableBodyCell>
        Nenhum Registro Encontrado
    </MDDataTableBodyCell>

With:

{page.length === 0 ?
    <TableRow>
        <MDDataTableBodyCell colSpan={headerGroups[0]?.headers?.length || 1}>
            Nenhum Registro Encontrado
        </MDDataTableBodyCell>
    </TableRow>

4. Fix the PropTypes at the bottom:

Replace:

rowClasses: PropTypes.string,

With:

rowClasses: PropTypes.func,

That's it! These are the minimal changes needed to fix the infinite loop error.

Reasons:
  • RegEx Blacklisted phrase (2): Encontrado
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: Chris