react-data-grid with pouchdb/couchdb

Question

I would like to use pouchdb and react-data-grid together, but I am struggling to understand the right approach.

pouchdb.allDocs to retrieve column definitions and the first batch of rows and then pouchdb.changes to accept updates from other collaborative users. Both these functions are asynchronous returning a promise.

All the react-data-grid examples that I can find use inline static json column definitions and inline static rows.

Is it feasible to render an empty grid to start with and then populate the column definitions and rows as they arrive. The rows looks possible, one row at a time, but I can't see a way to dynamically bring the column definitions nor bulk add the rows from the allDocs callback.

Suggestions very welcome.

Answer 1

As I read more, the answer has become apparent.

Use conditional rendering based on a state indicating whether pouchdb has return allDocs. Before allDocs - render a spinning top or "loading" indication. After allDocs - set the rows and columns into the state, and render the ReactDataGrid.