Adjusting the gap between TableRows in Material-UI

Is there a way to increase the spacing between TableRow MaterialUI components in my code?

<S.MainTable>
  <TableBody>
   {rows.map(row => {
     return (
       <S.StyledTableRow key={row.id}>
         <TableCell component="th" scope="row">{row.name}</TableCell>
         <TableCell numeric>{row.calories}</TableCell>
         <TableCell numeric>{row.fat}</TableCell>
         <TableCell numeric>{row.carbs}</TableCell>
         <TableCell numeric>{row.protein}</TableCell>
       </S.StyledTableRow>
           );
         })}
  </TableBody>
</S.MainTable>
javascriptcssreactjsmaterial-uijsx

Answer №1

Include the following code snippet in your table's stylesheet:

{
     border-spacing: 0 5px !important;
     border-collapse: separate !important;
}

Answer №2

To create spaces between the rows of a table, you can specify paddingBottom and paddingTop within the TableCell component like this:

<TableCell style={{ paddingBottom: 10, paddingTop: 10 }} colSpan={2}>
           <Collapse in={open} timeout="auto" unmountOnExit>
               <Box margin={1}>
                   <Typography variant="h6" gutterBottom component="div">
                       ENGAGEMENT HISTORY
           </Typography>
                   <Table size="small" aria-label="purchases">
                       <TableHead>
                           <TableRow>
                               <TableCell>Date</TableCell>
                               <TableCell>Club</TableCell>
                               <TableCell align="right">Staff</TableCell>
                           </TableRow>
                       </TableHead>
                       <TableBody>
                           {row.engagementHistory.map((historyRow) => (
                               <TableRow key={historyRow.date}>
                                   <TableCell component="th" scope="row">
                                       {historyRow.date}
                                   </TableCell>
                                   <TableCell>{historyRow.contact}</TableCell>
                                   <TableCell align="right">{historyRow.staff}</TableCell>
                               </TableRow>
                           ))}
                       </TableBody>
                   </Table>
               </Box>
           </Collapse>
       </TableCell>

https://i.sstatic.net/PIsln.png

Answer №3

Have you tried using the "break" tag? Alternatively, you could achieve a similar effect with margin and padding.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expanding the search textfield in material-table using Material-UI

I have been working with the material-table library and I am trying to achieve the same expandable search text field functionality as shown in this example from Material-UI's documentation. However, I am facing challenges in customizing the style of t ...

reactjsmaterial-uimaterial-table

Angular2 - Access to fetch at 'https://example.com' from

Requesting some guidance on integrating the forecast API into my angular2 application. Currently facing a Cross-Origin Error while attempting to access the API. Any suggestions on resolving this issue? search(latitude: any, longitude: any){ consol ...

javascriptangulargetcross-domain

An error occurred while trying to retrieve a resource from the bower_components directory using Vue.js CLI

I encountered an error in my project when trying to reference CSS and JS files. Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/bower_components/bootstrap/dist/css/bootstrap.min.css This is how my file ...

htmlcssvue.jsbower

Triggering the focus() function programatically for a Material UI Select field: A step-by-step guide

In my app forms, I have implemented a feature that allows users to utilize the enter button to quickly move to specified fields when using a ten-key keyboard. Upon pressing enter, the code performs a DOM lookup and triggers the focus() function on the next ...

reactjsmaterial-ui

Deleting lines from JSON object using Angular or JavaScript

On my webpage, I have a list where you can add a new line by pressing the "+" button (easy with push), but I'm not sure how to remove lines using the "X" button. https://i.stack.imgur.com/nm06A.png This is the JSON structure: "priceExtra" : [ ...

javascriptangularjsjson

The combination of Node.js and a Telegram bot

I am trying to utilize a telegram bot to access a specific route on a website. Within the website's routes.js file, I have: app.get('/api/getalert', getAlert); and var getAlert = function(req, res) { var id = req.query.id; ...

javascriptnode.jstelegram-bot

Can you explain the purpose of material-ui theme.palette.primary.light?

Can you explain the purpose of material-ui theme.palette.primary.light? I understand that theme.palette.primary.dark is used for the hover state color of a primary button and main is for the normal button color. However, I am curious about the significan ...

reactjsmaterial-ui

Using the MoveToElement and click functions in Protractor with Node.js for automated browser

Trying to click on a checkbox in our application. I have successfully implemented it in Selenium Java using the code below, but struggling to do the same in Protractor Node.js. Any assistance would be appreciated. Selenium- Java : Actions actions ...

javascriptnode.jsselenium-webdriverprotractor

Assigning active classes based on the href attributes of child <a> tags

I've created a navigation structure as follows: <ul class="page-sidebar-menu"> <li class="menu"> <a href=""> <span class="title">Menu Item</span> <span class="arrow"></span> < ...

javascriptjquerycss

Detecting changes in a readonly input in Angular 4

Here is a code snippet where I have a readonly input field. I am attempting to change the value of this readonly input from a TypeScript file, however, I am encountering difficulty in detecting any changes from any function. See the example below: <inp ...

javascriptjqueryhtmlangulartypescript

Tips for modifying the href attribute when a user clicks

Is there a way to dynamically change the value of this link <a href="/Countries/388/10">next</a> without having to refresh the page? For example, if a user clicks on the link, it should update to <a href="/Countries/388/20">next</a&g ...

javascriptjqueryajax

accessing the value of an item in an array using the useFieldArray function

Let's initialize the field array: const { fields, append, remove } = useFieldArray({ control, name: "items", rules: { required: "Please append at least 1 item" } }); Here is the dy ...

reactjsreact-hook-form

Learn how to retrieve data prior to rendering with Vue 3 and the composition api

Is there a way to fetch data from an API and populate my store (such as user info) before the entire page and components load? I have been struggling to find a solution. I recently came across the beforeRouteEnter method that can be used with the options ...

javascriptvue.jsfrontendvue-routervue-composition-api

One-of-a-kind Design: Linear Gradient Background Image

Can you help me with Linear Gradient? Is it feasible to incorporate an actual image instead of just displaying a color like #000000 or #ffffff? background-image: -webkit-linear-gradient(30deg, #000000 50%, #ffffff 50%); In the scenario mentioned above ( ...

htmlcss

Is there a way to verify if both the username and email have already been registered?

I've exhausted multiple methods attempting to solve this issue, but every attempt falls short. My most recent strategy involved creating two "findOne" functions, however, even that proved unsuccessful. const checkUser = registerLogin.findOne ...

javascriptnode.jsexpressmongoose

The clash between Kendo UI and jQuery UI

I implemented Kendo UI for the date picker, and I'm looking to incorporate jQuery UI for the autocomplete feature. Upon adding the jQuery auto complete to my code, I encountered the following error: Uncaught TypeError: Cannot read property 'e ...

javascriptjqueryjquery-uikendo-ui

Error: Angular ng-file-upload successfully uploads file, but Node.js fails to receive it

Currently, I am working on loading and cropping a file using Angular. Many thanks to https://github.com/danialfarid/ng-file-upload SignUp2ControllerTest -- $scope.upload --> data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAg ...

javascriptangularjsnode.jsexpress

Making asynchronous requests using AJAX

$.ajax({ async:false, url: "ajax/stop_billed_reservation_delete.php", type: "POST", dataType : "json", data : { "rid" : <?php echo $_GET['reservationId']; ?> }, success: function(result){ ...

javascriptphpjqueryajaxasynchronous

A guide to vertically centering TextField and ButtonGroup in Material UI

I am currently learning how to use Material UI, and I am facing an issue with aligning the TextField component and the ButtonGroup component vertically. I attempted to adjust the Grid/Grid item settings but did not have any success. Any assistance on this ...

reactjsformsgridmaterial-ui

I am encountering an issue with identifying a directory in Node.js

This is my HTML code <div id="done_work_1" class="logo-slide-track"> </div> <script>$.ajax({ url: "/static/home/done/", success: function (data) { $(data).find("a").attr("href&q ...

javascriptjquerynode.jsexpress