Scroll table at top on adding a new row

Question

I am new to the web Development. Here I have a table, in that table,

<tbody>
<tr>
<td>
</td>
</tr>
</tbody>

Now, it has a scrollbar as it has a fixed height. Now, I have 50 tr in that table, So, user is scrolling that table . Now, I have a button on click of that one more gets added it gets added in the first position . SO, user has scrolled the table, and the also gets added. Now, what I want to do is as soon as row gets added , the scroll bar should be at top so that user will immediately see the newly added row.

is there any way to do this ?

Answer 1

You can use antd library made for react to implement it.

In it specifically, you can use prop validateFieldsAndScroll. For example in your case your handleSubmit function will be something like:

 handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); } 

Answer 2

You can use the Element.scrollTo function ( https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo ) eg

document.querySelector('tbody').scrollTo(0, 0)

EDIT:

The React way would be something like this:

render() {
  return (
    <table>
      <tbody ref={ref=>this.tbody = ref}>
      ...

and then in an onClick handler:

onClick() {
  // add the new row
  const rowsWithNewRow = ...
  this.setState({rows:rowsWithNewRow})
  this.tbody.scrollTo(0,0)
  ...