Need to target specific child cell in table using React
I'm working on a horizontally scrolling table in React, however the requirement is that the right column and left column must be fixed and they could be filled with any content. Styling wise, I already have the part about being fixed and scrolling functional. However, I need to adjust the padding of the cell next to the first and last cells to make up for the extra space.
componentDidMount () {
if(this.props.rightFixedCol) {
console.log('right col should be fixed')
//Code to find width, and add it to the padding of next cell
}
if(this.props.leftFixedCol) {
console.log('left col should be fixed')
//Code to find width, and add it to the padding of next cell
}
}
This makes it easy to handle when they need to be fixed, however, targeting those cells is the hard part. I can't mess with the HTML, only the wrapper which contains the React component. Usually I would just use querySelectorAll, but since that's not an option inside the React component, I'm a bit stumped.
So how do I get the last cell in a row's width within "this" table? and then how do I set the second to last cell's right padding using React?
javascript reactjs
asked Nov 20 '18 at 20:18
RJ McLainRJ McLain
61
add a comment |
I'm working on a horizontally scrolling table in React, however the requirement is that the right column and left column must be fixed and they could be filled with any content. Styling wise, I already have the part about being fixed and scrolling functional. However, I need to adjust the padding of the cell next to the first and last cells to make up for the extra space.
componentDidMount () {
if(this.props.rightFixedCol) {
console.log('right col should be fixed')
//Code to find width, and add it to the padding of next cell
}
if(this.props.leftFixedCol) {
console.log('left col should be fixed')
//Code to find width, and add it to the padding of next cell
}
}
This makes it easy to handle when they need to be fixed, however, targeting those cells is the hard part. I can't mess with the HTML, only the wrapper which contains the React component. Usually I would just use querySelectorAll, but since that's not an option inside the React component, I'm a bit stumped.
So how do I get the last cell in a row's width within "this" table? and then how do I set the second to last cell's right padding using React?
javascript reactjs
asked Nov 20 '18 at 20:18
RJ McLainRJ McLain
61
You should add a class in your HTML based onthis.props.rightFixedColorthis.props.leftFixedCol. Then let your CSS handle the rest.
– Hubert Jarema
Nov 20 '18 at 20:46
@HubertJarema I have done that for the basic styling, however, I also need the specific width of that particular cell, in order to have it function as needed. Which is the problem I'm running into.
– RJ McLain
Nov 20 '18 at 21:08
Can you calculate it and add inline CSS style when rendering?
– Hubert Jarema
Nov 20 '18 at 21:22
@HubertJarema that's what I'm attempting to do, but unsure how
– RJ McLain
Nov 20 '18 at 22:43
Like this: reactjs.org/docs/dom-elements.html#style
– Hubert Jarema
Nov 21 '18 at 15:11
add a comment |
I'm working on a horizontally scrolling table in React, however the requirement is that the right column and left column must be fixed and they could be filled with any content. Styling wise, I already have the part about being fixed and scrolling functional. However, I need to adjust the padding of the cell next to the first and last cells to make up for the extra space.
componentDidMount () {
if(this.props.rightFixedCol) {
console.log('right col should be fixed')
//Code to find width, and add it to the padding of next cell
}
if(this.props.leftFixedCol) {
console.log('left col should be fixed')
//Code to find width, and add it to the padding of next cell
}
}
This makes it easy to handle when they need to be fixed, however, targeting those cells is the hard part. I can't mess with the HTML, only the wrapper which contains the React component. Usually I would just use querySelectorAll, but since that's not an option inside the React component, I'm a bit stumped.
So how do I get the last cell in a row's width within "this" table? and then how do I set the second to last cell's right padding using React?
javascript reactjs
asked Nov 20 '18 at 20:18
RJ McLainRJ McLain
61
I'm working on a horizontally scrolling table in React, however the requirement is that the right column and left column must be fixed and they could be filled with any content. Styling wise, I already have the part about being fixed and scrolling functional. However, I need to adjust the padding of the cell next to the first and last cells to make up for the extra space.
componentDidMount () {
if(this.props.rightFixedCol) {
console.log('right col should be fixed')
//Code to find width, and add it to the padding of next cell
}
if(this.props.leftFixedCol) {
console.log('left col should be fixed')
//Code to find width, and add it to the padding of next cell
}
}
This makes it easy to handle when they need to be fixed, however, targeting those cells is the hard part. I can't mess with the HTML, only the wrapper which contains the React component. Usually I would just use querySelectorAll, but since that's not an option inside the React component, I'm a bit stumped.
So how do I get the last cell in a row's width within "this" table? and then how do I set the second to last cell's right padding using React?
javascript reactjs
javascript reactjs
asked Nov 20 '18 at 20:18
RJ McLainRJ McLain
61
asked Nov 20 '18 at 20:18
RJ McLainRJ McLain
61
asked Nov 20 '18 at 20:18
RJ McLainRJ McLain
61
asked Nov 20 '18 at 20:18
RJ McLainRJ McLain
61
asked Nov 20 '18 at 20:18
RJ McLainRJ McLain
61
61
You should add a class in your HTML based onthis.props.rightFixedColorthis.props.leftFixedCol. Then let your CSS handle the rest.
– Hubert Jarema
Nov 20 '18 at 20:46
@HubertJarema I have done that for the basic styling, however, I also need the specific width of that particular cell, in order to have it function as needed. Which is the problem I'm running into.
– RJ McLain
Nov 20 '18 at 21:08
Can you calculate it and add inline CSS style when rendering?
– Hubert Jarema
Nov 20 '18 at 21:22
@HubertJarema that's what I'm attempting to do, but unsure how
– RJ McLain
Nov 20 '18 at 22:43
Like this: reactjs.org/docs/dom-elements.html#style
– Hubert Jarema
Nov 21 '18 at 15:11
add a comment |
You should add a class in your HTML based onthis.props.rightFixedColorthis.props.leftFixedCol. Then let your CSS handle the rest.
– Hubert Jarema
Nov 20 '18 at 20:46
@HubertJarema I have done that for the basic styling, however, I also need the specific width of that particular cell, in order to have it function as needed. Which is the problem I'm running into.
– RJ McLain
Nov 20 '18 at 21:08
Can you calculate it and add inline CSS style when rendering?
– Hubert Jarema
Nov 20 '18 at 21:22
@HubertJarema that's what I'm attempting to do, but unsure how
– RJ McLain
Nov 20 '18 at 22:43
Like this: reactjs.org/docs/dom-elements.html#style
– Hubert Jarema
Nov 21 '18 at 15:11
You should add a class in your HTML based on
this.props.rightFixedCol or this.props.leftFixedCol. Then let your CSS handle the rest.– Hubert Jarema
Nov 20 '18 at 20:46
You should add a class in your HTML based on
this.props.rightFixedCol or this.props.leftFixedCol. Then let your CSS handle the rest.– Hubert Jarema
Nov 20 '18 at 20:46
@HubertJarema I have done that for the basic styling, however, I also need the specific width of that particular cell, in order to have it function as needed. Which is the problem I'm running into.
– RJ McLain
Nov 20 '18 at 21:08
@HubertJarema I have done that for the basic styling, however, I also need the specific width of that particular cell, in order to have it function as needed. Which is the problem I'm running into.
– RJ McLain
Nov 20 '18 at 21:08
Can you calculate it and add inline CSS style when rendering?
– Hubert Jarema
Nov 20 '18 at 21:22
Can you calculate it and add inline CSS style when rendering?
– Hubert Jarema
Nov 20 '18 at 21:22
@HubertJarema that's what I'm attempting to do, but unsure how
– RJ McLain
Nov 20 '18 at 22:43
@HubertJarema that's what I'm attempting to do, but unsure how
– RJ McLain
Nov 20 '18 at 22:43
Like this: reactjs.org/docs/dom-elements.html#style
– Hubert Jarema
Nov 21 '18 at 15:11
Like this: reactjs.org/docs/dom-elements.html#style
– Hubert Jarema
Nov 21 '18 at 15:11
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400900%2fneed-to-target-specific-child-cell-in-table-using-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400900%2fneed-to-target-specific-child-cell-in-table-using-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You should add a class in your HTML based on
this.props.rightFixedColorthis.props.leftFixedCol. Then let your CSS handle the rest.– Hubert Jarema
Nov 20 '18 at 20:46
@HubertJarema I have done that for the basic styling, however, I also need the specific width of that particular cell, in order to have it function as needed. Which is the problem I'm running into.
– RJ McLain
Nov 20 '18 at 21:08
Can you calculate it and add inline CSS style when rendering?
– Hubert Jarema
Nov 20 '18 at 21:22
@HubertJarema that's what I'm attempting to do, but unsure how
– RJ McLain
Nov 20 '18 at 22:43
Like this: reactjs.org/docs/dom-elements.html#style
– Hubert Jarema
Nov 21 '18 at 15:11