Uncaught in promise TypeError: row.type is not a constructor about react-sticky-table HOT 20 CLOSED

Gotcha - makes sense that it's causing an error. I don't have the bandwidth to patch and old version, but might be able to add support for multiple columns on the latest version today. I'll give it a go later.

from react-sticky-table.

https://henrybuilt.github.io/react-sticky-table/?path=/story/basic--multiple-changing-stickies

from react-sticky-table.

Perhaps there are 0 rows or 0 cells in the row? The getBoundingClientRect error is what makes me suspect that. If that's the case, we don't handle 0 rows or 0 cells in a row properly yet, but that's going to be fixed soon: #26

Are you using our <Row> and <Cell> components or your own? If you're not using ours, you probably need to subclass/extend them at least.

If that's not the issue, v2.0.2 may fix your issue for now (row.type dependency was introduced in v2.0.3)

from react-sticky-table.

I use just the Row/Cell components from the library.

And there's a lot of rows and cells. My table work well if I replace Cell with td Rowwith tr and StickyTable with table.

from react-sticky-table.

@spyx08 I'd recommend simplifying your table so it looks like the following to see if it's a problem related to using .map:

<StickyTable>
  <Row>
    <Cell>a</Cell>
    <Cell>b</Cell>
  </Row>
</StickyTable>

Please let me know if that doesn't work and include the version of react and react-dom you're using.

If it does, slowly start adding in your map functionality, and then the props, etc... When it starts to break, share the closest thing to what you want that wasn't breaking, and then the changed version that actually broke.

from react-sticky-table.

That really strange, it seems to works when i add static Rows and Cells after my maps but now I get this error

TypeError: Cannot read property 'style' of undefined

It occurs on cell element.

from react-sticky-table.

Try with two rows - that should work:

<StickyTable>
  <Row>
    <Cell>a</Cell>
    <Cell>b</Cell>
  </Row>
  <Row>
    <Cell>a</Cell>
    <Cell>b</Cell>
  </Row>
</StickyTable>

from react-sticky-table.

Yes this works, but i want it to be dynamic.
I can generate rows dynamically with .map() with static <Cell> if and only if there's a static <Row> with the same number of <Cell> after my loop. @

from react-sticky-table.

@spyx08 I understand. .map() works for just about everyone else, but something about your configuration is causing issues, which is why I suggested slowly adding in your functionality until it starts breaking, and then to share what made it break.

from react-sticky-table.

I just retry few days after. Without changements and apparently there's no issue.
Can't understand why but it's good.

One more little question, can we change the style of the table ?
What are the tips ? Override the existing classes ? inline style ?
Can we change the width of cells ? Thanks

from react-sticky-table.

@spyx08 I recommend overriding existing classes for table element styles. Cell width should be set by putting an element inside the Cell, and setting the width of that. If you try to set a width directly on the Cell, it may get overridden because the table has to synchronize cell sizes in the header and column with the body.

Glad you figured it out!

from react-sticky-table.

@maxhudson Thanks a lot.
I've big IE performance issues with large amount of data...
Apparently it's due to the Stickytable component (100 rows with 75 cols).
Can't upgrade the perf (i'm generating the data format on user demand (inverted table)).

from react-sticky-table.

@spyx08 yeah ie support is not great. This is not a lightweight sticky table unfortunately.

Do you need both the sticky column and header? Do you need dynamically sized cell widths/heights? If the answer to either of those is no, you should be able to do something much more lightweight with plain CSS.

The massive performance cost here is the syncing of the cell sizes. Since there is a header table and a body table, the header cell sizes aren't tied to the body cell sizes which means they have to be manually resized.

We can probably add an option for fixed cell sizes that is much more performant.

from react-sticky-table.

I'm having the same error but due to the use of styled-components. When I wrap the table's Row or Cell with the styled-components styled method that changes the table's element type and then the table crashes with this error. I'm using version 2.0.4 of this library with styled-components version 4.

from react-sticky-table.

@testacode unfortunately I don't have experience with styled components - some other contributors implemented that. How come you're using such an old version?

from react-sticky-table.

well, I'm using 2.0.4 because it supports multiple column fixation.

from react-sticky-table.

Thanks @maxhudson that would be really neat. Thanks! Let me know how can I buy you some coffee? (donation) ;)

from react-sticky-table.

@testacode about to publish multiple sticky columns @5.0.0

Here's the PR if you or anyone else is curious - pretty heavyweight: #88

I tried to avoid affecting users that didn't need multiple stickies, and follow react-y patterns, and I think I did - seems reasonably performant.

from react-sticky-table.

@testacode about to publish multiple sticky columns @5.0.0

Here's the PR if you or anyone else is curious - pretty heavyweight: #88

I tried to avoid affecting users that didn't need multiple stickies, and follow react-y patterns, and I think I did - seems reasonably performant.

Very much appreciated! will give it a try. And please let me know how to buy you a coffee! I insist.

from react-sticky-table.

@testacode let me know how it works - I don't have a coffee purse set up, so all good, but thank you! I do most of the work outside of work hours but it's technically through a company, so not sure how that'd work also...

from react-sticky-table.