Cx framework: How to set align:right and decimal precision on NumberField

Question

I am working on a project where IU is done in Cx, new React based Framework for FrontEnd. https://cxjs.io/
I have a Grid with filter Fields on top of each Column.
For example this is Number Column and Field:

{
    field: 'score', sortable: true,
    header: {
        style: 'width: 150px',
        items: <cx>
            <div>
                Score
                <br />
                <NumberField style="width:100%;margin-top:5px" value:bind="$page.filter.score"
                    reactOn="enter blur"/>
            </div>
        </cx>
    },
},

But value is on the left side, and I need it on the right. I want both grid and filter field value to be on the right but keeping column name on the left. Like it is usually in Excel. Also how to set custom number of decimal, 2 for example?

Answer 1

NumberField widgets allow setting additional styles on the input element through inputStyle. Formatting is done using format. Grid column headers can set its own styles using just style.

With all that in mind, it should be something like this:

{
    field: "score",
    sortable: true,
    header: {
      style: "width: 150px; text-align: left",
      items: (
        <cx>
          <div>
            Score
            <br />
            <NumberField
              value:bind="$page.filter.score"
              format="n;2"
              style="width:100%;margin-top:5px"
              inputStyle="text-align: right"
              reactOn="enter blur"
            />
          </div>
        </cx>
      )
    }
  }