How do you right align a specific column header?

[nickraphael]

Expected Behavior

Some documentation that describes exactly how to align a column header.

Current Behavior

Nothing in the docs. Some old issues that don't really help.

1. Just create a table with some columns

Your Environment

Tech	Version
Material-UI	5
MUI-datatables	4.1.2

[nickraphael]

The only way I've managed to right align a column header is directly via devtools by adding a style to the generated span.
But I can't do that in code because it's generated at runtime.

<span class="tss-178gktx-MUIDataTableHeadCell-contentWrapper" style="justify-content: right;">...</span>

[kitaroar]

I changed the align of cells with this code in column options

setCellHeaderProps: () => { return { align:"right"} },
setCellProps: () => { return { align:"right"} },

or with this code

setCellHeaderProps: () => { return { style: {textAlign: 'right' }}}

const columns = [
{
    name: "Operație",
    options: {
      filter: false,
      sort: false,
      empty: true,
      setCellHeaderProps: () => { return { align: "right" } },
      setCellProps: () => { return { align: "right" } },
      customBodyRenderLite: (dataIndex) => { return <DeteleButton />; },
    },
  },
]

This aproach broke the table render on small screens when responsive option is set to 'vertical' or 'simple'

I need to find a workaround to display the table on small screens with default align

[kitaroar]

I solved the align on small screens.

I created a css class

import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
	btnDelete: {
		textAlign: 'left',
		[theme.breakpoints.up('md')]: {
			textAlign: right',
		},
	},
}));

const classes = useStyles();

and apply that class to the specific column in options

setCellHeaderProps: () => { return { className: classes.btnDelete } },
setCellProps: () => { return { className: classes.btnDelete } 	},

Now when the width of screen switch below 900px, the column is aligned to the left

[RamonGiovane]

options: {
   setCellHeaderProps: () => { return { style: {display:'flex', justifyContent:'center' }}},
}

This is what worked for me.