React-admin: How do I center a column while using the <Datagrid>?

It's important to take note of this:

• react-admin bases on material-ui to present almost all (if not all) it's components.
• To style the react-admin components, you need to make use of the className props which exists on all components (inherited from material-ui).

You can do this in two basic way as follows:

1. Material-ui styling:

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

const useStyles = makeStyles(() =>
  createStyles({
    root: {
      width: '500px',
    },
    bool: {
      width: '100%',
      textAlign: 'center',
    },
    reason: {
      textAlign: 'center',
    },
  }),
);

export const YourComponent = props => {
   const classes = useStyles();  // initialize the styles

   return (
     <ArrayField source="bans" reference="bans" >
       <Datagrid className={classes.root}>
         <BooleanField label="isBanned" source="isBanned" className={classes.bool} />
         <ReasonsField label="reason" source="reason" className={classes.reason} />
       </Datagrid>
     </ArrayField>
   );
};

You can read a bit more about material-ui styling to appreciate it's dynamics.

2. Normal CSS styling:

• Within your src/index.js, you probably have something like this or slightly different:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'; // this is the line of interest (update it to call your CSS file)
 
ReactDOM.render(<App />, document.getElementById('root'));

• Within your CSS file (for the case of this example, src/index.css)

/* i've used css classes */
.column {
   width: 500px;
}
.centered {
   text-align: center;
}
.wide {
   width: 100%;
}

• Within your component (of interest):

import clsx from 'clsx'; // install this "clsx" package - an alternative is "classnames"

export const YourComponent = props => {

   return (
     <ArrayField source="bans" reference="bans" >
       <Datagrid className={clsx('column')}>
         <BooleanField label="isBanned" source="isBanned" className={clsx('centered', 'wide')} />
         <ReasonsField label="reason" source="reason" className={clsx('centered')} />
       </Datagrid>
     </ArrayField>
   );
};

If you read more about clsx or classnames, you'll notice that you can even style your component based on some react/javascript logic - quite interesting stuff.

How to do this for the Datagrid component is described in detail here: https://marmelab.com/react-admin/List.html#css-api-1 It is suggested to use the properties: headerClassName / cellClassName

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

const useStyles = makeStyles({
  table: {
    width: '500px', 
  },
  bool: {
    width: '100%',    
    textAlign: 'center',
  },
  reason: {
    textAlign: 'center',
  },    
});


const classes = useStyles();
...
<ArrayField source="bans" reference="bans" >
  <Datagrid classes={{ table: classes.table }}>
    <BooleanField
      label="isBanned"
      source="isBanned"        
      headerClassName={classes.bool}
      cellClassName={classes.bool} 
    />
    <ReasonsField
      source="reason"
      label="reason"
      headerClassName={classes.reason}
      cellClassName={classes.reason} 
    />
  </Datagrid>
</ArrayField>
...

In newer react-admin versions, you may simply pass prop textAlign="center" to the respective Field component, see https://marmelab.com/react-admin/Fields.html#textalign