Column Alignment based on type

chunnumunnu99 · March 31, 2020, 12:37pm

Is there any way to align column based on data types rather than aligning each cell ?

aleksandra_budnik · March 31, 2020, 12:49pm

do you want to use it after user changes data? Can you give an example?

chunnumunnu99 · March 31, 2020, 12:57pm

I am initializing HOT first and then loading data via ajax below is code.

const loadData = () => {
```
 $.ajax({
```
```
 type: 'get',
```
```
 dataType: 'json',
```
```
 url: window.location.pathname,
```
```
 async: true,
```
```
 success(res) {
```
```
   window.column_ordering = res.order
```
```
   hot.updateSettings({
```
```
     colHeaders: res.headers,
```
```
     columns: res.columns,
```
```
     columnSorting: {
```
```
       indicator: true
```
```
     },
```
```
     autoColumnSize: {
```
```
       samplingRatio: 23
```
```
     },*
```
```
     manualRowResize: true,
```
```
     manualColumnResize: true,
```
```
     manualRowMove: true,
```
```
     manualColumnMove: true,
```
```
     filters: true,
```
```
     dropdownMenu: true,
```
```
     beforeRemoveRow() {
```

       return confirm('Are you sure you want to remove this row?')*

```
     },
```
```
     cells: function(row, col, prop) {
```
```
       let cellProperties
```

       return cellProperties = {editor: false}

```
     }
```
```
   })
```
```
   hot.loadData(res.data)
```
```
 }
```
})
}

res.columns response contains dataypes and column label like [{data:‘column1’, type:‘text’ },…]

aleksandra_budnik · March 31, 2020, 1:12pm

And what should be the rule for the alignment?

Examples
When data in a column is string > align it right.
When data in a column is checkbox > align it middle.

Handsontable is already using alignment. By default all numeric values are aligned to right.

chunnumunnu99 · March 31, 2020, 1:15pm

I have registered some custom types like this
Handsontable.cellTypes.registerCellType(‘currency’, {
renderer: Handsontable.renderers.NumericRenderer,
className: ‘htCenter’
})

and I want some custom alignments based on my custom types here className: ‘htCenter’ does not seems to be working . Is there any way

aleksandra_budnik · April 1, 2020, 7:43am

That should work. Maybe you are using cells/columns or setCellMeta on those cells so they are being re-aligned by other settings.

Here’s https://jsfiddle.net/AMBudnik/4v7p163c/ an example with NumericRenderer and className: ‘htCenter’

chunnumunnu99 · April 1, 2020, 9:44am

got it working thanks for quick response.

aleksandra_budnik · April 1, 2020, 10:14am

Great. I think that I can close the topic then.