Show/hide column in handsontable

Tags: #<Tag:0x00007f8b2918d380>
#1

Hi i am trying to implement feature of show/hide column
i have added this as part of options configuration:

this.options = {
height: 396,
stretchH: ‘all’,
columnSorting: true,
contextMenu: true,
className: ‘htCenter htMiddle’,
readOnly: false,
rowHeaders: true,
//manualRowMove: true,
manualColumnMove: true,
hiddenColumns: {
columns: [3, 5, 9],
indicators: true
}
};

but its not working,
can you please help where i am going wrong.?
Thanks in advance.

#2

Hi @rizwanullah.rizwi

Have you loaded the Handsontable-pro script?

The following settings should work. Here is an example that uses your settings http://jsfiddle.net/handsoncode/zhkqth9w/

#3

is there any pro library that i have to include?
becuase in link you provided i can see
CSS link provided.
script src=“https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.js”

Are you telling to included above script in my index.html code?

#4

You shouldn’t load resources from CDN. Have you cloned the repository or used npm/yarn to install Handsontable? Are you using a wrapper?

#5

i have used npm i ng2-handsontable --save to install handstable

#6

Please try if loging the version via

Handsontable.version

return anything more than 1.0.0 or are you able to use any other PRO features.

#7

where to try Handsontable.version?

#8

Anywhere in the code. You can put it, for example, inside a render hook like here http://jsfiddle.net/handsoncode/zkkncoxx/ so you’ll know which version is used for the specified table.

	afterRender: function(){
			console.log(Handsontable.version)
		}
#9

i have checked version: handsontable version under package.json is “version”: “0.38.0”
is column hide version available in 0.38.0?
if no how can i get latest version aleksandra?

#10

So you are using the CE version, not PRO. You can call the

npm i hadsontable-pro

via npm and check if it has been added to the package.json file

you should have

"handsontable-pro": "1.18.1",

Then at the end add

import * as Handsontable from 'handsontable-pro';

in the app’s component.ts file.

#11

Thanks a lot aleksandra :slight_smile:
in component ts file i have
import * as Handsontable from ‘handsontable’;

so can i remove old import and have only pro one or can i have both?

#12

You can have only the PRO reference as PRO has all that CE offers plus more.

#13

ERROR in C:/Users/rr50008/workspaceNeon/CitiAIPWeb/webapp/src/app/aip/cdt/transa
ction/transaction-handontable/transaction-handontable.component.ts (4,31): Canno
t find module ‘handsontable-pro’.)

i am getting this error when running application.
whihc module to import for PRO version?

#14

Yes, there’s also app’s module.ts where you need to have a reference. Please try adding

import { HotTableModule } from '@handsontable-pro/angular';

or

import { HotTableModule } from '@handsontable-pro';

#15

ps. are you using the angular wrapper https://github.com/handsontable/angular-handsontable?

#16

hi aleksandra…when i am importing either of above two imports in my module file its giving exception:
ERROR in …/transa
ction/transaction.module.ts (8,32): Cannot find module ‘@handsontable-pro/angula
r’.)
i have tried with import { HotTableModule } from ‘handsontable-pro’ as well. In all 3 case getting same error saying cannot find module handsontable

#18

hi @aleksandra_budnik , any thoughts on above issue?
Thanks in advance.

#19

Can I ask you to send a demo of the project or just the part with Handsontable? You can also send it at support[at]handsontable.com. I do not know if I’ll be able to help much without checking all the settings manually.

#20

Hi Alex,
is this docs poper to setup handson-pro project:
https://docs.handsontable.com/pro/2.0.0/tutorial-quick-start.html#page-install

#21

Yes, but it is for the vanilla version and it is a little bit different for Angular wrapper + Handsontable. Here https://github.com/handsontable/angular-handsontable#installation is a tutorial for the wrapper