Lazy loading

[JanBN]

Is there some example with lazy loading. Or how to implement lazy loading ?

Thank you

[nstepien]

Can you clarify what is there to lazy load?

[JanBN]

I mean loading data from backend when you scroll down, or set some filters. E.g I have 100 000 rows by don't want to load them all since it's a lot of data and takes too long.

[nstepien]

Could try something like this with useSWR: https://swr.vercel.app/

function LazyFormatter(props) {
  const { data } = useSWR(`/api/row/${props.row.id}`);

  if (!data) return null;

  return <>{data.name}</>;
}

function MyGrid() {
  const rows = [{ id: 1 }];

  return <DataGrid columns={columns} rows={rows} defaultColumnOptions={{ formatter: LazyFormatter }} />;
}

[amanmahajan7]

You can also use the scroll event and load as needed. Here is an example
https://github.com/adazzle/react-data-grid/blob/main/stories/demos/AllFeatures.tsx#L236