I want to get row component of the row in the table using index like so:
row_1 = table.getRow(1);
console.log(row_1);
But it produces a warning: "Find Error - No matching row found: 1" console logs "false", even though I have like 50 rows being currently displayed in that table.
var table = new Tabulator("#table_1", {
height:"fitData",
layout:"fitData",
movableRows: true, //enable user movable rows
movableColumns: true, //enable user movable columns
columns:[ //define the table columns
{title:"Col1", field:"col1", editor:true},
{title:"Col2", field:"col2", editor:true},
{title:"Col3", field:"col3", editor:true},
],
rowFormatter:function(row){
var data = row.getData(); //get data object for row
},
}); // Build Tabulator:
var tabledata = [{'col1': 'data1', 'col2': 'data2', 'col3': 'data3'},
{'col1': 'data1', 'col2': 'data2', 'col3': 'data3'},
{'col1': 'data1', 'col2': 'data2', 'col3': 'data3'},
];
table.setData(tabledata);
table.setSort("col1", "asc");
row_1 = table.getRow(1);
console.log(row_1);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<!--Tabulator table here:-->
<div style="float: left; margin-left: 1%; margin-top: 20px; padding: 0; width: fit-content; max-width: 98%; height: 500px; text-align: left; display: inline-block;">
<button class="btn btn-primary" type="button" id="column_toggle" style="width: 30px; height: 30px; padding: 0; margin-bottom: 5px; position:relative; float: right;" hidden>
</button>
<div id="table_1" style="display: contents;" class="noselect">
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
Assign Ids to the table data
var table = new Tabulator("#table_1", {
height: "fitData",
layout: "fitData",
movableRows: true, //enable user movable rows
movableColumns: true, //enable user movable columns
columns: [ //define the table columns
{
title: "Col1",
field: "col1",
editor: true
},
{
title: "Col2",
field: "col2",
editor: true
},
{
title: "Col3",
field: "col3",
editor: true
},
],
rowFormatter: function(row) {
var data = row.getData(); //get data object for row
},
}); // Build Tabulator:
var tabledata = [{
'id': 1,
'col1': 'data1',
'col2': 'data2',
'col3': 'data3'
},
{
'id': 2,
'col1': 'data1',
'col2': 'data2',
'col3': 'data3'
},
{
'id': 3,
'col1': 'data1',
'col2': 'data2',
'col3': 'data3'
},
];
table.setData(tabledata);
table.setSort("col1", "asc");
row_1 = table.getRow(1);
console.log(row_1.getData());
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<!--Tabulator table here:-->
<div style="float: left; margin-left: 1%; margin-top: 20px; padding: 0; width: fit-content; max-width: 98%; height: 500px; text-align: left; display: inline-block;">
<button class="btn btn-primary" type="button" id="column_toggle" style="width: 30px; height: 30px; padding: 0; margin-bottom: 5px; position:relative; float: right;" hidden>
</button>
<div id="table_1" style="display: contents;" class="noselect">
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>