5

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,

Adrià Pagès
  • 51
  • 1
  • 2
  • probably because you are manually rendering the last column param with `renderCell` method, thus try adding `className` directly to the `IconButton` rather than giving it as a property! – RegarBoy Nov 27 '21 at 13:16
  • @RegarBoy thank you, i tried this but didn't solved the problem. With my implementation I was able to see that it was overwritted, but when trying what you said it didn't even show up using the browser debugger. – Adrià Pagès Nov 27 '21 at 14:28

1 Answers1

1

You should be able to wrap the IconButton in a

<Box sx={{display: "flex", justifyContent: "center", alignItems: "center"}}>
  .....
</Box>

If using Material UI 4 or lower, replace sx with style

Allie Howe
  • 609
  • 1
  • 5
  • 20