Mui-datatables: Ability to align numeric values to the right (functionality exists in mui)

[bellini666]

In mui there's a possibility to align numeric values to the right by passing numeric to TableCell. This lib doesn't seem to allow that

[gregnb]

hey @hackedbellini I don't want to open props to all the underlying components because the API would become a mess, BUT I do have a solution. If you look at the TableCell code it's simply applying the numeric class. Because you can override styles with mui-datatables you achieve the same thing. Here's an example:

https://codesandbox.io/s/yvq7z56qnj

MUI styling:
https://github.com/mui-org/material-ui/blob/5cdc68481ffee98eeeeeb68726df62e0adc33cd6/packages/material-ui/src/TableCell/TableCell.js#L46

Hope this helps

[nemethricsi]

@gregnb your example is not working - pls check. I'm struggling with the same and cannot see this was solved. Thank you!

[patorjk]

The setCellProps option allows you to set props on the table cell. You can see an example here:

https://codesandbox.io/s/muidatatables-custom-toolbar-m50v2?file=/index.js

[nemethricsi]

The setCellProps option allows you to set props on the table cell. You can see an example here:

https://codesandbox.io/s/muidatatables-custom-toolbar-m50v2?file=/index.js

Thanks! But can I align right even if it's not a number? Even with the Table Header on those spedific columns?

[patorjk]

It won't matter if it's a number or not, setCellProps returns an object of properties which gets added to the TableCell component.

{
  name: "Age",
  options: {
    setCellProps: () => ({
      align: "right"
    })
  }
}

[nemethricsi]

It won't matter if it's a number or not, setCellProps returns an object of properties which gets added to the TableCell component.

{
  name: "Age",
  options: {
    setCellProps: () => ({
      align: "right"
    })
  }
}

Thank you! It works. However it looks really bad on responsive mobile :)

[patorjk]

Hmm, yeah, if you wanted styling to change for responsive layouts things would get a bit harrier since that mui prop isn't based on responsive styling rules. I'd probably recommend using the "standard" responsive option in this case.

If you need the vertical responsive layout, you could probably accomplish this with some custom styling rules:

https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js

You'd then just use setCellProps to add a class onto the cells you want to target and you could target them like this:

  MUIDataTableBodyCell: {
    root: {
      '&.class_that_was_added': {
        '@media screen and (max-width: 959px)': {
          backgroundColor: 'red'
        }
      }
    }
  },