I want handsontable filter different column with the server side

Tags: #<Tag:0x00007efc64e7c310>
#1

hello there, i’m gong to share one image that has table with the filter column. i want to do something like this with the handsonTable.

37%20AM
Screen Shot 2022-04-01 at 10.42.37 AM.png1527×289 61.9 KB

In the above image the header and after that it has the filter columns with the filter by option field, by date, and by input/text mode as well. and all are has been with the server side. i want to do something like this.
I know there is something providing by the handsonTable with the ‘as you type demo’ but it has only with input/text and also only at client side. i want it different field type and also with server side.

I just want to get idea that is that anything like provide by handson table. if not than is it possible to do it with the customisation. Please help regarding this.

Thanks
i@farm

#2

Hi @ifarm

We’ll investigate your issue, and get back to you after the weekend.

Handson table server side filter
#3

Hi @ifarm

If you want to perform server-side filtering you can use the beforeFilter hook. It will allow you not only to get the exact filter settings but also to block the filtering on the front-end.

#4

Hello @adrian.szymanski, thank you for the reply. now clear about how to filter with server side.
But i have another question is related to use option fields for filter, for example select country for filter, not typing. and don’t want to use dropdown filter, want to use direct filter like as show in above image. that above image has some columns has text enter manually filter, some columns have option select field type filter and disabled filters for some columns.
Thank you

#5

It might be possible to do, but it’s quite complicated.

Here are some tips that could be useful for you in this case. After typing each letter you would need to:

  • addCondition
  • filter()
  • Use addCondition to do activeEditor().close() operation

Additionally you would want to use this helper to ignore too much events and execute them in intervals.

http://jsfiddle.net/1kzo50g3/

Here are also source code of that functions:

And the last one helpful demo in which editor values are being logged in real time:

https://jsfiddle.net/5dc6o9n0/5/

#6

Thank you for the advise. But i want to know that how can i show filter with option field and input type field for the different columns of table. like in above image. It will just after the header. Can you please guide me with this

#7

To make a different columns different types you need to do something like this:

http://jsfiddle.net/aszymanski/4nmdcb1g/11/

However, to get the HTML Input tag you need to create a custom renderer, just like in the example above. The other available cell types are described here:

https://handsontable.com/docs/cell-type/#available-cell-types

#8

Undestand. but i want this html render with filter column. not with the regular data column.

#9

That would require to create a pretty customized demo, as we don’t have such examples in our documentation. However, we offer that kind of service within our higher support plans.

Send me your license ID at support@hadnsontable.com so we can check your current support plan.

#10

@adrian.szymanski i think you make spelling wrong for ‘hadnsontable’, i think it will be handsontable.
send you email with support@handsontable.com
Thanks

#11