Mui-datatables: Question: Can align text of specific column?

[giovannirosa]

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 | |

[ghost]

I am also looking for a solution to this!

[gabrielliwerant]

customBodyRender lets you use any code you want to display the cells of a given column. You can add any styling you want that way.

[mikroware]

I am using setCellProps on the column options for this as Material-UI TableCell already provides a prop align="right". However this does not set any cell props for the header.

I would like to align the header cell also on the right without customizing its content. Because Material-UI already provides the align option, it seems weird to have to implement it myself.

Maybe it is a good idea to add a new option to the column definitions which is forwarded to the TableCell align props?

[gabrielliwerant]

@mikroware setCellProps works, the problem is that you are looking at a version of material-ui that is higher than is used by the project, and the API is different. You need the old numeric: true | false option.

[mikroware]

Hmm maybe I was not clear. setCellProps actually works, but there is no way to do the same for the header cell of that column.

[gabrielliwerant]

Have you tried customHeadRender in the column options?

[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).

[gabrielliwerant]

@mikroware That's correct, it's more effort, but at least for the time being there is a way for you to proceed. It sounds like you have a request for something like setCellHeaderProps, which I think is reasonable. If you would like, you can open up a new issue as a feature request so we can discuss and track it.

[jasraj96]

In the column options, even though setCellHeaderProps has been added _(in version 2.13.0)_, setCellHeaderProps: () => ({ align: 'center' }) doesn't seem to have any effect when sort: true.

It seems to be working well when sort: false

[gabrielliwerant]

align on the th won't help you because the column name is wrapped in flex display mode when there is a sort button. Also, align has been deprecated in HTML, so you actually would need to use text-align CSS property instead. But because of flex you'll actually need to set justify-content and override these styles: MUIDataTableHeadCell sortAction.

[chrishawn]

this works for a quick and dirty css hack (caveat: more than one column like this may lead to wackiness):
setCellHeaderProps: () => ({ style: {display: 'flex', justifyContent: 'right', flexDirection: 'row-reverse', borderBottom: 'none'}})

[mdrafee03]

I only added the following code to my jss to make the header center:

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

[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 ?

[patorjk]

Looks like you came to the same solution I did (https://github.com/gregnb/mui-datatables/issues/1258#issuecomment-662522545), I'm not aware of a better way. It doesn't seem too complex, especially with hooks. However, I'd be open to a PR to make it simpler.