React-bootstrap-table2: Scroll to a row programmatically

[sanjesh]

I am trying to implement scroll to a table row programmatically
this library provides a way to do it through id's https://github.com/fisshy/react-scroll
Is it possible to add id's to tbody and tr's and how do we make thead fixed and make only tbody scrollable?

[AllenFang]

@sanjesh understand, right now I'm not consider to implement the scroll table, I need to recover all the functionalities from legacy react-bootstrap-table. After I done, I will implement it :)

Anyway, I will also spend some to to figure if we can apply https://github.com/fisshy/react-scroll, if it's easy to implement, I will add this feature ASAP. Actually, legacy react-bootstrap-table have scroll feature, but there're some unalign issues

[sanjesh]

My requirements include

1. Fixed table header with scrolling body (with fixed percentage of column widths)
   2.Programmatically scroll to a row

I am facing alignment issues while trying to implement 1 and couldn't find a solution.

In this library http://issues.wenzhixin.net.cn/bootstrap-table/ thead, tbody and tfooter are implemented as 3 different tables. They might have done it to avoid this alignment issue.
This would be a big change. Hope there is a better solution.

[AllenFang]

@sanjesh I see, thanks your suggestion 👍

[lindsejs]

1. Fixed table header can be done with css, e.g.:
   .react-bootstrap-table {
   flex-grow: 1;
   overflow: auto;
   min-height: 2em;
   thead th {
   position: sticky;
   padding: 0.3em;
   top: 0;
   background: mix($primary, #eeeeee, 30);
   z-index: 10;
   outline: 1px solid #c8ced3;
   border:none;
   outline-offset: -1px;
   text-align: center;
   vertical-align: middle;
   }
   }

2. for scrolling to specific row - you can add in column definition the id attribute:
   attrs: (cell, row) => ({id:rowid_${row.id}}),

this will output for specific column e.g.

then scroll with plain javascript:
const rowId = 12
const el = document.getElementById('rowid_' + rowId)
el.scrollIntoView();

with sticky header your row might be behind the sticky header (by browser what is considered into the view), then do something like:
const tableEl = document.getElementsByClassName("react-bootstrap-table")[0]
tableEl.scrollTop -= 50;

[hassanamjad91]

For me this worked.
// insert the new question in grid
(async () => { arr_helpers.insert(insert_index, question_new); })().then(() => {
this.prop.ref_questions[insert_index].scrollIntoView();
});

I am using Formik and its FieldArray component

[lavania-aditya]

Hello @AllenFang can anyone please suggest me how to scroll programmatically in table 2