El evento Row Click expande todas las filas en la tabla de datos para mostrar los datos internos de todas las filas
Al hacer clic en el botón Expandir, se expanden todas las filas en lugar de la fila seleccionada. Cada vez que haga clic en el botón para expandir la fila 1, también expandirá la segunda fila. ¿Cómo puedo arreglar esto donde solo se expandirá esa fila específica?
<Table stickyHeader aria-label="sticky table"> <TableHead> <TableRow hover> <TableCell>Title</TableCell> <TableCell>Created Date</TableCell> </TableRow> </TableHead> <TableBody> {data && data((index) => ( <TableRow hover> <TableCell> <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)} > {open ? ( <KeyboardArrowUpIcon /> ) : ( <KeyboardArrowDownIcon /> )} </IconButton> </TableCell> <TableCell component="th" scope="row"> {index.title} </TableCell> <TableCell component="th" scope="row"> {new Date( index.createdDate.seconds * 1000 ).toDateString()} </TableCell> <TableCell colSpan={6}> <Collapse in={open} timeout="auto" unmountOnExit> {index.text} </Collapse> </TableCell> </TableRow> ))} </TableBody> </Table>Pude agregar el índice para abrir la función y permitir solo la expansión de fila seleccionada. Funciona como se esperaba y debajo está mi código modificado.
<Table stickyHeader aria-label="sticky table"> <TableHead> <TableRow hover> <TableCell>Title</TableCell> <TableCell>Created Date</TableCell> </TableRow> </TableHead> <TableBody> {data && data((index) => ( <TableRow hover> <TableCell> <IconButton aria-label="expand row" size="small" onClick={() => setOpen(open === index ? -1 : index)} > {open == index ? ( <KeyboardArrowUpIcon /> ) : ( <KeyboardArrowDownIcon /> )} </IconButton> </TableCell> <TableCell component="th" scope="row"> {index.title} </TableCell> <TableCell component="th" scope="row"> {new Date( index.createdDate.seconds * 1000 ).toDateString()} </TableCell> <TableCell colSpan={6}> <Collapse in={open == index} timeout="auto" unmountOnExit> {index.text} </Collapse> </TableCell> </TableRow> ))} </TableBody> </Table>