Styling specific column of the MUI DataGrid

Question

I would like to center a IconButton that is inside a DataGrid tabe (all of them are MUI components). I've read the documentation and tried several things. In my last attempt I did this:

GridComponent.js

What I did here is assign 'like-grid-button' to the cellClassName at the column that I'm interested (likebutton).

import { DataGrid } from '@material-ui/data-grid';
import { randomCreatedDate } from '@mui/x-data-grid-generator'; //for examples
import FavoriteBorderRoundedIcon from '@mui/icons-material/FavoriteBorderRounded'; //fav icon shape
import { IconButton } from '@material-ui/core';
import React from 'react';

const ActivityTypes = ['Museum', 'Restaurant', 'Sight Seen', 'Shoping'];
const rows = [
  { id: 1, Name: 'Gamla Stan', Type: 'Sight Seen', date: randomCreatedDate() },
  { id: 2, Name: 'Vasamuseet', Type: 'Museum', date: randomCreatedDate() }
];

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'Name', headerName: 'Name', width: 130 },
  {
    field: 'Type',
    headerName: 'Type',
    type: 'singleSelect',
    valueOptions: ActivityTypes,
    width: 130
  },
  {
    field: 'date',
    headerName: 'Date',
    type: 'date',
    width: 130
  },
  {
    field: 'likebutton',
    headerName: 'Favourite',
    sortable: false,
    width: 130,
    cellClassName: 'like-grid-button',
    renderCell: (params) => {
      return (
        <IconButton index={params.row.id}>
          <FavoriteBorderRoundedIcon />
        </IconButton>
      );
    }
  }
];

export default function DataTable() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        disableColumnSelector
        disableSelectionOnClick
        checkboxSelection
      />
    </div>
  );
}

style.css

Here I just added what I wanted at 'like-grid-button' class

.like-grid-button {
    justify-content: center;
}

index.js Here I added the <StyledEngineProvider injectFirst> so MUI doesn't overrides style. However, when I test this, it gets overwritten anyway.

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
import StyledEngineProvider from '@mui/material/StyledEngineProvider';
import App from './App';

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </StyledEngineProvider>,
  document.getElementById('root')
);

I also tried other approaches like using makeStyles() but i can't find/understand a way to change the justify-content of just one column.

Thank you,

Answer 1

have you tried using Grid MUI? in my opinion it is better to Grid than DataGrid here is why:

GRID MUI offers a lot of customizations see the example below

<Grid
  container
  direction="row"
  justifyContent="center" 
  alignItems="center"
>
 <Grid item xs={6}>
    <Item>1</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>2</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>3</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>4</Item>
  </Grid>
</Grid>

NB: you can apply alignItems, justifyContent attributes to the grid child ie grid.item

for further information visit the MUI Grid documentation:- https://mui.com/components/grid/