React-table: Align component in cell

[M1chaelChen]

What version of React-Table are you using?

6.7.6

What bug are you experiencing, or what feature are you proposing?

Can not align component within the cell.

[DamianFekete]

Check this out: https://codesandbox.io/s/ojyx80ljo5
I've added the property className and defined the CSS class in index.css.

index.js:

                {
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName,
                  className: "right"
                }

index.css:

.right {
  text-align: right;
}

[p0k8h]

If you want the Column name to be aligned right

Header: () => (
    <div style={{
        textAlign: "right"
    }}>
        Actions
      </div>
)

[robertvasile]

@DamianFekete @parwat08 both your solutions align the text in the table header,
i'd bet @M1chaelChen was referring to aligning the values, and that's done diffrently:

https://codesandbox.io/s/ow23qwv39

[DamianFekete]

@robertvasile, my proposal works OK. Check the green values/cells: https://codesandbox.io/s/ryj15q8wyq , they are right-aligned.

@parwat08 already said that her/his change it is for the column name, not the values. That may be useful if you want to align everything, not only values.

[p0k8h]

@DamianFekete Thanks mate

@robertvasile Mine solution might be useful if someone wants to align the column name. I already have mentioned it.

[mbenhalima]

I found this very helpful to align the components within all the cells in the table:
getTdProps={() => ({
style: {
textAlign: 'right'
}
})}