dynamic sticky count supported & npmignore updated

• sticky count props can now be updated from values like 1, to 2, back to 1, and css properties derived from "sticky insets" will always be set properly
• our new npm publish list:

npm notice 1.1kB  LICENSE      
npm notice 19.5kB dist/index.js
npm notice 41B    index.js     
npm notice 2.7kB  package.json 
npm notice 3.6kB  README.md

more than 2 stickies bug fix

There was a bug where only the top-leftmost and bottom-rightmost cells were being used to calculate sticky cell sizes.

So when there were:

• 3 columns
• and the 2nd one was larger than the 1st

the 3rd one would falsely assume the 2nd was the same size as 1st.

This is now fixed. Additional playground story now available with resizable columns.

multiple stickies

Previously you could only have 0 or 1 sticky left/rightcolumns, headers, and footers respectively.

Now you can have as many as you want thanks to a setInterval poll (on resize events don't work, so polling has to be done). This polling won't take place unless you have at least 2 stickies on some side.

the pull request

example: try clicking inside a sticky header/column/footer

sticky right column & footer, custom borders

New supported prop list:

• sticky count
  • stickyHeaderCount: 0 or 1 - default: 1
  • leftStickyColumnCount: 0 or 1 - default: 1
  • rightStickyColumnCount: 0 or 1 - default: 0
  • stickyFooterCount: 0 or 1 - default: 0
• z-index
  • headerZ: default: 2 (sticky corners are the greater of their two sides + 1)
  • leftColumnZ: default: 2
  • rightColumnZ: default: 2
  • footerZ: default: 2
• border
  • borderWidth: default: '2px'
  • borderColor: default: '#e5e5e5'
• wrapperRef: default: undefined, value: React ref

No longer supported due to ambiguity: stickyColumnCount, columnZ

package fix

Removed npm as a dependency (it snuck in there somehow)

Various bug fixes

Fixes:

• Random ids were causing collisions in some instances. Now using refs instead of selecting wrapper element by id
• Scrollbars weren't resizing on cell resize. Now they are.

Rendering Rows from Separate Component Supported (kind of)

While we don't recommend doing this, you can create a separate component that manages the rendering of each row. It should work fine if all you're doing is implementing a .render() method.

Subclassing <Cell> shouldn't cause any problems, but rendering <Row> elements from another component could behave unexpectedly because <StickyTable> is breaking the <Row>s up into groups of <Cell>s (there are four: corner, header, column, and body) and putting them back into new <Row> components. Each of these groups gets its own <div> with display: table and then they're all synced up.

Scrollbar bug fix

Scrollbars were covering content due to scrollbar size calculation failing.

When scrollbars appear, content is now padded by scrollbar size to keep them from overlapping.

React Sticky Table 2

• Multiple columns/headers
  • previously, only 1 or 0 were options
• Lighter-weight resize detection on sticky elements in addition to body
  • previously, only body cell resizes would be detected
• 1:1 mapping of provided cells/rows to rendered cells rows
  • previously, sticky cells would be rendered twice
• Native vertical scrolling and better DOM structure
  • previously, both vertical and horizontal scrolling were non-native
• 0 dependencies
  • previously, 1
• Cleaner namespace (eliminated use of ids)

v2 should be 95% compatible with v1, but changes that could cause issues include:

• ids have been removed
• DOM has been restructured minimally
• some mild function renaming
• some mild changes to styles
• cells beneath sticky headers/columns are no longer present

Sticky Corner

The top left corner is now sticky in both directions when both columns are present. This can be seen clearly in our demo.

Previously, the sticky header would scroll to the left and cover the sticky column header. Now the sticky column header stays above the sticky column at all times if it is enabled.