I'm currently trying to create a reusable component, that will pull data from a remote source, and update the table as needed if items change on the backend. Here's a simple component:

```
<React.Fragment>
    <Header />
    <table>
      <thead>
        <tr>
          {columns.map(c => (
            <th key={c.header}>{c.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>{data.map(row => children(row))}</tbody>
    </table>
  <Pagination />
</React.Fragment>

```

The goal was, that from my order page, I could call it like below:

```
<DataTable
  id="app/OrderPage/orders"
  url="http://localhost:8081/api/orders"
  columns={[
    { header: 'Name' },
    { header: 'Actions' },
  ]}
>
  {order => (
      <tr key={order.id}>
        <td>{order.name}</td>
        <td>
          <Link to={`/admin/orders/${order.id}`}>
            View
          </Link>
        </td>
      </tr>
    )}
</DataTable>

```

Now, the idea is I want to reuse this component in multiple places. I currently use redux-saga to do the fetching, and update the datatable when the data is returned. (Currently I'm providing an datatable ID, which is then being passed to FETCH\_DATA, LIMIT\_CHANGED, SEARCH\_CHANGED, etc..., which I then use to update the parts of the slice that need changing:

```
function dataTableReducer(state = initialState, action) {
  switch (action.type) {
    case INIT: {
      const { id, url, deletedItem } = action;
      return state.setIn(
        ['tables', id],
        initialTableState
          .set('id', id)
          .set('url', url)
          .set('deletedItem', deletedItem),
      );
    }
    case LOAD_DATA_SUCCESS:
      return state.setIn(['tables', action.id, 'data'], action.data.data);
    case LIMIT_CHANGED:
      return state.setIn(['tables', action.id, 'limit'], action.limit);
    case SEARCH_CHANGED:
      return state.setIn(['tables', action.id, 'search'], action.search);
    default:
      return state;
  }
}

```

My current saga for the DataTable component:

```
function* getData({ id }) {
  const dt = yield select(selectDataTableInstance(), { id });
  const { url, limit, search, page } = dt;

  const res = yield call(request, url, {
    qs: {
      limit,
      search,
      page,
    },
  });

  yield put(loadDataSuccess(id, res));
}

// Individual exports for testing
export default function* dataTableSaga() {
  yield all([
    takeEvery(LOAD_DATA, getData),
    takeEvery(LIMIT_CHANGED, getData),
    takeLatest(SEARCH_CHANGED, getData),
  ]);
}

```

The problem now becomes, **how do I add additional logic** to this component? For example, when a new order comes in over a websocket, I'd like the `<DataTable />` component to add that row to the top of the list. The problem is, I'd need to connect additional logic to the redux-saga that I have in place. My thought initially was to add a prop to the DataTable, like `deletedItem={DELETE_ORDER_SUCCESS}`, but this seems like a really nasty workaround. My reducer would need to loop through every rendered table in the slice, and check if the action.type === the one that was initialized when the table displayed.

I'm currently using [React Boilerplate](https://github.com/react-boilerplate/react-boilerplate).

TLDR:

* Have a reusable DataTable component
* Needs to fetch data/populate table. Has search/limit/pagination functionality
* Want to add additional hooks (Like addItem), that will add the item to the top of the list, if one comes from a websocket