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

Creating seamless compatibility between the elliptic library in JavaScript and the ecdsa library in Golang for efficient cross-platform operations

I am having issues with validating a signature created using the elliptic JavaScript library and the ecdsa library from Golang. The elliptic curve in question is secp256k1. Below are some snippets of code: Here are the TypeScript utility functions: impor ...

javascripttypescriptgocryptographyelliptic-curve

When attempting to parse a JSON feed with jQuery and innerHTML, the data fails to display

Having trouble parsing a JSON feed using jQuery and innerHTML, but for some reason it's not working as expected. No errors are being displayed in the console and the feed itself is functioning properly. Not quite sure why this issue is occurring. < ...

javascriptjqueryhtmljsonfeed

In React Router version 4, it is stated that each router is only allowed to have a single child element when using multiple routes

I'm currently working on implementing a sidebar alongside the main content area using react-router-dom. Instead of just rendering <Sidebar/> directly, I want to pass it the location prop due to another issue where clicking a <Link/> in the ...

javascriptreactjsreact-routerreact-router-v4react-router-dom

The value of the input field in jQuery is not defined

I am encountering an issue with an error: jQuery input val() is undefined. I have 3 inputs that are all referencing one item. When I add a new row, I can create a new item (3 rows). All of these rows need to be organized in an array to be sent to a PHP f ...

javascripthtmljquery

AngularJS Assessing an Attribute directive following an Element directive

Currently, I am utilizing an angular plugin that can be found at the following link: https://github.com/angular-slider/angularjs-slider The objective is to customize the "legends" produced by the directive. In order to achieve this customization, the dire ...

javascriptangularjsangularjs-directive

A step-by-step guide on simulating a click event on an element in React with the help of jest and react-testing

My component displays the following {list.options && list.options.length > 0 ? ( <div data-testId="MyAlertText" onClick={onAddText}> Add Text </div> ) : null} When testing, I am executing the following it('Ensure Add Text lin ...

javascriptreactjsjestjsreact-testing-library

What is the best way to access the current value and name of a textbox in real-time using

How can I retrieve the value of a textbox in JavaScript using onblur and on keyup events, while also performing real-time checking for each individual textbox using "this keyword"? Here is my JSFiddle link. Can you assist me in modifying it? ...

jqueryajaxjavascript

Navigating a Mesh in 3D Space using three.js, Camera Movement, and physi.js

I am attempting to manipulate an object in Three.js using Physi.js. The camera is linked to the moving mesh, and I am moving it using .setLinearVelocity(); Additionally, I rotate it using .setAngularVelocity(); However, the issue I am facing is that whil ...

javascriptthree.jsphysics

Struggling to Enforce Restricted Imports in TypeScript Project Even After Setting baseUrl and resolve Configuration

I am facing challenges enforcing restricted imports in my TypeScript project using ESLint. The configuration seems to be causing issues for me. I have configured the baseUrl in my tsconfig.json file as "src" and attempted to use modules in my ESLint setup ...

javascriptreactjstypescriptwebpackeslint

Why isn't my ng-click function functioning properly on Google Maps in AngularJS?

i have two stores in my database and am attempting to display them on a Google map with markers. I have an ng-click function inside the info window to pass the store id, but it seems like ng-click is not working. Is there any alternative method to pass t ...

javascriptangularjsgoogle-maps

Rearranging information within a JSON structure

Here is a sample of Javascript object and code to consider: Javascript Object { "thing":{ "data":"some data", "thumb":"some data", "data1":"some data", "data2":"some data", "data3":"some data", }, "extra1":[ ...

javascriptjson

Guide to retrieving fresh information from an API using a desktop application built on node and electron

Looking for advice on efficiently retrieving new order data from the Shopify API for a private desktop application I'm working on. Should I query the API at regular intervals while the application is active, or is there a way to implement webhooks in ...

javascriptnode.jsapielectronshopify

Is there a way to keep the icon permanently positioned on the right side of the box?

Utilizing MaterialUi and ReactTSX, I am experiencing an issue. When I import the Chip component and display it, the deleteIcon appears on the right side of the label instead of the desired position on the right side of the box. You can see the problem he ...

reactjsmaterial-uireact-tsx

Can you explain the relationship between HTML 5 Canvas coordinates and browser pixels?

When trying to use HTML 5 canvas as a drawing board in my application, I encountered an issue. The drawings appear at an offset from the mouse pointer. My method involves using the Jquery .offset function to determine the event's position on the canv ...

javascriptjqueryhtmlhtml5-canvasdom-events

Mastering file handling with jQuery File Upload Middleware in Node.js Express: blending files and branding with watermarks

I was successful in setting up the jquery-file-upload-middleware with express.js 4.0, but I am struggling with configuring it properly. Here is the script I used for upload: var upload = require('jquery-file-upload-middleware'); upload.configur ...

javascriptnode.jsexpressimagemagickjquery-file-upload

What is the best way to troubleshoot substrings for accurately reading URLs from an object?

While a user inputs a URL, I am attempting to iterate through an object to avoid throwing an error message until a substring does not match the beginning of any of the URLs in my defined object. Object: export const urlStrings: { [key: string]: string } = ...

javascripttypescriptalgorithm

hiding a dropdown menu in vuejs when clicking outside of it

Utilizing dropdown menu components in vuejs to create a standard dropdown menu. The code for the dropdown component is as follows: <template> <span class="dropdown" :class="{shown: state}"> <a href="#" @click.prevent="toggleDro ...

javascriptdrop-down-menuvue.jsvuejs2vue-component

How to access webpack's require.context feature on the development server

In my webpack development configuration, I have set up a mocked backend using Express. Following an example from the DevServer Docs, my setup looks something like this: module.exports = { // ... devServer: { setupMiddlewares: (middlewares, devServe ...

javascriptnode.jswebpacknode-modules

Display identical text using JavaScript filter

My search filter highlight is currently displaying [object Object] instead of <mark>match values</mark> when replacing the values. This is the code I am using: this.countries.response.filter((val) => { const position = val.value.toLowerCa ...

javascripthtmltypescriptstenciljs

VueJS - Validating Props with Objects

What is the best way to validate Object type props in VueJS to guarantee that certain fields are defined within the object? For instance, I need to make sure that the user prop includes 'name', 'birthDate', and other specific fields. ...

javascriptvue.jscomponents