Column Alignment based on type

Tags: #<Tag:0x00007f8b28ec8500>
#1

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

#2

Hi @chunnumunnu99

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

#3

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’ },…]

#4

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.

#5

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

#6

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’

#7

got it working thanks for quick response.

#8

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

#9