ReactJs: Tweaking Padding in Material-UI Table

After inheriting this fullstack app, I noticed that the original developers had incorporated a component to generate tables for the webpage.

However, there is an issue with the padding on all the cells being too large. Through Chrome developer tools, I discovered the following CSS code:

.MuiTableCell-sizeSmall{
    padding: 6px 24px 6px 16px;
}

It appears that MuiTableCell is not directly included in the codebase (hence it's only visible in the rendered DOM and not in the actual code). The app mostly utilizes material-ui and material-table.

Despite having some front-end experience, I am unsure about how to proceed in order to adjust the padding accordingly.

Specifically, based on my experimentation with Chrome developer tools, I aim to change the right padding value (currently set at 24px) to 0px so that it reflects in the rendered DOM:

.MuiTableCell-sizeSmall{
    padding: 6px 0px 6px 16px;
}

Any suggestions on what steps to take next?

Some of the relevant imports from @Material-UI include: ToolBar, Appbar, FormControl, InputField, TextField, ViewColumn, and TablePagination

Additionally, imported from material-table are: MaterialTable and MTableToolbar

Through a search in IntelliJ, I found that the SizeSmall attribute seems to be associated with TableCell (part of material-ui)

javascriptmaterial-uimaterial-table

Answer №1

The CSS defined here is specifically targeting the small value for the size prop.

If you need to modify this styling, one approach could be using the makeStyles function to override the .MuiTableCell-sizeSmall class.

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customTable: {
    "& .MuiTableCell-sizeSmall": {
      padding: "6px 0px 6px 16px", // <-- adjust values as needed
    },
  },
});

function YourComponent() {
  const classes = useStyles();

  return (
    ...
      <Table classes={{ root: classes.customTable }} size="small">
        ...

Answer №2

The latest update can be found at: https://mui.com/system/styled/

Below is a demonstration of how to customize a table cell in MUI by removing the default padding.

const StyledTableCell = styled(TableCell)({
  padding: 0,
})

You have the option to use either the customized Cell component or the original one in your table.

<TableContainer>
  <Table>
    <TableBody>
        <TableRow>

          <TableCell>Default cell design.</TableCell>

          <StyledTableCell>Custom styling applied here.</StyledTableCell>

          <TableCell align="right">Excellent.</TableCell>

        </TableRow>
    </TableBody>
  </Table>
</TableContainer>

Answer №3

To customize the padding of cells in your Table component, you can utilize the sx props provided by Material-UI. For detailed information on how to override nested component styles, you can refer to the Material-UI documentation here. Here's an example of the code modification:

<TableContainer>
  <Table
    sx={{
      '& .MuiTableCell-sizeMedium': {
        padding: '10px 16px',
      },
    }}
  >
    {/* ... */}
  </Table>
</TableContainer>

By using this method, you can easily adjust the padding for cells with the MuiTableCell-sizeMedium class within your Table component.

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

Using PHP to upload images through AJAX increases efficiency

Worked tirelessly on this script all night still unable to fix the bug. The issue is that when I select an image and click upload, it uploads the current image file. Then, if I select another image and click upload, it uploads two new files along with the ...

javascriptphpjqueryajaximage

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

I am facing an issue with my slider that uses background-images and BrowserSync. The slider works fine when BrowserSync is running, but without it, the animations work properly but the .slide background image does not appear at all. Can someone help me ide ...

javascriptjqueryhtmlcssanimation

Avoiding conflicts between banners, text, and images for HTML/CSS design

I'm having an issue with the banner I created for my project. It seems to be overlapping with text and images, hiding behind them. How can I fix this? Unfortunately, I can't post the link to my project here due to other files present. The specif ...

javascripthtmlcsswebweb-deployment

Cross-Origin Resource Sharing (CORS) for enabling the remote inclusion of JavaScript

I have a unique javascript widget that is designed to be embedded from an external server (e.g. ) The javascript, which contains a simple alert('hello'), is generated by a php script. Upon execution, I include a header like this: <?php heade ...

javascriptphpcors

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

javascriptcssangularangular5angular6

The CSS transition will only activate when coupled with a `setTimeout` function

After using JavaScript to adjust the opacity of an element from 0 to 1, I expected it to instantly disappear and then slowly fade back in. However, nothing seems to happen as anticipated. Interestingly, if I insert a setTimeout function before applying th ...

javascriptcss

The accumulation of input using setInterval is not effective

I need some help with my code. Please take a look at this link here. I want the input to count up from zero and hide when I click the "change" button. But when I show the input again, I want its value to reset back to zero. Can anyone guide me on how to ...

javascriptvue.js

Moving Configuration Files in NextJS

When working on a typical Next.js project, I often end up with several root-level configuration files: tsconfig.json next.config.js next-seo-config.ts .eslintrc etc... I am looking to tidy up my root directory by moving these files into their own separat ...

javascriptnode.jsreactjsnext.jspackage.json

What is the most straightforward method to convert a current Express node app into a static site?

After primarily working with React and create-react-app, I've grown accustomed to the convenience of having a build utility for npm that simplifies deploying projects to static web hosting platforms like github pages or surge. This process ultimately ...

javascriptnode.jsexpressherokustatic

Unexpected error occurs when modifying HTML5 video source using JQuery on Internet Explorer

Currently, I am working on developing a web application using asp.net, Bootstrap, and JQuery. While testing it on LocalHost, I encountered an issue that needs debugging. The navigation bar of my application has a dropdown menu with links to tutorial video ...

javascriptjqueryhtmltwitter-bootstrapvideo

How can the @blur event be added to the vue-bootstrap-typeahead in Nuxt/Vue application?

I am facing an issue where I want to trigger a function upon leaving an input field. The input in question is set up using vue-bootstrap-typeahead. Upon inspecting the DOM, I found that the structure of the input element looks like this: <div id="m ...

javascriptvue.jsnuxt.js

What is the best way to incorporate intervals and polling in Angular 2 for seamless integration with Protractor?

I have an angular2 application that I am looking to test using protractor. Within this application, there is a page featuring a graph that updates at regular intervals with data generated on its own. It appears that one aspect of protractor is the abilit ...

javascriptseleniumangularprotractorrxjs

Unlock the power of json data traversal to derive cumulative outcomes

Our goal is to populate a table by parsing a JSON object with predefined header items. (excerpt from an answer to a previous query) var stories = {}; for (var i=0; i<QueryResults.Results.length; i++) { var result = QueryResults.Results[i], ...

javascriptjqueryjsonfor-loop

Retrieve recently appended DOM elements following the invocation of createComponent on a ViewContainerRef

I have a current function in my code that dynamically creates components and then generates a table of contents once the components are added to the DOM. This service retrieves all h3 elements from the DOM to include in the table of contents: generateDy ...

javascriptangulartypescriptdom

Utilize Aframe to easily view and upload local gltf files

I've been working on a project to create a user-friendly panel for loading and viewing gltf models in real-time in A-frame. Here is the current workflow I am following: Using the input tag to load files from local storage. Using v-on-change to assi ...

javascriptvue.jsaframewebvr

Determining the depth difference of nodes between two elements using JQuery

Is there a simple method to calculate the node depth difference between 2 elements? Example : <div id="1"> <div id="2"></div> <div id="3"> <div id="4"></div> </div> </div> <div id="5"></d ...

javascriptjquery

Geocomplete Plugin without Google Branding

I've implemented the jQuery Geocomplete Library. This is what I have accomplished so far- $(function() { $("#find_product_location").geocomplete( { map: "#product_location", mapOptions: { mapTypeId : 'roadmap',//roadmap, satellite,hybrid ...

javascriptjquerygoogle-mapsgoogle-maps-api-3geocomplete

Attempting to transform HTML code received from the server into an image, but encountering an error while using ReactJS

This app is designed to automate the process of creating social media posts. I have a template for the vertical "Cablgram" stored in the backend, and when I make a request, it returns the HTML code for that template. However, I encounter an error when tryi ...

javascriptreactjs

"I am sending a JSON object to a PHP script and extracting the

I have created a form with PHP like this: <?php include '../db/baza.php'; ?> <?php include 'vrh.php' ?> <div id="page"> <div id="pageFrame"> <form action="up ...

javascriptphpmysqlajaxjson

Enable arrow keys feature in Regular Expressions

Currently, I am implementing alphanumeric validation to ensure that users can only input alphanumeric values and also paste alphanumeric values exclusively. In order to achieve this, I have utilized the following regular expression: function OnlyAlphaNum ...

javascriptjqueryregexrazoronkeyup