Issue 1:
i am trying to render a header into the existing header by creating a div into the table

HTML Code

<table
<div id="container"></div>
<tr><th/><th/>....<th/></tr>------> deleting this row when my header is getting rendered
<tr><td/><td/>....<td/></td>
</table>

Script

var StickyDiv = React.createClass({
mixins: [SimplePageScrollMixin, SimpleResizeMixin],
displayName:"StickyDiv",
propTypes:{
offsetTop: React.PropTypes.number,
zIndex: React.PropTypes.number,
className: React.PropTypes.string
},
getInitialState : function(){
return {
fix: false,
width: null
};
},
getDefaultProps: function() {
return {
offsetTop: 38,
className: '',
zIndex: 9999
};
},
handleResize : function(){
this.checkWidth();
this.checkPositions();
},
handleScroll: function () {
this.checkWidth();
this.checkPositions();
},
checkPositions: function(){
var pos;
if('findDOMNode' in React){
pos = util.findPosRelativeToViewport(React.findDOMNode(this));
} else {
pos = util.findPosRelativeToViewport(this.getDOMNode());
}
if (pos[1] <=this.props.offsetTop){
this.setState({fix: true});
} else {
this.setState({fix: false});
}
},
checkWidth: function () {
var width = null;
if (this.refs.duplicate) {
if('findDOMNode' in React){
width = React.findDOMNode(this.refs.duplicate).getBoundingClientRect().width;
} else {
width = this.refs.duplicate.getDOMNode().getBoundingClientRect().width;
}
} else {
if('findDOMNode' in React){
width = React.findDOMNode(this.refs.original).getBoundingClientRect().width;
} else {
width = this.refs.original.getDOMNode().getBoundingClientRect().width;
}

}
if (this.state.width !== width) {
this.setState({
width: width
});
}
},
componentDidMount: function () {
this.checkWidth();
},
render: function () {
var divStyle;
if (this.state.fix) {
divStyle = {
display: 'block',
position: 'fixed',
width: this.state.width ? (this.state.width + 'px') : null,
top: this.props.offsetTop,
content: "text/html"
};

return (
React.createElement("div", {style: {zIndex : this.props.zIndex, position:'relative', width:'100%'}},
React.createElement("div", {ref: "duplicate", key: "duplicate", style: {visibility:'hidden'}},
this.props.children
),
React.createElement("div", {ref: "original", key: "original", style: divStyle},
this.props.children
)
));
}
else {
divStyle = {
display: 'block',
position: 'relative',
width:'100%'
};
return (
React.createElement("div", {style: {zIndex : this.props.zIndex, position:'relative', width:'100%'}},
React.createElement("div", {ref: "original", key: "original", style: divStyle},
this.props.children
)
));
}
}
});

MyComponent = React.createClass({displayName: "MyComponent",

getInitialState: function() {
return {
isSelected: false
};
},
render: function() {

var myVar = "<%= request.getAttribute("xxxx") %>"
return (
React.createElement(StickyDiv, null,
React.createElement("table",{className: "", cellSpacing: "0", cellPadding: "0", border: "0", width: "100%"},
React.createElement("tr", null,
React.createElement("th", {valign:'middle', align:'left', width:'3%'},React.createElement("img", {src: "<%=appRoot%>/common/images/icon_confirm.gif", className: "recentlyProcessedIcon"})),
React.createElement("th", {width:'23%'},React.createElement("span", null,"second coloumn")),
React.createElement("th", {width:'9%'},React.createElement("span", {nowrap:true},"third coloumn ")),
React.createElement("th", {width:'12%'},React.createElement("span", null,"fourth coloumn")),
React.createElement("th", {width:'11.5%'},React.createElement("span", null,"fifith")),
React.createElement("th", {width:'10.5%'},React.createElement("span",null,"sixth")),
React.createElement("th", {width:'3%',valign:'middle'},React.createElement("span", null,"seventh"))
) )));
}});

React.render(React.createElement(MyComponent, null),
document.getElementById('container')
);

it is being rendered but it is not rendered in place of exisitng row but instead as a seperate row.

Is there any way i could render this new element as a row to the existing table..?????/

with this code sticky is working with this header but the all the coloumns are misaligned since i guess there is no cordination between the two tables i guess

Thanks

Issue 2:
Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When developing an external library locally and using yarn link to link the library to a local react app the "hooks can only be called inside the body of a function component" error comes up. However, after publishing to npm and using the published version in the local react app everything works as expected.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Create a library that's built with hooks (my-hooks-lib)

Create a local app that uses the library (my-react-app) using CRA

yarn link in my-hooks-lib and in my-react-app run yarn link my-hooks-lib

What is the expected behavior?

yarn start in the react app should use hooks and render normally

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react and react-dom 16.7.0-alpha.2

OSX