Approach for DataGrid with remote data

[aaronmaturen]

What should the approach for loading remote data to populate the DataGrid?

I'm kinda in the camp that if we make rows optional, we can then allow devs to pass in a pagination function in lieu of the default one that slices the rows:

For example

function useStarWarsPagination<T>(
  props: UseDataPaginationProps<T> = {}
): UseDataPaginationReturn<T> {

  const getPageItems = async (page: number) => {
    const response = await fetch(`https://swapi.dev/api/people/?page=${page}`);
    const responseObject = await response.json();
    
    return responseObject.results.map((person:any) => {
      return {
        ...person,
        id: person.url.split('/').pop()
      }
    });
  };
    
  return {
    getPageItems,
    itemsPerPage: 10, // this is a constant from swapi
    length: 82, // this would have to have a function to update the count 
  };
}

<DataGrid
  columns={[
    { field: 'name', header: 'Name' },
    { field: 'gender', header: 'Gender' },
    { field: 'eye_color', header: 'Eye Color' },
  ]}
  paginationHook={useStarWarsPagination}
/>

[aaronmaturen]

Made a quick POC with PR #331

[aaronmaturen]

https://storybook-preview-331--upbeat-sinoussi-f675aa.netlify.app/?path=/story/datagrid--star-wars-data

[rcgillet]

The other option that we could look at would be to add a mode prop that allows for either client or server side loading of rows. If using the Datagrid in server mode, the consumer would have to provide the length that would be the number of items in total as well as use the onPageChange callback to load the new rows for each page. Once they are loaded the props would be changed and used in a controlled manner to give Datagrid the rows and page number.

[aaronmaturen]

Is this taking away the difference between DataGrid and Table Pagination? At this point couldn't the Table just be used (albeit we'd need a rows.map(data => <tr><td></td>...</tr>) ... but shouldn't DataGrid be opinionated?

[aaronmaturen]

In my head I like the idea of letting everything be controlled with a funciton (or hook), then we have a contract for anything that can be paginated and anything that uses pagination ... we could have a beautiful set of card search results like AirBnB or the rows in the DataGrid and both views could use the same paginated function?

In the same line... if it's even more generic than just pagination it could be used for filtering and fetching remote data for the charts and tables... there's a default function that handles it from rows for datagrid and data for the charting... but as long as the contracts are the same we'd be in good shape...

Pagination is really just adding a page filter to a request 🤔