Request Focus in Perspective Table Search Bar

Ignition
,
5

I was able to do what I think you want as follows:

Table filter
Table filter805×247 15.6 KB

Figure 1. The desired functionality.

  1. Create a TextField for your search string. I’ll leave you to work out how to make this appear and disappear.
  2. Set the table’s props.filter.enabled : true.
  3. Bind the table’s props.filter.text to the TextField created in 1.
  4. Do some CSS injection on the filter box: set
    props.filter.style.backgroundImage : } .tableFilter { display: none;}{
    This will hide the filter panel even though it’s enabled.

I’m just starting to learn these tricks from user @victordcq who has contributed many examples on the forum.

Update
As suggested by @victordcq, a better way would be to do the code injection in a style class rather than directly in the props.style of the component.

Hide filter
Hide filter1455×425 93.4 KB

Figure 2. Doing it with style and class!

  1. Create a style.
  2. Expand the Background section.
  3. Inject the } .tableFilter { display: none !important;}{ here. The !important rule seems to be, um, important to force the display style to override the regular CSS.
  4. Apply the style to props.filter.style.classes.
2 Likes