Dynamic table component in ReactJs

Question

Being all new in the exciting world of ReactJs, I'm struggling to build the following table component from my data.

I've already set up an api endpoint for it at:

http://domain.com/api/sales/{period-unit}/{period}/{products}
eg. http://domain.com/api/sales/day/1/1,2,3

Which would return the following json (for day 1):

[
  {
    "productId": 1,
    "productSalesCount": 4
  },
  {
    "productId": 2,
    "productSalesCount": 65
  },
  {
    "productId": 3,
    "productSalesCount": 56
  }
]

In jquery I can fetch all the data from all days if I make a GET request for each day like this:

var count = 365 // days in a year
for (var i = 0; i < count; i++) {
    $.ajax('http://domain.com/api/sales/day/' + i + "/products/1,2,3"), {});
}

While I could of course find some rather ugly way of building this table in .js and injecting it into the DOM using jquery and .append, I would love to know how to build a reusable table component like this in ReactJs (ideally JSX) - but the form of my data vs the table layout makes it a little hard.

Any genius here who can figure out how to build a table like this, the right way (ideally with React and JSX?)?

If you just want to get this to work, instead of figuring it out yourself, see react.rocks/tag/DataTable for many pre-built components. In general, you shouldn't worry about your data structure when building a view in React or any other view framework - instead, build an intermediate process to fetch and format the data appropriately. — nrabinowitz
– nrabinowitz, Commented Sep 7, 2015 at 22:41
"But the form of my data vs the table layout makes it a little hard". What is it about the form of your data + table layout makes it difficult? I'm guessing it's the fact that you have to issue several requests in order retrieve data for all 365 days, and then merge them all back onto the table? I just want to double check before I answer. — Sal Rahman
– Sal Rahman, Commented Sep 7, 2015 at 23:29
I guess merging it in a form suitable for the table rendering it my main issue, and I'm also a little lost how to model the right components with ReactJs — Dac0d3r
– Dac0d3r, Commented Sep 8, 2015 at 7:13

Clarkie · Accepted Answer · 2015-09-08 06:21:46Z

2

I'd suggest you manipulate the responses from your api calls all together into one array of objects using a combination of map and reduce:

[
  { productId: 1, day1: 12, day2: 15, day3: 16, ... , day365: 12},
  { productId: 2, day1: 12, day2: 15, day3: 16, ... , day365: 12},
  { productId: 3, day1: 12, day2: 15, day3: 16, ... , day365: 12}
]

Once you've done that you can easily use something like reactable

var Table = Reactable.Table;
React.renderComponent(
    <Table className="table" data={allSalesByProduct} />,
    document.getElementById('table')
);

answered Sep 8, 2015 at 6:21

Clarkie

7,5709 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Clarkie Over a year ago

If you convert it to the format I suggested then you'll have a column for each. If you want further customisation then you can break it down into cells using <Tr> and <Td> components (github.com/glittershark/reactable#even-more-customization)

Collectives™ on Stack Overflow

Dynamic table component in ReactJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related