Implement a data grid

[ygrishajev]

data-grid is a client-side pattern to render list data. we might want to consider using some existing solutions or implement our own. To my experience existing solutions are either paid or not easy to use. This task might involve some thinking/investigation stage.

Some acceptance criteria:

• should be modular consisting of a data only react hook and a generic list component (using the hook) accepting a row template
• should be implementing pagination on both the hook level and component level

The hook might look smth like:

function useDataGrid<T extends any>({ endpoint: string, params: QueryParams }): {
  data: T,
  isLoading: boolean,
  ...other state props,
  pagination: {
    hasNextPage: boolean,
    hasPreviousPage: boolean,
    nextPage: () => void,
    previousPage: () => void,
  }
}

The component interface might be accepting a template component or columns config with data getter, actions, etc.

[pcfreak30]

I am not sure how much react-table/react-query is being used but it feels like this implies re-implementing logic on a solved problem. If this is just a higher layer hook, I would suggest ensuring your just creating reusable abstractions/lego's.

[ygrishajev]

@pcfreak30 I'm 100% for smth ready to use if it would apply to our use cases. As it's mentioned this task would require some investigation stage.
React table looks like smth we could use, so I'd say this would be smth to test for sure before jumping into own implementation.

[ygrishajev]

ok, react table looks promising. pausing this as we need to fix some performance issues with grants fetching first