Question: Can align text of specific column?

Body Cell Alignment

I would like to align specific columns to the center. Today I can only align all columns or specific header.

I was able to select specific header, but can’t do the same for the body cells.

Code used:

MUIDataTableHeadCell: {
  root: {
    border: 'solid 1px #00FF',
    '&:nth-child(5)': {
       backgroundColor: 'red',
     }
  }
}

What I tried and how I would like to do that:

MUIDataTableBodyCell: {
  root: {
    border: 'solid 1px #000',
    '&:nth-child(5)': {
       backgroundColor: 'red',
       textAlign: 'center'
    }
  }
}

Please advise if there’s a way to do that today. Also advise if I can help somehow.

Your Environment

Tech	Version
Material-UI	3.5.1
MUI-datatables	2.0.0-beta-52
React	16.5.2
browser	chrome 71.0.3578.98
etc

[DangerousDetlef]

Wow, okay, so this was a long journey just to get a specific column’s header centered.

Now first, there are two solutions here that won’t work quite well. @chrishawn proposed this: setCellHeaderProps: () => ({ style: {display: 'flex', justifyContent: 'right', flexDirection: 'row-reverse', borderBottom: 'none'}})

This works, but only to a degree. Tried changing resolution so you need to scroll? The headers that have this (as he admitted) dirty hack don’t stick because they need display: table-cell, which is overwritten by the display: flex. But without this, it won’t center. So no solution here.

@mdrafee03 proposed this:

  MUIDataTableHeadCell: {
      toolButton: {
        justifyContent: 'center'
      },
    }

This also works, but only for all cell headers. Mostly, of course, you want to change the alignment of a specific cell header. The first solution does this, but imperfectly. This one doesn’t. But we can combine both solutions and get where we want.

MUIDataTableHeadCell.toolButton is the span that is a child of the th which is modified in setCellHeaderProps. So we need to somehow get to this child span from setCellHeaderProps.

The solution: First, we add a new JSS class for the cell header we want to have centered (or aligned in any other way than left). In this JSS class, we will implement a child selector that targets the span element.

 centeredTableHead: {
    '& > span': {
      justifyContent: 'center',
    }
  }

We will then pass the this class into our MUIDatatable for creating the columns. However you do this, is up to you. you can do this via props like in the Example from here or if you use mainly functional components (like me) you can use the Material UI way of const classes = useStyles() and pass those in a function that creates the column.

Now we just need to add this class to the specific cell header using setCellHeaderProps. To do so, we can simply use clsx which already ships with MaterialUI. This can look something like this (short version):

function CreateColumns(classes) {
  const columns = 
  [
    {
      name: 'Test',
      label: 'Test',
      options: {
        setCellHeaderProps: () => {
          return {
            className: clsx({
              [classes.centeredTableHead]: true,
            })
          }
        }
      }
    }
  ]

  return columns;
} 

...

const classes = useStyles();
const columns = CreateColumns(classes);

<MUIDataTable 
    title="Test"
    className={classes.paper}
    options={options}
    columns={columns}
    data={data}
/>

And that’s it. Simply add the class via cslx in the setCellHeaderProps for every table header that should be centered and it works.

However, I think it’s far to complicated for such a simple task. There should be a simple option to this somewhere else. Would you be open to an issue request adding such an option, @patorjk ?

[mikroware]

Using customHeadRender seems to mean I have to re-do the whole cell component myself in order to keep the layout the same as the rest. This looks like a lot of unneeded work when I only want to add one prop to the underlying Material-UI TableCell just as with regular columns (cetCellProps).