react mui/x-data-grid onSelectionChange - is not tracked / invoked

Question

I'm trying to allow a selection of a list of Ids from a table

this is my common table code

    import { DataGrid, GridColDef } from '@mui/x-data-grid';
    import React, { useState, useEffect } from 'react';
    
    
    interface CommonTableProps {
        rows: any[];
        columns: GridColDef[];
        onSelectionChange: (selectionModel: number[] ) => void; // Add this line
    }
    
     
    const CommonTable: React.FC<CommonTableProps> = ({ rows, columns, onSelectionChange }) => {
        return (
            <div style={{ marginTop: '100px', marginLeft: '200px', padding: '20px' }}>
                <DataGrid
                    rows={rows}
                    columns={columns}
                    pageSize={5}
                    rowsPerPageOptions={[5]}
                    checkboxSelection
                    onSelectionChange={onSelectionChange} // Add this line
                />
            </div>
        );
    };
    
    export default CommonTable;


this is How I try to add them in the Contact.tsx 

const Contact: React.FC = () => {
  const [contacts, setContacts] = useState<ContactPerson[]>([]);
  const [newContact, setNewContact] = useState<ContactPerson>({id: 0 , name: '', phoneNumber: '' });
  const [selectedIds, setSelectedIds] = useState<number[]>([]); // State to track selected contact IDs


  const handleDeleteContacts = async () => {
    console.log('deelte soon');
    console.log(selectedIds);

    try {
      await restApiPost('/contacts/delete/bulk', selectedIds);
      // Filter out the deleted contacts
      setContacts(contacts.filter(contact => !selectedIds.includes(contact.id)));
      setSelectedIds([]); // Reset the selection
    } catch (error) {
      console.error('Error deleting contacts:', error);
    }
  };
....
....






const handleRowSelectionChange = (selectionModel: number[] ) => {
    setSelectedIds(selectionModel);
    console.log("Selected IDs:", selectionModel);
  };
  

and here is where the delete should happen

  <Button variant="primary" onClick={handleDeleteContacts}>
    Delete
  </Button>
  <div className="contact-list" style={{  marginTop: '-100px', marginLeft: '-200px', padding: '20px' }}> 
            <CommonTable
        rows={contacts}
        columns={columns}
        onSelectionChange={handleRowSelectionChange} // Pass the callback
      />
  </div>

the problem is that on Seleceted / Check event the method onSelectionChange seems not called

Answer 1

Check the CommonTable component: Ensure that the onSelectionChange callback is properly connected to the onSelectionChange prop of the DataGrid component inside the CommonTable. You've already done this in your code, but it's always good to double-check.

Console Log in CommonTable: Inside the CommonTable component, you can add a console.log statement to check if the onSelectionChange callback is being triggered. For example:

const CommonTable: React.FC<CommonTableProps> = ({ rows, columns, onSelectionChange }) => {
    const handleSelectionChange = (selectionModel: any) => {
        console.log("Selection changed:", selectionModel);
        onSelectionChange(selectionModel);
    };

    return (
        <div style={{ marginTop: '100px', marginLeft: '200px', padding: '20px' }}>
            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]}
                checkboxSelection
                onSelectionModelChange={handleSelectionChange} // Use onSelectionModelChange
            />
        </div>
    );
};