Use filter worker in data-table#3808
Conversation
Doesn't work
| @property({ type: String }) private _sortDirection: SortingDirection = null; | ||
| private _filteredData: DataTabelRowData[] = []; | ||
|
|
||
| private _debounceSearch = debounce( |
There was a problem hiding this comment.
I'd love to do this without debounce and the 200ms delay, but couldn't get it to work, if you could guide me :-)
There was a problem hiding this comment.
Do we still need this now we also have the other debounce ?
| }); | ||
| const column = { ...columns[sortColumn] }; | ||
| delete column.template; | ||
| return worker.sortData(data, column, direction, sortColumn); |
There was a problem hiding this comment.
Every time we send data to the worker, we need to copy it all over to the worker. Could we do filtering and sorting in one go ? Basically we get a "slim" column definition just for sorting that we can send over.
|
|
||
| private _handleSearchChange(ev: CustomEvent): void { | ||
| this._filter = ev.detail.value; | ||
| this._debounceSearch(ev); |
There was a problem hiding this comment.
We can do something like this:
const startTime = new Date().getTime();
const curRequest = this.curRequest;
this.curRequest++;
const data = await this.worker.filterAndSortData(this.rawData);
if (this.curRequest != curRequest) return;
// optionally, make sure we wait up to 100ms before starting to render
const curTime = new Date().getTime();
const elapsed = curTime - startTime;
if (elapsed < 100) {
await new Promise(resolve => setTimeout(resolve, 100 - elapsed))
if (this.curRequest != curRequest) return;
}
this.data = data;
| } | ||
|
|
||
| protected updated(properties: PropertyValues) { | ||
| protected async updated(properties: PropertyValues) { |
There was a problem hiding this comment.
updated is a lifecycle method that we override, we cannot change the signature to be async.
| } | ||
|
|
||
| const clonedColumns: DataTabelColumnContainer = deepClone(this.columns); | ||
| Object.values(clonedColumns).forEach((column: DataTabelColumnData) => { |
There was a problem hiding this comment.
Can we memoize this, so we only create the sorted columns once ?
There was a problem hiding this comment.
We only do it now if the columns are changed, so memoize would do the same?
3 participants
So the UI stays responsive when we are filtering large amounts of data
Before:
After: