how to scroll specific column to second column using react useRef? - reactjs

Question

I have a table and first column position is sticky. The first row is the date of the month. and the first column is student information. I want a button onClick action is scroll the specific column(today column) to the position next to the first column. How can I do that?
Any suggestion is appreciated.
After I assign ref to the today's column, The scrollIntoView() function work. The column I want to show will under the sticky column. So I want to use scrollTo() function to provide accurate position. The issue is that scrollTo() doesn't work. Which element should I assign useRef. table, tableRow or tableData(tableHead)?
type ListProps = {
AppStore: AppStore;
TaskScheduleStore: TaskScheduleStore;
EmployeeShiftStore: EmployeeShiftStore;
BusRouteStore: BusRouteStore;
};
const List: React.FC<ListProps> = ({
AppStore,
TaskScheduleStore,
EmployeeShiftStore,
BusRouteStore,
}) => {
const myRef = useRef<HTMLTableElement>(null);
return (
<Container>
<Card>
<div className='flex flex-row justify-between items-center'>
<div className='flex flex-row items-center'>
{format(currentDate, 'yyyy年M月')}
<button
onClick={() => {
// here is the button I want to scroll the column to specific position.
var table = document.getElementById(
'employeeShiftTable'
) as HTMLTableElement;
console.log(table?.scrollWidth)
// here can print the table width.
if (myRef.current !== null) {
myRef.current.scrollBy({
top: 100,
left: 400,
behavior: 'smooth',
});
}
}}
>
<span>Today</span>
</button>
</div>
</div>
<div>
<table id='employeeShiftTable' ref={myRef}>
<thead>
<tr>
<th>
corner
</th>
{Array(getDaysInMonth(currentDate))
.fill(currentDate)
.map((date, index) => {
return (
<th>
<div>
{index + 1}
</div>
</th>
);
})}
</tr>
</thead>
<tbody>
{employeeShifts.map((data, rowIndex) => (
<tr>
<th className='headcol'>
<div>
{rowIndex}
</div>
<div className='flex flex-row align-items-center jobTitle'>
00012 Name
</div>
</th>
{Array(getDaysInMonth(currentDate))
.fill(1)
.map((daea, columnIndex) => (
<td>
<div style={{ padding: '12px' }}>
test
</div>
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</Card>
</Container>
);
};
export default inject(
({ AppStore, TaskScheduleStore, EmployeeShiftStore, BusRouteStore }) => ({
AppStore,
TaskScheduleStore,
EmployeeShiftStore,
BusRouteStore,
})
)(observer(List));

Answer 1

an easy solution is to use an a tag with href="#id" and on the element that you want to scroll give it the same id that you mentioned in the href