Hi, I’m creating a hotTable with 17 columns but when I slide the rows the headers didn’t follow the columns, there is any configuration specific for this problem?
Here is my settings
Row Headers not moving with the rows
Can you please paste your settings as a text? That way it would be easier for me to recreate the issue. Thanks.
schema = new Fluxo();
this .settings = {
colHeaders: [“Dt. Evento”, “DC”, “DU”, “Saldo Devedor”, “Amortização”, “%Amortização”,
“Curva Ponta Ativa”, “Curva Ponta Passiva”, “Evento Juros”, “ATIVO - Data Fixing Moeda”,
“ATIVO - Data Fixing Juros”, “PASSIVO - Data Fixing Moeda”, “PASSIVO - Data Fixing Juros”,
“TIR Ativo”, “Taxa Ativo”, “TIR Passivo”, “Taxa Passivo”],
dataSchema: {
… this .schema
},
stretchH: ‘none’,
minCols: 17,
minRows: 1,
startRows: 1,
manualRowResize: true,
manualColumnResize: true,
autoColumnSize: true,
autoRowSize: true,
rowHeaders: true,
height: ‘auto’,
colWidths: 150,
width: ‘100%’,
copyPaste: true,
hiddenColumns: {
indicators: false,
columns: [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
},
licenseKey: ‘non-commercial-and-evaluation’,
columns: [
{
data: ‘dtEvento’,
type: ‘date’,
dateFormat: ‘DD/MM/YYYY’,
correctFormat: true,
},
{
data: ‘dc’,
readOnly: true,
},
{
data: ‘du’,
readOnly: true,
},
{
data: ‘saldoDevedor’,
type: ‘numeric’,
numericFormat: {
pattern: ‘0,0.00’,
culture: ‘pt-BR’
},
readOnly: true,
// renderer: this.negativeValueRender
},
{
data: ‘amortizacao’,
type: ‘numeric’,
numericFormat: {
// pattern: ‘0,00’,
pattern: ‘0,0.00’,
culture: ‘pt-BR’
},
allowEmpty: false,
// renderer: this.negativeValueRender
},
{
data: ‘percAmortizacao’,
type: ‘numeric’,
numericFormat: {
pattern: ‘0.0000’,
culture: ‘pt-BR’
},
// renderer: this.negativeValueRender
},
{
data: ‘curvaPontaAtiva’,
},
{
data: ‘curvaPontaPassiva’,
},
{
data: ‘eventoJuros’,
},
{
data: ‘dataFixingMoedaAtivo’,
type: ‘date’,
dateFormat: ‘DD/MM/YYYY’
},
{
data: ‘dataFixingJurosAtivo’,
type: ‘date’,
dateFormat: ‘DD/MM/YYYY’
},
{
data: ‘dataFixingMoedaPassivo’,
type: ‘date’,
dateFormat: ‘DD/MM/YYYY’
},
{
data: ‘dataFixingJurosPassivo’,
type: ‘date’,
dateFormat: ‘DD/MM/YYYY’
},
{
data: ‘tirAtivo’,
},
{
data: ‘taxaAtivo’,
},
{
data: ‘tirPassivo’,
},
{
data: ‘taxaPassivo’,
}]
};
export class Fluxo {
dtEvento: string | Date ;
dc: string | number ;
du: string | number ;
saldoDevedor: string | number ;
amortizacao: number ;
percAmortizacao: number ;
tirAtivo: string ;
taxaAtivo: string ;
tirPassivo: string ;
taxaPassivo: string ;
constructor() {
this .dtEvento = null;
this .dc = null;
this .du = null;
this .saldoDevedor = null;
this .amortizacao = null;
this .percAmortizacao = null;
this .tirAtivo = null;
this .taxaAtivo = null;
this .tirPassivo = null;
this .taxaPassivo = null;
}
}
I have recreated you settings in this demo and everything works fine so the settings are not the case here: https://jsfiddle.net/aszymanski/uzgsdh41/12/
I see that you have the table implemented inside some bigger application. There is a possibility that some of these app CSS might collide with Handsontable styling so please check if there isn’t any issue there.
1 Like
That makes sense, I will look at the upper css application to see if anything is going wrong. Using the same thread do you know if I can put the columns with readOnly:true with some
grey background? I’ve tried with CSS but doesn’t work =/
Yes, you can make it by setting the column you want to readOnly and then in cells option you can set custom CSS class for background and font color (you need to make it !important if you have readOnly option enabled to overwrite the standard font color)
Here’s the demo: https://jsfiddle.net/aszymanski/Ltv6spem/3/