Tengo una implementación bastante complicada de "cuadrícula de datos" o "hoja de cálculo" básica que abarca varios módulos/archivos, con un total de unas miles de líneas de código hasta el momento, por lo que no es tan fácil crear/demostrar un ejemplo funcional para StackOverflow. Pero puedes imaginarte creando una <table> html básica:

 <table> <thead> <tr> <th>A</th> <th>B</th> </tr> </thead> <tbody> <tr> <td>foo</td> <td>bar</td> </tr> <tr> <td>hello</td> <td>world</td> </tr> </tbody> </table>

Esto debería verse como una hoja de cálculo simple si no se le da ningún estilo. Lo que me gustaría descubrir cómo implementar es arrastrar desde una celda para resaltar/seleccionar varias celdas , como en una hoja de cálculo. Aquí hay un GIF que graba una hoja de cálculo de Google, que me gustaría imitar. (Solo me importa la funcionalidad, no necesariamente el estilo/cómo se ve).

Podría descubrir cómo implementar esto en vanilla/plain JS , capturando mousemove after mousedown , y luego cada vez que el mouse se mueve (quizás acelerado de alguna manera), encuentre qué celda de la tabla está debajo del mouse. Almacenaría la celda de inicio que se seleccionó primero, luego, a medida que se mueve el mouse, averigüe el índice de la celda de la tabla que se encuentra en el aire y luego configure el rectángulo de la celda para que esté en ese punto.

Entonces, digamos que tenemos un objeto que almacena el índice inicial y final de los límites de la celda.

 { topLeft: [2, 2], bottomRight: [6, 6] }

Esto seleccionaría la 3.ª columna, 3.ª fila, hasta la 7.ª columna, 7.ª fila, similar a mi imagen de arriba.

El problema para el que tengo problemas para imaginar una solución (en React) es doble:

1. Cómo rastrear correctamente el movimiento del mouse y obtener la celda de la tabla debajo del mouse (usando los paradigmas de React).
2. Cómo obtener el índice (fila/columna) asociado con esa celda de la tabla (es decir, el [6, 6] en el ejemplo anterior).

¿Cómo haría esto en React, ya sea en términos generales o si es sencillo, con un ejemplo rápido? Me parece extremadamente difícil y complejo, por lo tanto, me llevará unos días encontrar un ejemplo simple reproducible (y que no funcione realmente) para SO. Lo intentaré, pero también quería obtener ayuda.