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.