Мне бы хотелось, чтобы ползунок и поле ввода находились в отдельных ячейках в реактивной таблице, обе они изменяли одни и те же данные. Я думаю, что перетаскивание ползунка приводит к тому, что компонент удаляется и воссоздается, в результате чего поведение перетаскивания останавливается.
Есть ли способ сохранить ползунок для перетаскивания при динамическом обновлении поля ввода? Я не прав в том, как я понимаю, в чем проблема?
код столбца, лишенный материала, который, кажется, не связан с проблемой:
const columns = useMemo(
() => [
{
id: 'input',
Header: 'input',
accessor: 'hours',
Cell: ({ cell }) => <HoursInput hours={cell.value} />,
},
{
id: 'slider-bars',
Header: 'slider',
accessor: 'hours',
Cell: ({ cell }) => (
<Slider
onChange={(event, newValue) =>
handleSliderBarChange(cell.row.original.id, newValue)
}
value={cell.value}
/>
),
},
],
[],
);
макет таблицы:
<thead>
{headerGroups.reduce((parentAcc, headerGroup) => {
parentAcc.push(
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.reduce((acc, column) => {
acc.push(
<th {...column.getHeaderProps()}>{column.render('Header')}</th>,
);
return acc;
}, [])}
</tr>,
);
return parentAcc;
}, [])}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
))}
</tr>
);
})}
</tbody>
</StyledTable>
Любая помощь будет оценена.