Ag grid Vue Search filter

Question

How to make this kinda search filter in ag grid vue? Link for photo: https://ibb.co/cwVq7DD Docs link: https://www.ag-grid.com/vue-data-grid/tool-panel-columns/#read-only-functions I tried to use but this search filter not displaying.

<template>
<div>
<ag-grid-vue
style="width: 1270px; height: 175px"
class="ag-theme-alpine"
:columnDefs="columnDefs"
@grid-ready="onGridReady"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:pivotMode="true"
:sideBar="sideBar"
:rowGroupPanelShow="rowGroupPanelShow"
:pivotPanelShow="pivotPanelShow"
:rowData="rowData"
:alwaysShowHorizontalScroll="true"
:alwaysShowVerticalScroll="true">
</ag-grid-vue>

    </div>
</template>

Also You can see vue scripts for ag-grid, that I tried to run for html template :

<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";
export default { 
  name: "WbCardDetail",
  components: { 
      AgGridVue,
 },
  setup() {
    return {
      columnDefs: [
        { headerName: "№", field: "position", filter: 'agTextColumnFilter', filterParams: {
            textMatcher: ({filter, value, filterText}) => {
                // custom matching logic that returns a boolean
                }
        } },
        { headerName: "Фото", field: "thumb", filter: 'agTextColumnFilter' },
        { headerName: "Цена ставки", field: "cpm", filter: 'agTextColumnFilter' },
        { headerName: "SKU", field: "id", filter: 'agTextColumnFilter' },           
      ],
      rowData: [
        { position: "1", thumb: "Photo", cpm: "120"},
      ],
      defaultColDef: {
        flex: 1,
        minWidth: 100,
        filter: true,
        sortable: true,
        enablePivot: true,
        enableValue: true,
        enableRowGroup: true,
        resizable: true,        
      }
    }
  },
   created() {
    this.autoGroupColumnDef = {
      minWidth: 200,
    };
    this.sideBar = {
      toolPanels: [
        {
          id: 'columns',
          labelDefault: 'Столбцы',
          labelKey: 'columns',
          iconKey: 'columns',
          toolPanel: 'agColumnsToolPanel',
          toolPanelParams: {
            suppressRowGroups: true,
            suppressValues: true,
            suppressPivots: true,
            suppressPivotMode: true,
            suppressColumnFilter: true,
            suppressColumnSelectAll: true,
            suppressColumnExpandAll: true,
          },
        },
      ],
      defaultToolPanel: 'columns',
    };
  },
}
</script>

Thanks!

Answer 1

I found the answer, search works only on non-free version of ag-grid!