I’m assuming that it was a performance decision to remove the column when hiding it instead of just making the column visible:false; if you’re not seeing the column, why make the page manage it? When you do a showColumn() function, it just reconstructs the column from the grid configuration. However, the value of the input in your custom HTML isn’t stored in the grid configuration, so it isn’t repopulated when you show the column again. To use the hideColumn() and showColumn() functions and retain the input value, you’ll need to wrap those functions in custom functions that manages the input value.
You’ll need a variable accessible by each of the functions for storing the key/value pairs; because the grid is already an existing object that is probably at a global scale, I would be inclined to just add it as another property on the grid object.
grid.colHeaders = {};
Then your hide function would read the input and store the value before hiding the column.
function customHide(column_id){
let inp_value = "";
// code here to get the value of your input; outside the scope of this answer
grid.colHeaders[column_id] = inp_value;
grid.hideColumn(column_id);
}
Conversely, the function to show the column should retrieve the value and set it for the input after the column is shown (otherwise the column won’t exist yet)
function customShow(column_id){
grid.showColumn(column_id);
// code here to set the value of your input to the value stored in grid.colHeaders[column_id]
}