Allow rows to load their own data?

[ianstormtaylor]

Hey @tannerlinsley, I'm trying to figure out if react-table can be used for a situation where the data about rows is fetched asynchronously in a hook inside the <Row> component. This allows for rows to be individually loaded as needed, and for React Suspense to render fallbacks until they've loaded.

Consider this pseudo code:

const UserTable = ({ userIds }) => {
  return (
    <table>
      {userIds.map((id) => (
        <Suspense key={id} fallback={<UserRowPlaceholder />}>
          <UserRow id={id} />
        </Suspense>
      ))}
    </table>
  )
}

const UserRow = ({ id }) => {
  const user = useUser(id)
  return (
    <tr>
      <td><img src={user.avatar} /></td>
      <td>{user.name}</td>
      <td>{user.email}</td>
    </tr>
  )
}

// A fake row component that just renders gray shapes.
const UserRowPlaceholder = () => {}

// A hook that loads user information asynchronously with Suspense.
const useUser = (id) => {}

As you can see the rows are self-sufficient and load the data they need.

The trouble is that the data of the table is only ever the list of userIds. And sorting or filtering by properties like user.name or user.email is not possible with just the IDs. There would need to be some way for the individual rows to tell the table about new metadata associated with a row as it is loaded, so that it could offer sorting abilities and even keep the rows sorted as new data streamed in.

Is this possible with react-table?

I realize this may be more of an architectural question, but I think this pattern would be the ideal for the big picture of how data is loaded, so just curious to see if it's possible.

Thanks!