Add rows at the bottom of the table with an external button

Tags: #<Tag:0x00007efc655aeb10> #<Tag:0x00007efc655ae9a8>
#1

Hello there,
I have this handsontable:

1
1.png1571×639 20 KB

There is a list of “Project Team Members” [1.] (at the moment 1-8).
What I’d like is that clicking the button [2.] adds a new member row at the bottom of the table (“Project Team Members | 9”, etc.).

The code:

// Columns
const colHeaders = [["Surname", "Name", "Contact phone", "Contact email", "Belt (-/YB/GB/BB)"],];
// Rows
const rowsHeaders = [
"Project Leader",
"Process Owner",
"Project Sponsor",
"Finance Belt",
"Project Team Members | 1",
"Project Team Members | 2",
"Project Team Members | 3",
"Project Team Members | 4",
"Project Team Members | 5",
"Project Team Members | 6",
"Project Team Members | 7",
"Project Team Members | 8",
];
// Table
<HotTable
  data={[
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
   ["", "", "", "", ""],
 ]}
 licenseKey="non-commercial-and-evaluation"
 manualRowResize
 manualColumnResize
 height="auto"
 minCols={5}
 columnHeaderHeight={[50, 50, 50, 50, 50]}
 nestedHeaders={colHeaders}
 rowHeaderWidth={200}
 stretchH={"all"}
 rowHeaders={rowsHeaders}
 rowHeights={"40px"}
 className={"htMiddle my-2 powerInterestGrid_Table"}
 afterGetColHeader={function (col, TH) {
   TH.className = "htMiddle";
 }}
 afterGetRowHeader={function (row, TH) {
   TH.className = "htMiddle";
 }}
/>
// Button
<Button
  variant=""
  className="btn btn-success wd-10p mt-4 mb-3"
  onClick={() => {}}
>
  Add new member
</Button>

How can this be done?
Thank you!

#2

Hi @lorenzo.cristofori

You can use the countRows() method to get the last index of a row, then use that within the instance.alter('insert_row_below, 1, your_index). Now I do not know if you're using React or Angular, but to get theinstance` you should as=lso follow these steps to create a reference to an instance of Handsontable

#3

Amazing, I made the button working :

2
2.png1559×711 20.2 KB

But now the numerical progression continues (13, 14, etc.). How can I add custom text instead of the numbers (in these case “Project Team Member | xx”)?

Note: I’m using React.

#4

There is no method like changeHeader(), so the only way is to call udpateSettinngs({colHeaders: new_array_of_headers}) or use getRowHeader instead. So when you perform the alter() call, you can also create an array for the headers and just use array.push() to add as many new header label as needed, and then call the updateSettings().

#5

Perfect I managed to achieve everything!
Thanks for the help.

#6

Great! I’m glad I could help.

#7