I would recommend sticking to pnpjs requests in case you want to get all the items. Due to how the List or Library control is setup, you'll only get one page of items, not all of available items.
You can still apply the same filters on pnpjs requests to get only some items.
datatable is filtered accordingly (no new load of data by pnpjs, just filter the datatable)
(work in progress) filter/sort on column headers
And indeed, right now, the filter (1) both triggers a filter on the datatable and an update of the graph.
But I want to make this more general and capture any modification of the datatable (filter/sort/...) and trigger the update graph without the need to explicitly add the update graph function to every action.
However, if I only can address the data in the datatable on the current page, this would not work.
What do you suggest in this use case?
Reload the data with pnpjs every time the user takes an action (sort/filter)? This causes some network traffic and is not needed in my opinion.
However, if there is no other option, this will be it.
Using pnpjs to load data shouldn't take too much traffic, so it really is the best option. The requests can match the filters you apply to the List or Library control, and retrieve items in a similar way with pnpjs.