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!
I found the answer, search works only on non-free version of ag-grid!