Virtual List DataProvider

Hilla
1

How to use virtual list with data provider ? I am not able to find any documentation nor in typescript? I want to use data provider like we have for grid component.

2

VirtualList has a method setDataProvider which allows you to pass a DataProvider for it

3

i get error when trying setDataProvider in react

Property setDataProvider does not exist on type
IntrinsicAttributes & Partial<Omit<Partial<ThemedWebComponentProps<VirtualList, Readonly<{}>>>, ‘children’ | ‘renderer’>> & Readonly<…> & RefAttributes<…>

4

Ah, right, you’re using Hilla. In that case, you’re out of luck. There’s no DataProvider API for the React component.

5

i think I will just use onScroll listener. Also I wanted to have like 2 cards per row layout. Not sure if that is possible with Virtual List.

onScroll={function (e) {
  //check if scroll to end
  if (
      Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - e.currentTarget.clientHeight) <=
      20
  ) {
      pageable.pageNumber++;
      props.service.getListData(pageable, filter, andFilter).then(function (values) {
          data.value = data.value.concat(values);
      });
  }
}}
6

You could also use a single-column Grid instead?

7

I expect you could do a two-column implementation by using a [item, item | null] tuple as the item type in the virtual list and then combining the actual items before you pass them to the list.