How to change Table Cell width in Material-ui React table












1















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







share|improve this question





























    1















    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







    share|improve this question



























      1












      1








      1








      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







      share|improve this question
















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 21 '18 at 15:44







      Uciebila

















      asked Nov 21 '18 at 9:46









      UciebilaUciebila

      5518




      5518
























          2 Answers
          2






          active

          oldest

          votes


















          0














          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}>





          share|improve this answer


























          • 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



















          0














          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.






          share|improve this answer
























          • If you find it useful, then please mark it as correct answer.

            – Senthil
            Nov 22 '18 at 11:22











          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
          });


          }
          });














          draft saved

          draft discarded


















          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









          0














          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}>





          share|improve this answer


























          • 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
















          0














          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}>





          share|improve this answer


























          • 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














          0












          0








          0







          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}>





          share|improve this answer















          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}>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 21 '18 at 10:20

























          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



















          • 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













          0














          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.






          share|improve this answer
























          • If you find it useful, then please mark it as correct answer.

            – Senthil
            Nov 22 '18 at 11:22
















          0














          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.






          share|improve this answer
























          • If you find it useful, then please mark it as correct answer.

            – Senthil
            Nov 22 '18 at 11:22














          0












          0








          0







          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.






          share|improve this answer













          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          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



















          • 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


















          draft saved

          draft discarded




















































          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.




          draft saved


          draft discarded














          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





















































          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







          -

          Popular posts from this blog

          "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

          Image
          .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 2 total noob sorry any help greatly appreciated. I keep getting this "Incorrect syntax near the keyword 'ON'." heres my codes code one CREATE TABLE supplier ( supplierID INT PRIMARY KEY, ISBN INT FOREIGN KEY REFERENCES book(ISBN), price DECIMAL (5,2), ON UPDATE CASCADE, ON DELETE CASCADE, ); code two CREATE TABLE orders ( orderID INT PRIMARY KEY, customerID INT FOREIGN KEY REFERENCES customer(customerID), ISBN INT FOREIGN KEY REFERENCES book(ISBN), orderDate date, ON UPDATE CASCADE, ON DELETE CASCADE, ); Ive run out of stuff to try other than dumbing it down to uselessness. ...
          Read more

          Alcedinidae

          Image
          Alcedinidae Martin-pêcheur à dos bleu ( Alcedo azurea ) Classification (COI) Règne Animalia Embranchement Chordata Sous-embr. Vertebrata Classe Aves Ordre Coraciiformes Famille Alcedinidae Rafinesque, 1815 Les Alcédinidés ou Alcedinidae forment une famille d'oiseaux plus connus sous les noms de martins-pêcheurs et martins-chasseurs. Sommaire 1 Description 2 Répartition et habitat 3 Systématique 3.1 Liste alphabétique des genres 3.2 Liste des espèces 4 Chez les Anciens : l'alcyon 4.1 Étymologie (Littré) 4.2 Oiseau « fabuleux » ? 5 Notes 6 Articles connexes 7 Liens externes 7.1 Bibliographie Description | Ce sont des oiseaux compacts de taille petite à moyenne (10 à 46 cm), au bec droit et long, en forme de poignard. Leurs pattes sont courtes, et ils portent un plumage aux couleurs vives. Répartition et habitat | Cosmopolites, ils fréquentent surtout ...
          Read more

          Origin of the phrase “under your belt”?

          Image
          .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0; } 17 1 Today, I found myself discussing what students should have "under their belts" during a lecture, and I wondered to myself if there was some inappropriate undertone here that I might be unaware of. Question : What is the origin of the phrase "under your belt"? A google search revealed some webpages (e.g. [1]) that assert its origin is related to consumption of food -- once a meal has been eaten, it's under your belt (which is a relief). However, with such websites, I have no way to determine fact from "random guy on the internet making stuff up". etymology idioms ...
          Read more