this.usersDataTable.row(...).scrollTo is not a function

Lajos

Hi,

Debugger code (debug.datatables.net):
try {
this.usersDataTable.row(selectedIndexes[150]).scrollTo();
} catch (error) {
console.log(error);
}

Error messages shown:
TypeError: this.usersDataTable.row(...).scrollTo is not a function

Description of problem:

I am using the DataTables, and its plugins following version:

"datatables.net-colreorder-dt": "2.0.4",
"datatables.net-dt": "2.1.7",
"datatables.net-scroller-dt": "2.4.1",
"datatables.net-select-dt": "2.0.5",

I want to scroll to element 150, but I get the following error: scrollTo is not a function.

allan

Happy to take a look at a test case showing the issue.

Allan

kthorngren

Its hard to say with just that code snippet. The error suggests that ‘this.usersDataTable.row(selectedIndexes[150]) ‘ is not returning an API instance with the rows. I would place a browser breakpoint on this statement to see how it’s being evaluated.

Please post a link to a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Lajos

It is a Tauri, Lit, Typescript project:

import DataTable from 'datatables.net-dt';
import 'datatables.net-colreorder-dt';
import 'datatables.net-scroller-dt';
import 'datatables.net-select-dt';

this.usersDataTable = new DataTable('#users-data-table', {
infoCallback(settings: any, start: any, end: any, max: number, total: number) {
return total !== max ? Showing ${total} of ${max} records. : ${total} records.;
},
colReorder: true,
scrollY: '55vh',
scrollCollapse: false,
scrollX: true,
fixedColumns: true,
fixedHeader: true,
deferRender: true,
scroller: true,
select: true,
data: this.users,
columns: [
{ data: 'ID', visible: false },
{ data: 'FamilyName' },
{ data: 'FirstName' },
],
columnDefs: [
{
render(data: string) {
if (data !== null) {
return data.length > 10 ? ${data.substr(0, 10)}… : data;
}
return '';
},
targets: '_all',
},
{
target: 1,
width: '100%',
},
],
autoWidth: false,
order: {
idx: 1,
dir: 'asc',
},
});

private scrollToFunction(){
this.usersDataTable.row(150).scrollTo();
}

Lajos

This function returns with this object, here I get the row I need to select in the table.
Scrool to function worked well before.

const row = this.usersDataTable.row(focusRow);

row: {
_Api: [2],
$: function () {},
ajax: {
__dt_wrapper: true,
json: function () {},
params: function () {},
reload: function () {},
url: function () {}
},
cache: function () {},
caption: function () {},
cell: function () {},
cells: function () {},
child: function () {},
clear: function () {},
column: function () {},
columns: function () {},
context: [{ ... }],
data: function () {},
deselect: function () {},
destroy: function () {},
draw: function () {},
error: function () {},
i18n: function () {},
id: function () {},
index: function () {},
init: function () {},
invalidate: function () {},
length: 1,
node: function () {},
off: function () {},
on: function () {},
one: function () {},
order: function () {},
page: function () {},
processing: function () {},
ready: function () {},
remove: function () {},
row: function () {},
rows: function () {},
search: function () {},
select: function () {},
selected: function () {},
selector: {
rows: _Api,
cols: null,
opts: { ... }
},
settings: function () {},
state: function () {},
table: function () {},
tables: function () {},
trigger: function () {},
}

row.scrollTo();

but now when i call the scrollTo function i got this error.
TypeError: this.usersDataTable.row(...).scrollTo is not a function

allan

Please use StackBltiz or similar to provide a link to a test case if you can't link to your page.

Allan