1function DataGrid({ data, columns }) {
2  const [selectedCells, setSelectedCells] = useState(new Set());
3  const [copiedCells, setCopiedCells] = useState(new Map());
4  
5  useEffect(() => {
6    const handleKeyboard = (e) => {
7      if (e.key === 'c' && (e.ctrlKey || e.metaKey)) {
8        const copiedData = Array.from(selectedCells).map(cellId => {
9          const [row, col] = cellId.split('-').map(Number);
10          return { cellId, value: data[row][columns[col].key] };
11        });
12        setCopiedCells(new Map(copiedData.map(d => [d.cellId, d.value])));
13      }
14    };
15    
16    window.addEventListener('keydown', handleKeyboard);
17    return () => window.removeEventListener('keydown', handleKeyboard);
18  }, [data, columns, selectedCells]);
19
20  const handleCellClick = (rowIndex, colIndex, event) => {
21    const cellId = `${rowIndex}-${colIndex}`;
22    
23    if (event.shiftKey && selectedCells.size > 0) {
24      const newSelection = new Set(selectedCells);
25      const [lastRow, lastCol] = Array.from(selectedCells).pop().split('-').map(Number);
26      
27      for (let r = Math.min(rowIndex, lastRow); r <= Math.max(rowIndex, lastRow); r++) {
28        for (let c = Math.min(colIndex, lastCol); c <= Math.max(colIndex, lastCol); c++) {
29          newSelection.add(`${r}-${c}`);
30        }
31      }
32      setSelectedCells(newSelection);
33    } else {
34      setSelectedCells(new Set([cellId]));
35    }
36  };
37
38  return (
39    <div className="grid">
40      {data.map((row, rowIndex) => (
41        <div key={rowIndex} className="row">
42          {columns.map((col, colIndex) => (
43            <Cell
44              key={colIndex}
45              value={row[col.key]}
46              selected={selectedCells.has(`${rowIndex}-${colIndex}`)}
47              copied={copiedCells.has(`${rowIndex}-${colIndex}`)}
48              onClick={(e) => handleCellClick(rowIndex, colIndex, e)}
49            />
50          ))}
51        </div>
52      ))}
53    </div>
54  );
55}