How to change column width of mui table in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To change column width of mui table in React js, you can use this css code width="100". It will change column width of mui table.

Today, I am going to show you, how to change column width of mui table in react js.

Table of contents

• Install Material-UI.
• Import the Mui table component.
• Set Column Width.
• Define the Mui table component.

Let’s start with the first step.

Step 1: Install Material-UI

The first step is to install Material-UI. And you can use npm or yarn. And you can open it by typing in terminal.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

Step 2: Import the Mui table component.

To change column width of mui table in React, first, you have to import the table. We have imported the Table, TableBody, TableCell, TableHead, TableRow components from the @mui/material library.

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';

Step 3: Set Column Width.

To change the column width of a Material-UI table, you can use the width property of the tablecell component.

<TableRow>
  <TableCell width="100">Row 1, Column 1</TableCell>
  <TableCell>Row 1, Column 2</TableCell>
  <TableCell>Row 1, Column 3</TableCell>
</TableRow>

Step 4: Define the Mui table component.

We have to define to show the data of our table. we will create an array of employees with their Column 1, Column 2, and Column 3.

<TableHead>
  <TableRow>
    <TableCell width="100">Column 1</TableCell>
    <TableCell>Column 2</TableCell>
    <TableCell>Column 3</TableCell>
  </TableRow>
</TableHead>

MUI material change column width of mui table example.

The below code is an example of a Material UI table. You have to import @mui material table. In the Material Table function when you create a table component, it consists of a table head and a table body. This code sets the width property of each TableCell component to a fixed value.

App.js

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';

export default function CustomTable() {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell width="100">Column 1</TableCell>
          <TableCell>Column 2</TableCell>
          <TableCell>Column 3</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell width="100">Row 1, Column 1</TableCell>
          <TableCell>Row 1, Column 2</TableCell>
          <TableCell>Row 1, Column 3</TableCell>
        </TableRow>
        <TableRow>
          <TableCell width="100">Row 2, Column 1</TableCell>
          <TableCell>Row 2, Column 2</TableCell>
          <TableCell>Row 2, Column 3</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

In the above code example, I have used the @mui/material component and changed column width of mui table.

Check the output of the above code example.

Here, we are provided code sandbox links for the above program change column width of mui table. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍