How to change Table Cell width in Material-ui React table
I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.
I've tried manually setting the width in each cell like this:
<TableCell style={{ width: "10%" }}> Number </TableCell>
As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!
EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.
javascript reactjs material-ui react-table
asked Nov 21 '18 at 9:46
UciebilaUciebila
5518
add a comment |
I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.
I've tried manually setting the width in each cell like this:
<TableCell style={{ width: "10%" }}> Number </TableCell>
As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!
EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.
javascript reactjs material-ui react-table
asked Nov 21 '18 at 9:46
UciebilaUciebila
5518
add a comment |
I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.
I've tried manually setting the width in each cell like this:
<TableCell style={{ width: "10%" }}> Number </TableCell>
As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!
EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.
javascript reactjs material-ui react-table
asked Nov 21 '18 at 9:46
UciebilaUciebila
5518
I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.
I've tried manually setting the width in each cell like this:
<TableCell style={{ width: "10%" }}> Number </TableCell>
As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!
EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.
javascript reactjs material-ui react-table
javascript reactjs material-ui react-table
asked Nov 21 '18 at 9:46
UciebilaUciebila
5518
asked Nov 21 '18 at 9:46
UciebilaUciebila
5518
edited Nov 21 '18 at 15:44
Uciebila
asked Nov 21 '18 at 9:46
UciebilaUciebila
5518
asked Nov 21 '18 at 9:46
UciebilaUciebila
5518
asked Nov 21 '18 at 9:46
UciebilaUciebila
5518
5518
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
See here i have added a example for first column to have a custom width and wrap the content with custom CSS:
https://codesandbox.io/s/xv9orx4zrw
Add a constant value like the below and refer it in the column
const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };
Then in TD refer like this
<CustomTableCell style={customColumnStyle}>
answered Nov 21 '18 at 10:05
SenthilSenthil
7921515
This is just an example from the site I linked that does not have any customised column widths?
– Uciebila
Nov 21 '18 at 10:13
Please try now with the updated url codesandbox.io/s/xv9orx4zrw
– Senthil
Nov 21 '18 at 10:14
It changes the background colour, but changing the maxWidth makes no difference no matter I put in, 1 or 1000. But that does work in the linked code box so I'm not sure why this is happening when its all the same
– Uciebila
Nov 21 '18 at 13:51
Actually, it does make a very very slight difference in size at 1000 - but enough that I didnt notice it the first time. I'm currently using maxwidth 1px, because that still leaves it with huge gaps in between the columns
– Uciebila
Nov 21 '18 at 13:54
Never mind, I played with all the padding numbers for the rows and managed to work out the perfect number of padding/width for it to work properly
– Uciebila
Nov 21 '18 at 15:59
add a comment |
I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.
answered Nov 21 '18 at 16:01
UciebilaUciebila
5518
If you find it useful, then please mark it as correct answer.
– Senthil
Nov 22 '18 at 11:22
add a comment |
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%2f53409215%2fhow-to-change-table-cell-width-in-material-ui-react-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
See here i have added a example for first column to have a custom width and wrap the content with custom CSS:
https://codesandbox.io/s/xv9orx4zrw
Add a constant value like the below and refer it in the column
const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };
Then in TD refer like this
<CustomTableCell style={customColumnStyle}>
answered Nov 21 '18 at 10:05
SenthilSenthil
7921515
This is just an example from the site I linked that does not have any customised column widths?
– Uciebila
Nov 21 '18 at 10:13
Please try now with the updated url codesandbox.io/s/xv9orx4zrw
– Senthil
Nov 21 '18 at 10:14
It changes the background colour, but changing the maxWidth makes no difference no matter I put in, 1 or 1000. But that does work in the linked code box so I'm not sure why this is happening when its all the same
– Uciebila
Nov 21 '18 at 13:51
Actually, it does make a very very slight difference in size at 1000 - but enough that I didnt notice it the first time. I'm currently using maxwidth 1px, because that still leaves it with huge gaps in between the columns
– Uciebila
Nov 21 '18 at 13:54
Never mind, I played with all the padding numbers for the rows and managed to work out the perfect number of padding/width for it to work properly
– Uciebila
Nov 21 '18 at 15:59
add a comment |
See here i have added a example for first column to have a custom width and wrap the content with custom CSS:
https://codesandbox.io/s/xv9orx4zrw
Add a constant value like the below and refer it in the column
const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };
Then in TD refer like this
<CustomTableCell style={customColumnStyle}>
answered Nov 21 '18 at 10:05
SenthilSenthil
7921515
This is just an example from the site I linked that does not have any customised column widths?
– Uciebila
Nov 21 '18 at 10:13
Please try now with the updated url codesandbox.io/s/xv9orx4zrw
– Senthil
Nov 21 '18 at 10:14
It changes the background colour, but changing the maxWidth makes no difference no matter I put in, 1 or 1000. But that does work in the linked code box so I'm not sure why this is happening when its all the same
– Uciebila
Nov 21 '18 at 13:51
Actually, it does make a very very slight difference in size at 1000 - but enough that I didnt notice it the first time. I'm currently using maxwidth 1px, because that still leaves it with huge gaps in between the columns
– Uciebila
Nov 21 '18 at 13:54
Never mind, I played with all the padding numbers for the rows and managed to work out the perfect number of padding/width for it to work properly
– Uciebila
Nov 21 '18 at 15:59
add a comment |
See here i have added a example for first column to have a custom width and wrap the content with custom CSS:
https://codesandbox.io/s/xv9orx4zrw
Add a constant value like the below and refer it in the column
const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };
Then in TD refer like this
<CustomTableCell style={customColumnStyle}>
answered Nov 21 '18 at 10:05
SenthilSenthil
7921515
See here i have added a example for first column to have a custom width and wrap the content with custom CSS:
https://codesandbox.io/s/xv9orx4zrw
Add a constant value like the below and refer it in the column
const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };
Then in TD refer like this
<CustomTableCell style={customColumnStyle}>
answered Nov 21 '18 at 10:05
SenthilSenthil
7921515
edited Nov 21 '18 at 10:20
answered Nov 21 '18 at 10:05
SenthilSenthil
7921515
answered Nov 21 '18 at 10:05
SenthilSenthil
7921515
answered Nov 21 '18 at 10:05
SenthilSenthil
7921515
7921515
This is just an example from the site I linked that does not have any customised column widths?
– Uciebila
Nov 21 '18 at 10:13
Please try now with the updated url codesandbox.io/s/xv9orx4zrw
– Senthil
Nov 21 '18 at 10:14
It changes the background colour, but changing the maxWidth makes no difference no matter I put in, 1 or 1000. But that does work in the linked code box so I'm not sure why this is happening when its all the same
– Uciebila
Nov 21 '18 at 13:51
Actually, it does make a very very slight difference in size at 1000 - but enough that I didnt notice it the first time. I'm currently using maxwidth 1px, because that still leaves it with huge gaps in between the columns
– Uciebila
Nov 21 '18 at 13:54
Never mind, I played with all the padding numbers for the rows and managed to work out the perfect number of padding/width for it to work properly
– Uciebila
Nov 21 '18 at 15:59
add a comment |
This is just an example from the site I linked that does not have any customised column widths?
– Uciebila
Nov 21 '18 at 10:13
Please try now with the updated url codesandbox.io/s/xv9orx4zrw
– Senthil
Nov 21 '18 at 10:14
It changes the background colour, but changing the maxWidth makes no difference no matter I put in, 1 or 1000. But that does work in the linked code box so I'm not sure why this is happening when its all the same
– Uciebila
Nov 21 '18 at 13:51
Actually, it does make a very very slight difference in size at 1000 - but enough that I didnt notice it the first time. I'm currently using maxwidth 1px, because that still leaves it with huge gaps in between the columns
– Uciebila
Nov 21 '18 at 13:54
Never mind, I played with all the padding numbers for the rows and managed to work out the perfect number of padding/width for it to work properly
– Uciebila
Nov 21 '18 at 15:59
This is just an example from the site I linked that does not have any customised column widths?
– Uciebila
Nov 21 '18 at 10:13
This is just an example from the site I linked that does not have any customised column widths?
– Uciebila
Nov 21 '18 at 10:13
Please try now with the updated url codesandbox.io/s/xv9orx4zrw
– Senthil
Nov 21 '18 at 10:14
Please try now with the updated url codesandbox.io/s/xv9orx4zrw
– Senthil
Nov 21 '18 at 10:14
It changes the background colour, but changing the maxWidth makes no difference no matter I put in, 1 or 1000. But that does work in the linked code box so I'm not sure why this is happening when its all the same
– Uciebila
Nov 21 '18 at 13:51
It changes the background colour, but changing the maxWidth makes no difference no matter I put in, 1 or 1000. But that does work in the linked code box so I'm not sure why this is happening when its all the same
– Uciebila
Nov 21 '18 at 13:51
Actually, it does make a very very slight difference in size at 1000 - but enough that I didnt notice it the first time. I'm currently using maxwidth 1px, because that still leaves it with huge gaps in between the columns
– Uciebila
Nov 21 '18 at 13:54
Actually, it does make a very very slight difference in size at 1000 - but enough that I didnt notice it the first time. I'm currently using maxwidth 1px, because that still leaves it with huge gaps in between the columns
– Uciebila
Nov 21 '18 at 13:54
Never mind, I played with all the padding numbers for the rows and managed to work out the perfect number of padding/width for it to work properly
– Uciebila
Nov 21 '18 at 15:59
Never mind, I played with all the padding numbers for the rows and managed to work out the perfect number of padding/width for it to work properly
– Uciebila
Nov 21 '18 at 15:59
add a comment |
I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.
answered Nov 21 '18 at 16:01
UciebilaUciebila
5518
If you find it useful, then please mark it as correct answer.
– Senthil
Nov 22 '18 at 11:22
add a comment |
I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.
answered Nov 21 '18 at 16:01
UciebilaUciebila
5518
If you find it useful, then please mark it as correct answer.
– Senthil
Nov 22 '18 at 11:22
add a comment |
I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.
answered Nov 21 '18 at 16:01
UciebilaUciebila
5518
I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.
answered Nov 21 '18 at 16:01
UciebilaUciebila
5518
answered Nov 21 '18 at 16:01
UciebilaUciebila
5518
answered Nov 21 '18 at 16:01
UciebilaUciebila
5518
answered Nov 21 '18 at 16:01
UciebilaUciebila
5518
5518
If you find it useful, then please mark it as correct answer.
– Senthil
Nov 22 '18 at 11:22
add a comment |
If you find it useful, then please mark it as correct answer.
– Senthil
Nov 22 '18 at 11:22
If you find it useful, then please mark it as correct answer.
– Senthil
Nov 22 '18 at 11:22
If you find it useful, then please mark it as correct answer.
– Senthil
Nov 22 '18 at 11:22
add a comment |
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%2f53409215%2fhow-to-change-table-cell-width-in-material-ui-react-table%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
