const inputTable = (index, name) => (
<>
{name === 'OO' || name === 'OTK' || name === 'PZ' || name === 'KPS' ? (
<td name={name}
style={{border: '1px solid #c7c7c7'}}
>
<input
type="checkbox"
name={name}
checked={dataTable[index][name]}
onChange={handleChange(index)}
/>
</td>
) : (
<td name={name}
onClick={handleClick(index, name)}
style={stateClick[index][name] ? {
outline: '2px solid green',
outlineOffset: '-1px',
position: 'relative'
} : {border: '1px solid #c7c7c7'}}
>
<input
type="text"
name={name}
value={dataTable[index][name]}
onChange={handleChange(index)}
/>
<span className={name}> </span>
</td>
)}
</>
)<tbody>
{dataTable.map((item, index) => (
<tr key={index}>
{inputTable(index, 'numberOperation')}
{inputTable(index, 'nameOperation')}
{inputTable(index, 'level')}
{inputTable(index, 'workshop')}
{inputTable(index, 'area')}
{inputTable(index, 'tsht')}
{inputTable(index, 'tpz')}
{inputTable(index, 'test')}
{inputTable(index, 'OO')}
{inputTable(index, 'OTK')}
{inputTable(index, 'PZ')}
{inputTable(index, 'KPS')}
</tr>
))}
</tbody>const onMouseUpRightResize = (id) => (
() => {
document.removeEventListener("mousemove", onMouseMoveRightResize(id))
}
)
const onMouseMoveRightResize = (id) => (
(event) => {
const dx = event.clientX - x
x = event.clientX
width = width + dx
setColWidth({...colWidth, [id]: width})
console.log('width =', width)
document.addEventListener("mouseup", onMouseUpRightResize(id))
}
)
const onMouseDownRightResize = (event) => {
x = event.clientX
const {id} = event.target
console.log('Default width =', width)
document.addEventListener("mousemove", onMouseMoveRightResize(id))
}