Uncaught TypeError: this.columnFilter is null

Tags: #<Tag:0x00007f8b1dbc9b48> #<Tag:0x00007f8b1dbc99b8>

var gridOptions_hot = {
height: 200,
minRows: 7,
rowHeaders: true,
colHeaders: true,
filters: true,
colHeaders:column_names_display,
columns:column_names_filed,
afterRender: function () {
var headerCells = document.querySelectorAll(’.ht_clone_top thead th’);
headerCells.forEach(function (cell) {
cell.style.textAlign = ‘left’;
});
},
};

In this code i am getting this error please help me to resolve this Error.

Hi @ratnadeep.dey

I used your settings in this demo https://stackblitz.com/edit/vitejs-vite-1rabo8?file=main.js,style.css&terminal=dev and I do not get any errors, and the headers are aligned. However, there are two missing variables for

colHeaders:column_names_display,
columns:column_names_filed,

so I commented those out. Maybe they are effecting the overall logic and that is why you get the error.

Nevertheless, for styling headers I recommend using method with afterGetColHeader

afterGetColHeader: function(col, TH){
TH.className = ‘htLeft’
}

Updated demo: https://stackblitz.com/edit/vitejs-vite-guyvtc?file=main.js,style.css&terminal=dev

ps. I edited your post as it is not recommended to share the license key (even if the support and maintenance plan expired).

Thank you for your reply. I have implemented this afterGetColHeader, worked well. But my main is not getting resolved.
Sorry for the inconvenience caused by sharing the license mistakenly.
In google chrome i am getting this error :-

and in firefox i am getting this error :-

Please suggest, It will be also okay if you want to connect over a meeting then i can show you the issue i am facing.
Thank you.

I think that to solve this issue, we would need to have the missing logic.

Could you please send those two variables?

colHeaders:column_names_display,
columns:column_names_filed,

colHeaders:column_names_display,
columns:column_names_filed,

column_names_display= [
“Product Id”,
“Store Id”,
“Style Id”,
“Color Id”,
“Fiscal Year”,
“Fiscal Week”,
“Total Sales Units”,
“Total Sales Retail”,
“Total Sales Cost”,
“Eow Inventory Units”,
“Eow Inventory Retail”,
“Eow Inventory Cost”,
“Eow Intransit Units”,
“Eow Intransit Retail”,
“Eow Intransit Cost Lc”,
“Eow On Order Units”,
“Eow On Order Inventory Retail Lc”,
“Eow On Order Inventory Cost Lc”,
“Fiscal Year Week”
]

column_names_filed = [
“product_id”,
“store_id”,
“style_id”,
“color_id”,
“fiscal_year”,
“fiscal_week”,
“total_sales_units”,
“total_sales_retail”,
“total_sales_cost”,
“eow_inventory_units”,
“eow_inventory_retail”,
“eow_inventory_cost”,
“eow_intransit_units”,
“eow_intransit_retail”,
“eow_intransit_cost_lc”,
“eow_on_order_units”,
“eow_on_order_inventory_retail_lc”,
“eow_on_order_inventory_cost_lc”,
“fiscal_year_week”
]

Thank you.

Even though, I am not sure what you wanted to achieve with column_names_filed being an array of strings, that still doesn’t show any error.

In general columns is an array of objects. Each objects represents a column. Usually it looks like this

    columns = [
    {
      data: 'product_id',
      type: 'numeric'
    },
    {
      data: 'store_id',
      readOnly: true
    }
    ]

I was getting that error because of this below mentioned function. I don’t know how it’s effecting columnFilter.
function init_grid(){
var colHeader = hot.view.wt.wtTable.getColumnHeader(0);
colHeader.style.backgroundColor = “#ff0000”;
}

Anyways thank you for your support.

The view.wt.wtTable is private. If you want to attach styling to headers I recommend using the afterGetColHeder()hook instead,

Here https://handsontable.com/docs/javascript-data-grid/api/hooks/#aftergetcolheader you can read more about it.

Okay sure. Please check your linkedin account. I have texted you regarding this. I am happy to have you as a helping hand. Thank you. :blush:

1 Like