[{"data":1,"prerenderedAt":3237},["ShallowReactive",2],{"blog-vuestic-ui-with-ag-grid":3},{"id":4,"title":5,"author":6,"authorSlug":7,"body":8,"date":3227,"description":3228,"extension":3229,"faq":7,"featured":3230,"image":3231,"meta":3232,"navigation":85,"path":3233,"readTime":7,"seo":3234,"stem":3235,"tags":7,"__hash__":3236},"blog\u002Fblog\u002Fvuestic-ui-with-ag-grid.md","Vuestic UI & AG Grid Tutorial - Build Advanced Vue 3 Datatables with Epicmax","Epicmax Team",null,{"type":9,"value":10,"toc":3218},"minimark",[11,15,25,28,31,43,52,62,69,72,118,123,128,201,204,209,229,412,416,836,1032,1037,1236,1294,1299,1303,1533,1588,1593,1677,1685,1689,1839,1844,1848,2315,2320,2324,2672,2678,3190,3196,3201,3206,3210,3215],[12,13,14],"p",{},"Vuestic UI, the Vue 3 UI framework from Epicmax, have collaborated with AG Grid, the leading datagrid provider, to empower users with feature-rich table functionality.",[12,16,17,24],{},[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fwww.ag-grid.com\u002F",[22],"nofollow","AG Grid"," is available as an extension via Vuestic UI, meaning users can add AG Grid tables to their projects with no extra cost or difficulty. The company also provides a ready-made style theme for AG Grid’s library of tables, which integrates with Vuestic global config, keeping AG Grid in sync with other components on the page.",[12,26,27],{},"Vuestic selected AG Grid as an excellent solution for complex data handling needs. Features like fixed columns and grouping are too expensive to implement, so it’s more beneficial to use a trusted tool instead of developing something independently. The experience in non open source projects was positive as well.",[12,29,30],{},"AG Grid works with all JavaScript frameworks, including React, Angular, and Vue, including Vue 2 and Vue 3. AG Grid saves on development time, providing the perfect mix of out-of-the-box functionality and customization.",[12,32,33,34,42],{},"For teams upgrading legacy Vue 2 projects, combining AG Grid with Vuestic UI pairs well with professional ",[35,36,37],"strong",{},[18,38,41],{"href":39,"rel":40},"https:\u002F\u002Fepicmax.co\u002Fvue-3-migration",[22],"Vue.js migration services",", helping ensure a smooth transition to modern Vue 3 architecture.",[12,44,45,46,51],{},"You can find the repo here and the code sandbox ",[18,47,50],{"href":48,"rel":49},"https:\u002F\u002Fcodesandbox.io\u002Fp\u002Fgithub\u002Fepicmaxco\u002Fvuestic-ag-grid-app\u002Fdraft\u002Famazing-violet?file=%2Fsrc%2Fcomponents%2FUsersPage.vue",[22],"here",".",[12,53,54,55,58,59,61],{},"Requirements",[56,57],"br",{},"\nThe application we will build is a CRUD page of users - something an admin would use to manage users. You can find something similar in almost any admin dashboard.",[56,60],{},"\nHere’s a wireframe for the application:",[12,63,64],{},[65,66],"img",{"alt":67,"src":68},"","\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f8e184aa2197bc7e.png",[12,70,71],{},"Can’t work on an app without a plan, so here’s one:",[73,74,77,88,94,100,106,112],"ul",{"className":75},[76],"contains-task-list",[78,79,82,87],"li",{"className":80},[81],"task-list-item",[83,84],"input",{"disabled":85,"type":86},true,"checkbox"," Scaffold new project",[78,89,91,93],{"className":90},[81],[83,92],{"disabled":85,"type":86}," Make a simple table with image, name, email",[78,95,97,99],{"className":96},[81],[83,98],{"disabled":85,"type":86}," Add active column",[78,101,103,105],{"className":102},[81],[83,104],{"disabled":85,"type":86}," Implement sorting for all columns",[78,107,109,111],{"className":108},[81],[83,110],{"disabled":85,"type":86}," Implement full-text filtering",[78,113,115,117],{"className":114},[81],[83,116],{"disabled":85,"type":86}," Add create, edit and delete functionality",[12,119,120],{},[65,121],{"alt":67,"src":122},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f90cccd0c4a50fc3.gif",[124,125,127],"h2",{"id":126},"scaffold-new-project","Scaffold new project",[129,130,134],"pre",{"className":131,"code":132,"language":133,"meta":67,"style":67},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm create vite ag-grid-project -- --template vue-ts \ncd ag-grid-project \nnpm install \nnpm run dev\n","bash",[135,136,137,169,180,190],"code",{"__ignoreMap":67},[138,139,142,146,150,153,156,159,162,165],"span",{"class":140,"line":141},"line",1,[138,143,145],{"class":144},"sBMFI","npm",[138,147,149],{"class":148},"sfazB"," create",[138,151,152],{"class":148}," vite",[138,154,155],{"class":148}," ag-grid-project",[138,157,158],{"class":148}," --",[138,160,161],{"class":148}," --template",[138,163,164],{"class":148}," vue-ts",[138,166,168],{"class":167},"sTEyZ"," \n",[138,170,172,176,178],{"class":140,"line":171},2,[138,173,175],{"class":174},"s2Zo4","cd",[138,177,155],{"class":148},[138,179,168],{"class":167},[138,181,183,185,188],{"class":140,"line":182},3,[138,184,145],{"class":144},[138,186,187],{"class":148}," install",[138,189,168],{"class":167},[138,191,193,195,198],{"class":140,"line":192},4,[138,194,145],{"class":144},[138,196,197],{"class":148}," run",[138,199,200],{"class":148}," dev\n",[12,202,203],{},"If you open the page in browser - you should see default vite page:",[12,205,206],{},[65,207],{"alt":67,"src":208},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f948bfc2e72f2376.png",[129,210,212],{"className":131,"code":211,"language":133,"meta":67,"style":67},"npm install vuestic-ui @vuestic\u002Fag-grid-theme sass\n",[135,213,214],{"__ignoreMap":67},[138,215,216,218,220,223,226],{"class":140,"line":141},[138,217,145],{"class":144},[138,219,187],{"class":148},[138,221,222],{"class":148}," vuestic-ui",[138,224,225],{"class":148}," @vuestic\u002Fag-grid-theme",[138,227,228],{"class":148}," sass\n",[129,230,234],{"className":231,"code":232,"language":233,"meta":67,"style":67},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createApp } from \"vue\";\nimport App from \".\u002FApp.vue\";\nimport { createVuesticEssential } from \"vuestic-ui\"; \u002F\u002F \u003C--\nimport 'vuestic-ui\u002Fdist\u002Fvuestic-ui.css' \u002F\u002F \u003C--\n\nconst app = createApp(App);\n\napp.use(createVuesticEssential()); \u002F\u002F \u003C--\n\napp.mount(\"#app\");\n","js",[135,235,236,267,286,313,328,334,354,359,383,388],{"__ignoreMap":67},[138,237,238,242,246,249,252,255,258,261,264],{"class":140,"line":141},[138,239,241],{"class":240},"s7zQu","import",[138,243,245],{"class":244},"sMK4o"," {",[138,247,248],{"class":167}," createApp",[138,250,251],{"class":244}," }",[138,253,254],{"class":240}," from",[138,256,257],{"class":244}," \"",[138,259,260],{"class":148},"vue",[138,262,263],{"class":244},"\"",[138,265,266],{"class":244},";\n",[138,268,269,271,274,277,279,282,284],{"class":140,"line":171},[138,270,241],{"class":240},[138,272,273],{"class":167}," App ",[138,275,276],{"class":240},"from",[138,278,257],{"class":244},[138,280,281],{"class":148},".\u002FApp.vue",[138,283,263],{"class":244},[138,285,266],{"class":244},[138,287,288,290,292,295,297,299,301,304,306,309],{"class":140,"line":182},[138,289,241],{"class":240},[138,291,245],{"class":244},[138,293,294],{"class":167}," createVuesticEssential",[138,296,251],{"class":244},[138,298,254],{"class":240},[138,300,257],{"class":244},[138,302,303],{"class":148},"vuestic-ui",[138,305,263],{"class":244},[138,307,308],{"class":244},";",[138,310,312],{"class":311},"sHwdD"," \u002F\u002F \u003C--\n",[138,314,315,317,320,323,326],{"class":140,"line":192},[138,316,241],{"class":240},[138,318,319],{"class":244}," '",[138,321,322],{"class":148},"vuestic-ui\u002Fdist\u002Fvuestic-ui.css",[138,324,325],{"class":244},"'",[138,327,312],{"class":311},[138,329,331],{"class":140,"line":330},5,[138,332,333],{"emptyLinePlaceholder":85},"\n",[138,335,337,341,344,347,349,352],{"class":140,"line":336},6,[138,338,340],{"class":339},"spNyl","const",[138,342,343],{"class":167}," app ",[138,345,346],{"class":244},"=",[138,348,248],{"class":174},[138,350,351],{"class":167},"(App)",[138,353,266],{"class":244},[138,355,357],{"class":140,"line":356},7,[138,358,333],{"emptyLinePlaceholder":85},[138,360,362,365,367,370,373,376,379,381],{"class":140,"line":361},8,[138,363,364],{"class":167},"app",[138,366,51],{"class":244},[138,368,369],{"class":174},"use",[138,371,372],{"class":167},"(",[138,374,375],{"class":174},"createVuesticEssential",[138,377,378],{"class":167},"())",[138,380,308],{"class":244},[138,382,312],{"class":311},[138,384,386],{"class":140,"line":385},9,[138,387,333],{"emptyLinePlaceholder":85},[138,389,391,393,395,398,400,402,405,407,410],{"class":140,"line":390},10,[138,392,364],{"class":167},[138,394,51],{"class":244},[138,396,397],{"class":174},"mount",[138,399,372],{"class":167},[138,401,263],{"class":244},[138,403,404],{"class":148},"#app",[138,406,263],{"class":244},[138,408,409],{"class":167},")",[138,411,266],{"class":244},[124,413,415],{"id":414},"make-a-simple-table-with-image-name-email","Make a simple table with \"image\", \"name\", \"email\"",[129,417,420],{"className":418,"code":419,"language":260,"meta":67,"style":67},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv style=\"height: 300px; width: 100%;\">\n    \u003Cag-grid-vue\n      class=\"ag-theme-vuestic\"\n      style=\"width: 100%; height: 100%;\"\n      :columnDefs=\"columnDefs\"\n      :rowData=\"reactiveUsers\"\n      :modules=\"modules\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { AgGridVue } from '@ag-grid-community\u002Fvue3'\nimport {\n  ClientSideRowModelModule,\n} from '@ag-grid-community\u002Fclient-side-row-model'\nimport { users } from '..\u002Fdata\u002Fusers'\nimport { reactive } from 'vue'\n\nconst modules = [ClientSideRowModelModule]\n\nconst reactiveUsers = reactive(users)\n\nconst columnDefs = [\n  { field: 'name' },\n  { field: 'email' },\n]\n\u003C\u002Fscript>\n\n\u003Cstyle lang=\"scss\">\n@import \"@vuestic\u002Fag-grid-theme\u002Findex.scss\";\n\u003C\u002Fstyle>\n",[135,421,422,434,456,464,479,493,507,521,535,540,549,559,564,589,611,619,628,643,664,684,689,702,707,722,727,740,762,780,786,795,800,821,827],{"__ignoreMap":67},[138,423,424,427,431],{"class":140,"line":141},[138,425,426],{"class":244},"\u003C",[138,428,430],{"class":429},"swJcz","template",[138,432,433],{"class":244},">\n",[138,435,436,439,442,445,447,449,452,454],{"class":140,"line":171},[138,437,438],{"class":244},"  \u003C",[138,440,441],{"class":429},"div",[138,443,444],{"class":339}," style",[138,446,346],{"class":244},[138,448,263],{"class":244},[138,450,451],{"class":148},"height: 300px; width: 100%;",[138,453,263],{"class":244},[138,455,433],{"class":244},[138,457,458,461],{"class":140,"line":182},[138,459,460],{"class":244},"    \u003C",[138,462,463],{"class":429},"ag-grid-vue\n",[138,465,466,469,471,473,476],{"class":140,"line":192},[138,467,468],{"class":339},"      class",[138,470,346],{"class":244},[138,472,263],{"class":244},[138,474,475],{"class":148},"ag-theme-vuestic",[138,477,478],{"class":244},"\"\n",[138,480,481,484,486,488,491],{"class":140,"line":330},[138,482,483],{"class":339},"      style",[138,485,346],{"class":244},[138,487,263],{"class":244},[138,489,490],{"class":148},"width: 100%; height: 100%;",[138,492,478],{"class":244},[138,494,495,498,500,502,505],{"class":140,"line":336},[138,496,497],{"class":339},"      :columnDefs",[138,499,346],{"class":244},[138,501,263],{"class":244},[138,503,504],{"class":148},"columnDefs",[138,506,478],{"class":244},[138,508,509,512,514,516,519],{"class":140,"line":356},[138,510,511],{"class":339},"      :rowData",[138,513,346],{"class":244},[138,515,263],{"class":244},[138,517,518],{"class":148},"reactiveUsers",[138,520,478],{"class":244},[138,522,523,526,528,530,533],{"class":140,"line":361},[138,524,525],{"class":339},"      :modules",[138,527,346],{"class":244},[138,529,263],{"class":244},[138,531,532],{"class":148},"modules",[138,534,478],{"class":244},[138,536,537],{"class":140,"line":385},[138,538,539],{"class":244},"    \u002F>\n",[138,541,542,545,547],{"class":140,"line":390},[138,543,544],{"class":244},"  \u003C\u002F",[138,546,441],{"class":429},[138,548,433],{"class":244},[138,550,552,555,557],{"class":140,"line":551},11,[138,553,554],{"class":244},"\u003C\u002F",[138,556,430],{"class":429},[138,558,433],{"class":244},[138,560,562],{"class":140,"line":561},12,[138,563,333],{"emptyLinePlaceholder":85},[138,565,567,569,572,575,578,580,582,585,587],{"class":140,"line":566},13,[138,568,426],{"class":244},[138,570,571],{"class":429},"script",[138,573,574],{"class":339}," setup",[138,576,577],{"class":339}," lang",[138,579,346],{"class":244},[138,581,263],{"class":244},[138,583,584],{"class":148},"ts",[138,586,263],{"class":244},[138,588,433],{"class":244},[138,590,592,594,596,599,601,603,605,608],{"class":140,"line":591},14,[138,593,241],{"class":240},[138,595,245],{"class":244},[138,597,598],{"class":167}," AgGridVue",[138,600,251],{"class":244},[138,602,254],{"class":240},[138,604,319],{"class":244},[138,606,607],{"class":148},"@ag-grid-community\u002Fvue3",[138,609,610],{"class":244},"'\n",[138,612,614,616],{"class":140,"line":613},15,[138,615,241],{"class":240},[138,617,618],{"class":244}," {\n",[138,620,622,625],{"class":140,"line":621},16,[138,623,624],{"class":167},"  ClientSideRowModelModule",[138,626,627],{"class":244},",\n",[138,629,631,634,636,638,641],{"class":140,"line":630},17,[138,632,633],{"class":244},"}",[138,635,254],{"class":240},[138,637,319],{"class":244},[138,639,640],{"class":148},"@ag-grid-community\u002Fclient-side-row-model",[138,642,610],{"class":244},[138,644,646,648,650,653,655,657,659,662],{"class":140,"line":645},18,[138,647,241],{"class":240},[138,649,245],{"class":244},[138,651,652],{"class":167}," users",[138,654,251],{"class":244},[138,656,254],{"class":240},[138,658,319],{"class":244},[138,660,661],{"class":148},"..\u002Fdata\u002Fusers",[138,663,610],{"class":244},[138,665,667,669,671,674,676,678,680,682],{"class":140,"line":666},19,[138,668,241],{"class":240},[138,670,245],{"class":244},[138,672,673],{"class":167}," reactive",[138,675,251],{"class":244},[138,677,254],{"class":240},[138,679,319],{"class":244},[138,681,260],{"class":148},[138,683,610],{"class":244},[138,685,687],{"class":140,"line":686},20,[138,688,333],{"emptyLinePlaceholder":85},[138,690,692,694,697,699],{"class":140,"line":691},21,[138,693,340],{"class":339},[138,695,696],{"class":167}," modules ",[138,698,346],{"class":244},[138,700,701],{"class":167}," [ClientSideRowModelModule]\n",[138,703,705],{"class":140,"line":704},22,[138,706,333],{"emptyLinePlaceholder":85},[138,708,710,712,715,717,719],{"class":140,"line":709},23,[138,711,340],{"class":339},[138,713,714],{"class":167}," reactiveUsers ",[138,716,346],{"class":244},[138,718,673],{"class":174},[138,720,721],{"class":167},"(users)\n",[138,723,725],{"class":140,"line":724},24,[138,726,333],{"emptyLinePlaceholder":85},[138,728,730,732,735,737],{"class":140,"line":729},25,[138,731,340],{"class":339},[138,733,734],{"class":167}," columnDefs ",[138,736,346],{"class":244},[138,738,739],{"class":167}," [\n",[138,741,743,746,749,752,754,757,759],{"class":140,"line":742},26,[138,744,745],{"class":244},"  {",[138,747,748],{"class":429}," field",[138,750,751],{"class":244},":",[138,753,319],{"class":244},[138,755,756],{"class":148},"name",[138,758,325],{"class":244},[138,760,761],{"class":244}," },\n",[138,763,765,767,769,771,773,776,778],{"class":140,"line":764},27,[138,766,745],{"class":244},[138,768,748],{"class":429},[138,770,751],{"class":244},[138,772,319],{"class":244},[138,774,775],{"class":148},"email",[138,777,325],{"class":244},[138,779,761],{"class":244},[138,781,783],{"class":140,"line":782},28,[138,784,785],{"class":167},"]\n",[138,787,789,791,793],{"class":140,"line":788},29,[138,790,554],{"class":244},[138,792,571],{"class":429},[138,794,433],{"class":244},[138,796,798],{"class":140,"line":797},30,[138,799,333],{"emptyLinePlaceholder":85},[138,801,803,805,808,810,812,814,817,819],{"class":140,"line":802},31,[138,804,426],{"class":244},[138,806,807],{"class":429},"style",[138,809,577],{"class":339},[138,811,346],{"class":244},[138,813,263],{"class":244},[138,815,816],{"class":148},"scss",[138,818,263],{"class":244},[138,820,433],{"class":244},[138,822,824],{"class":140,"line":823},32,[138,825,826],{"class":167},"@import \"@vuestic\u002Fag-grid-theme\u002Findex.scss\";\n",[138,828,830,832,834],{"class":140,"line":829},33,[138,831,554],{"class":244},[138,833,807],{"class":429},[138,835,433],{"class":244},[129,837,840],{"className":838,"code":839,"language":584,"meta":67,"style":67},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","type User = {\n  id: number,\n  image: string,\n  name: string,\n  email: string,\n  active: boolean,\n}\n\nexport const users: User[] = [\n  {\n    id: 1,\n    image: 'https:\u002F\u002Fpicsum.photos\u002Fid\u002F1\u002F50\u002F50',\n    name: 'Ashley Mcdaniel',\n    email: 'ashleymcdaniel@nebulean.com',\n    active: true,\n  },\n...\n",[135,841,842,855,867,879,890,901,913,918,922,943,948,961,977,993,1009,1022,1027],{"__ignoreMap":67},[138,843,844,847,850,853],{"class":140,"line":141},[138,845,846],{"class":339},"type",[138,848,849],{"class":144}," User",[138,851,852],{"class":244}," =",[138,854,618],{"class":244},[138,856,857,860,862,865],{"class":140,"line":171},[138,858,859],{"class":429},"  id",[138,861,751],{"class":244},[138,863,864],{"class":144}," number",[138,866,627],{"class":244},[138,868,869,872,874,877],{"class":140,"line":182},[138,870,871],{"class":429},"  image",[138,873,751],{"class":244},[138,875,876],{"class":144}," string",[138,878,627],{"class":244},[138,880,881,884,886,888],{"class":140,"line":192},[138,882,883],{"class":429},"  name",[138,885,751],{"class":244},[138,887,876],{"class":144},[138,889,627],{"class":244},[138,891,892,895,897,899],{"class":140,"line":330},[138,893,894],{"class":429},"  email",[138,896,751],{"class":244},[138,898,876],{"class":144},[138,900,627],{"class":244},[138,902,903,906,908,911],{"class":140,"line":336},[138,904,905],{"class":429},"  active",[138,907,751],{"class":244},[138,909,910],{"class":144}," boolean",[138,912,627],{"class":244},[138,914,915],{"class":140,"line":356},[138,916,917],{"class":244},"}\n",[138,919,920],{"class":140,"line":361},[138,921,333],{"emptyLinePlaceholder":85},[138,923,924,927,930,932,934,936,939,941],{"class":140,"line":385},[138,925,926],{"class":240},"export",[138,928,929],{"class":339}," const",[138,931,652],{"class":167},[138,933,751],{"class":244},[138,935,849],{"class":144},[138,937,938],{"class":167},"[] ",[138,940,346],{"class":244},[138,942,739],{"class":167},[138,944,945],{"class":140,"line":390},[138,946,947],{"class":244},"  {\n",[138,949,950,953,955,959],{"class":140,"line":551},[138,951,952],{"class":429},"    id",[138,954,751],{"class":244},[138,956,958],{"class":957},"sbssI"," 1",[138,960,627],{"class":244},[138,962,963,966,968,970,973,975],{"class":140,"line":561},[138,964,965],{"class":429},"    image",[138,967,751],{"class":244},[138,969,319],{"class":244},[138,971,972],{"class":148},"https:\u002F\u002Fpicsum.photos\u002Fid\u002F1\u002F50\u002F50",[138,974,325],{"class":244},[138,976,627],{"class":244},[138,978,979,982,984,986,989,991],{"class":140,"line":566},[138,980,981],{"class":429},"    name",[138,983,751],{"class":244},[138,985,319],{"class":244},[138,987,988],{"class":148},"Ashley Mcdaniel",[138,990,325],{"class":244},[138,992,627],{"class":244},[138,994,995,998,1000,1002,1005,1007],{"class":140,"line":591},[138,996,997],{"class":429},"    email",[138,999,751],{"class":244},[138,1001,319],{"class":244},[138,1003,1004],{"class":148},"ashleymcdaniel@nebulean.com",[138,1006,325],{"class":244},[138,1008,627],{"class":244},[138,1010,1011,1014,1016,1020],{"class":140,"line":613},[138,1012,1013],{"class":429},"    active",[138,1015,751],{"class":244},[138,1017,1019],{"class":1018},"sfNiH"," true",[138,1021,627],{"class":244},[138,1023,1024],{"class":140,"line":621},[138,1025,1026],{"class":244},"  },\n",[138,1028,1029],{"class":140,"line":630},[138,1030,1031],{"class":244},"...\n",[12,1033,1034],{},[65,1035],{"alt":67,"src":1036},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f988feeda38b9ee8.png",[129,1038,1040],{"className":418,"code":1039,"language":260,"meta":67,"style":67},"\u003Ctemplate>\n  \u003Cva-avatar :src=\"url\" :size=\"44\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { VaAvatar } from 'vuestic-ui'\nimport { computed } from 'vue'\n\nconst props = defineProps\u003C{params: {value: string}}>()\n\nconst url = computed(() => props.params.value)\n\u003C\u002Fscript>\n",[135,1041,1042,1050,1084,1092,1096,1116,1135,1154,1158,1193,1197,1228],{"__ignoreMap":67},[138,1043,1044,1046,1048],{"class":140,"line":141},[138,1045,426],{"class":244},[138,1047,430],{"class":429},[138,1049,433],{"class":244},[138,1051,1052,1054,1057,1060,1062,1064,1067,1069,1072,1074,1076,1079,1081],{"class":140,"line":171},[138,1053,438],{"class":244},[138,1055,1056],{"class":429},"va-avatar",[138,1058,1059],{"class":339}," :src",[138,1061,346],{"class":244},[138,1063,263],{"class":244},[138,1065,1066],{"class":148},"url",[138,1068,263],{"class":244},[138,1070,1071],{"class":339}," :size",[138,1073,346],{"class":244},[138,1075,263],{"class":244},[138,1077,1078],{"class":148},"44",[138,1080,263],{"class":244},[138,1082,1083],{"class":244}," \u002F>\n",[138,1085,1086,1088,1090],{"class":140,"line":182},[138,1087,554],{"class":244},[138,1089,430],{"class":429},[138,1091,433],{"class":244},[138,1093,1094],{"class":140,"line":192},[138,1095,333],{"emptyLinePlaceholder":85},[138,1097,1098,1100,1102,1104,1106,1108,1110,1112,1114],{"class":140,"line":330},[138,1099,426],{"class":244},[138,1101,571],{"class":429},[138,1103,574],{"class":339},[138,1105,577],{"class":339},[138,1107,346],{"class":244},[138,1109,263],{"class":244},[138,1111,584],{"class":148},[138,1113,263],{"class":244},[138,1115,433],{"class":244},[138,1117,1118,1120,1122,1125,1127,1129,1131,1133],{"class":140,"line":336},[138,1119,241],{"class":240},[138,1121,245],{"class":244},[138,1123,1124],{"class":167}," VaAvatar",[138,1126,251],{"class":244},[138,1128,254],{"class":240},[138,1130,319],{"class":244},[138,1132,303],{"class":148},[138,1134,610],{"class":244},[138,1136,1137,1139,1141,1144,1146,1148,1150,1152],{"class":140,"line":356},[138,1138,241],{"class":240},[138,1140,245],{"class":244},[138,1142,1143],{"class":167}," computed",[138,1145,251],{"class":244},[138,1147,254],{"class":240},[138,1149,319],{"class":244},[138,1151,260],{"class":148},[138,1153,610],{"class":244},[138,1155,1156],{"class":140,"line":361},[138,1157,333],{"emptyLinePlaceholder":85},[138,1159,1160,1162,1165,1167,1170,1173,1176,1178,1180,1183,1185,1187,1190],{"class":140,"line":385},[138,1161,340],{"class":339},[138,1163,1164],{"class":167}," props ",[138,1166,346],{"class":244},[138,1168,1169],{"class":174}," defineProps",[138,1171,1172],{"class":244},"\u003C{",[138,1174,1175],{"class":429},"params",[138,1177,751],{"class":244},[138,1179,245],{"class":244},[138,1181,1182],{"class":429},"value",[138,1184,751],{"class":244},[138,1186,876],{"class":144},[138,1188,1189],{"class":244},"}}>",[138,1191,1192],{"class":167},"()\n",[138,1194,1195],{"class":140,"line":390},[138,1196,333],{"emptyLinePlaceholder":85},[138,1198,1199,1201,1204,1206,1208,1210,1213,1216,1219,1221,1223,1225],{"class":140,"line":551},[138,1200,340],{"class":339},[138,1202,1203],{"class":167}," url ",[138,1205,346],{"class":244},[138,1207,1143],{"class":174},[138,1209,372],{"class":167},[138,1211,1212],{"class":244},"()",[138,1214,1215],{"class":339}," =>",[138,1217,1218],{"class":167}," props",[138,1220,51],{"class":244},[138,1222,1175],{"class":167},[138,1224,51],{"class":244},[138,1226,1227],{"class":167},"value)\n",[138,1229,1230,1232,1234],{"class":140,"line":561},[138,1231,554],{"class":244},[138,1233,571],{"class":429},[138,1235,433],{"class":244},[129,1237,1239],{"className":231,"code":1238,"language":233,"meta":67,"style":67},"const columnDefs = [\n  { field: 'image', cellRenderer: UserImage, width: 65 },\n  ...\n",[135,1240,1241,1251,1289],{"__ignoreMap":67},[138,1242,1243,1245,1247,1249],{"class":140,"line":141},[138,1244,340],{"class":339},[138,1246,734],{"class":167},[138,1248,346],{"class":244},[138,1250,739],{"class":167},[138,1252,1253,1255,1257,1259,1261,1264,1266,1269,1272,1274,1277,1279,1282,1284,1287],{"class":140,"line":171},[138,1254,745],{"class":244},[138,1256,748],{"class":429},[138,1258,751],{"class":244},[138,1260,319],{"class":244},[138,1262,1263],{"class":148},"image",[138,1265,325],{"class":244},[138,1267,1268],{"class":244},",",[138,1270,1271],{"class":429}," cellRenderer",[138,1273,751],{"class":244},[138,1275,1276],{"class":167}," UserImage",[138,1278,1268],{"class":244},[138,1280,1281],{"class":429}," width",[138,1283,751],{"class":244},[138,1285,1286],{"class":957}," 65",[138,1288,761],{"class":244},[138,1290,1291],{"class":140,"line":182},[138,1292,1293],{"class":244},"  ...\n",[12,1295,1296],{},[65,1297],{"alt":67,"src":1298},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f9b5dd9f1cb7a53b.png",[124,1300,1302],{"id":1301},"add-active-column","Add 'active' column",[129,1304,1306],{"className":418,"code":1305,"language":260,"meta":67,"style":67},"\u003Ctemplate>\n  \u003Cva-switch class=\"user-active\" v-model=\"user.active\" size=\"small\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { VaSwitch } from 'vuestic-ui'\nimport { computed, reactive } from 'vue'\nimport { User } from '..\u002Fdata\u002Fusers'\n\nconst props = defineProps\u003C{params: {data: User}}>()\n\n\u002F\u002F AG Grid strips reactivity for some reason, so we have to force it back.\nconst user = computed(() => reactive(props.params.data))\n\u003C\u002Fscript>\n",[135,1307,1308,1316,1361,1369,1373,1393,1412,1434,1452,1456,1485,1489,1494,1525],{"__ignoreMap":67},[138,1309,1310,1312,1314],{"class":140,"line":141},[138,1311,426],{"class":244},[138,1313,430],{"class":429},[138,1315,433],{"class":244},[138,1317,1318,1320,1323,1326,1328,1330,1333,1335,1338,1340,1342,1345,1347,1350,1352,1354,1357,1359],{"class":140,"line":171},[138,1319,438],{"class":244},[138,1321,1322],{"class":429},"va-switch",[138,1324,1325],{"class":339}," class",[138,1327,346],{"class":244},[138,1329,263],{"class":244},[138,1331,1332],{"class":148},"user-active",[138,1334,263],{"class":244},[138,1336,1337],{"class":339}," v-model",[138,1339,346],{"class":244},[138,1341,263],{"class":244},[138,1343,1344],{"class":148},"user.active",[138,1346,263],{"class":244},[138,1348,1349],{"class":339}," size",[138,1351,346],{"class":244},[138,1353,263],{"class":244},[138,1355,1356],{"class":148},"small",[138,1358,263],{"class":244},[138,1360,1083],{"class":244},[138,1362,1363,1365,1367],{"class":140,"line":182},[138,1364,554],{"class":244},[138,1366,430],{"class":429},[138,1368,433],{"class":244},[138,1370,1371],{"class":140,"line":192},[138,1372,333],{"emptyLinePlaceholder":85},[138,1374,1375,1377,1379,1381,1383,1385,1387,1389,1391],{"class":140,"line":330},[138,1376,426],{"class":244},[138,1378,571],{"class":429},[138,1380,574],{"class":339},[138,1382,577],{"class":339},[138,1384,346],{"class":244},[138,1386,263],{"class":244},[138,1388,584],{"class":148},[138,1390,263],{"class":244},[138,1392,433],{"class":244},[138,1394,1395,1397,1399,1402,1404,1406,1408,1410],{"class":140,"line":336},[138,1396,241],{"class":240},[138,1398,245],{"class":244},[138,1400,1401],{"class":167}," VaSwitch",[138,1403,251],{"class":244},[138,1405,254],{"class":240},[138,1407,319],{"class":244},[138,1409,303],{"class":148},[138,1411,610],{"class":244},[138,1413,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432],{"class":140,"line":356},[138,1415,241],{"class":240},[138,1417,245],{"class":244},[138,1419,1143],{"class":167},[138,1421,1268],{"class":244},[138,1423,673],{"class":167},[138,1425,251],{"class":244},[138,1427,254],{"class":240},[138,1429,319],{"class":244},[138,1431,260],{"class":148},[138,1433,610],{"class":244},[138,1435,1436,1438,1440,1442,1444,1446,1448,1450],{"class":140,"line":361},[138,1437,241],{"class":240},[138,1439,245],{"class":244},[138,1441,849],{"class":167},[138,1443,251],{"class":244},[138,1445,254],{"class":240},[138,1447,319],{"class":244},[138,1449,661],{"class":148},[138,1451,610],{"class":244},[138,1453,1454],{"class":140,"line":385},[138,1455,333],{"emptyLinePlaceholder":85},[138,1457,1458,1460,1462,1464,1466,1468,1470,1472,1474,1477,1479,1481,1483],{"class":140,"line":390},[138,1459,340],{"class":339},[138,1461,1164],{"class":167},[138,1463,346],{"class":244},[138,1465,1169],{"class":174},[138,1467,1172],{"class":244},[138,1469,1175],{"class":429},[138,1471,751],{"class":244},[138,1473,245],{"class":244},[138,1475,1476],{"class":429},"data",[138,1478,751],{"class":244},[138,1480,849],{"class":144},[138,1482,1189],{"class":244},[138,1484,1192],{"class":167},[138,1486,1487],{"class":140,"line":551},[138,1488,333],{"emptyLinePlaceholder":85},[138,1490,1491],{"class":140,"line":561},[138,1492,1493],{"class":311},"\u002F\u002F AG Grid strips reactivity for some reason, so we have to force it back.\n",[138,1495,1496,1498,1501,1503,1505,1507,1509,1511,1513,1516,1518,1520,1522],{"class":140,"line":566},[138,1497,340],{"class":339},[138,1499,1500],{"class":167}," user ",[138,1502,346],{"class":244},[138,1504,1143],{"class":174},[138,1506,372],{"class":167},[138,1508,1212],{"class":244},[138,1510,1215],{"class":339},[138,1512,673],{"class":174},[138,1514,1515],{"class":167},"(props",[138,1517,51],{"class":244},[138,1519,1175],{"class":167},[138,1521,51],{"class":244},[138,1523,1524],{"class":167},"data))\n",[138,1526,1527,1529,1531],{"class":140,"line":591},[138,1528,554],{"class":244},[138,1530,571],{"class":429},[138,1532,433],{"class":244},[129,1534,1536],{"className":231,"code":1535,"language":233,"meta":67,"style":67},"const columnDefs = [\n    ...\n  { field: 'active', cellRenderer: UserActive, width: 75 },\n",[135,1537,1538,1548,1553],{"__ignoreMap":67},[138,1539,1540,1542,1544,1546],{"class":140,"line":141},[138,1541,340],{"class":339},[138,1543,734],{"class":167},[138,1545,346],{"class":244},[138,1547,739],{"class":167},[138,1549,1550],{"class":140,"line":171},[138,1551,1552],{"class":244},"    ...\n",[138,1554,1555,1557,1559,1561,1563,1566,1568,1570,1572,1574,1577,1579,1581,1583,1586],{"class":140,"line":182},[138,1556,745],{"class":244},[138,1558,748],{"class":429},[138,1560,751],{"class":244},[138,1562,319],{"class":244},[138,1564,1565],{"class":148},"active",[138,1567,325],{"class":244},[138,1569,1268],{"class":244},[138,1571,1271],{"class":429},[138,1573,751],{"class":244},[138,1575,1576],{"class":167}," UserActive",[138,1578,1268],{"class":244},[138,1580,1281],{"class":429},[138,1582,751],{"class":244},[138,1584,1585],{"class":957}," 75",[138,1587,761],{"class":244},[12,1589,1590],{},[65,1591],{"alt":67,"src":1592},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f9a90f6a576ee140.png",[129,1594,1596],{"className":231,"code":1595,"language":233,"meta":67,"style":67},"const active = computed(() => props.params.data.active)\nconst setActive = (value) => api.setActive(props.params.data.id, value)\n",[135,1597,1598,1630],{"__ignoreMap":67},[138,1599,1600,1602,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627],{"class":140,"line":141},[138,1601,340],{"class":339},[138,1603,1604],{"class":167}," active ",[138,1606,346],{"class":244},[138,1608,1143],{"class":174},[138,1610,372],{"class":167},[138,1612,1212],{"class":244},[138,1614,1215],{"class":339},[138,1616,1218],{"class":167},[138,1618,51],{"class":244},[138,1620,1175],{"class":167},[138,1622,51],{"class":244},[138,1624,1476],{"class":167},[138,1626,51],{"class":244},[138,1628,1629],{"class":167},"active)\n",[138,1631,1632,1634,1637,1639,1642,1645,1647,1649,1652,1654,1657,1659,1661,1663,1665,1667,1669,1672,1674],{"class":140,"line":171},[138,1633,340],{"class":339},[138,1635,1636],{"class":167}," setActive ",[138,1638,346],{"class":244},[138,1640,1641],{"class":244}," (",[138,1643,1182],{"class":1644},"sHdIc",[138,1646,409],{"class":244},[138,1648,1215],{"class":339},[138,1650,1651],{"class":167}," api",[138,1653,51],{"class":244},[138,1655,1656],{"class":174},"setActive",[138,1658,1515],{"class":167},[138,1660,51],{"class":244},[138,1662,1175],{"class":167},[138,1664,51],{"class":244},[138,1666,1476],{"class":167},[138,1668,51],{"class":244},[138,1670,1671],{"class":167},"id",[138,1673,1268],{"class":244},[138,1675,1676],{"class":167}," value)\n",[129,1678,1683],{"className":1679,"code":1681,"language":1682},[1680],"language-text","\u003Cva-switch :modelValue=\"active\" @modelValue:update=\"setActive\" \u002F>\n","text",[135,1684,1681],{"__ignoreMap":67},[124,1686,1688],{"id":1687},"implement-sorting-for-all-columns","Implement sorting for all columns",[129,1690,1692],{"className":231,"code":1691,"language":233,"meta":67,"style":67},"const columnDefs = [\n  { field: 'image', headerName: '', cellRenderer: UserImage, width: 65 },\n  { field: 'name', sortable: true },\n  { field: 'email', sortable: true },\n  { field: 'active', cellRenderer: UserActive, width: 75, sortable: true },\n]\n",[135,1693,1694,1704,1746,1771,1795,1835],{"__ignoreMap":67},[138,1695,1696,1698,1700,1702],{"class":140,"line":141},[138,1697,340],{"class":339},[138,1699,734],{"class":167},[138,1701,346],{"class":244},[138,1703,739],{"class":167},[138,1705,1706,1708,1710,1712,1714,1716,1718,1720,1723,1725,1728,1730,1732,1734,1736,1738,1740,1742,1744],{"class":140,"line":171},[138,1707,745],{"class":244},[138,1709,748],{"class":429},[138,1711,751],{"class":244},[138,1713,319],{"class":244},[138,1715,1263],{"class":148},[138,1717,325],{"class":244},[138,1719,1268],{"class":244},[138,1721,1722],{"class":429}," headerName",[138,1724,751],{"class":244},[138,1726,1727],{"class":244}," ''",[138,1729,1268],{"class":244},[138,1731,1271],{"class":429},[138,1733,751],{"class":244},[138,1735,1276],{"class":167},[138,1737,1268],{"class":244},[138,1739,1281],{"class":429},[138,1741,751],{"class":244},[138,1743,1286],{"class":957},[138,1745,761],{"class":244},[138,1747,1748,1750,1752,1754,1756,1758,1760,1762,1765,1767,1769],{"class":140,"line":182},[138,1749,745],{"class":244},[138,1751,748],{"class":429},[138,1753,751],{"class":244},[138,1755,319],{"class":244},[138,1757,756],{"class":148},[138,1759,325],{"class":244},[138,1761,1268],{"class":244},[138,1763,1764],{"class":429}," sortable",[138,1766,751],{"class":244},[138,1768,1019],{"class":1018},[138,1770,761],{"class":244},[138,1772,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791,1793],{"class":140,"line":192},[138,1774,745],{"class":244},[138,1776,748],{"class":429},[138,1778,751],{"class":244},[138,1780,319],{"class":244},[138,1782,775],{"class":148},[138,1784,325],{"class":244},[138,1786,1268],{"class":244},[138,1788,1764],{"class":429},[138,1790,751],{"class":244},[138,1792,1019],{"class":1018},[138,1794,761],{"class":244},[138,1796,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827,1829,1831,1833],{"class":140,"line":330},[138,1798,745],{"class":244},[138,1800,748],{"class":429},[138,1802,751],{"class":244},[138,1804,319],{"class":244},[138,1806,1565],{"class":148},[138,1808,325],{"class":244},[138,1810,1268],{"class":244},[138,1812,1271],{"class":429},[138,1814,751],{"class":244},[138,1816,1576],{"class":167},[138,1818,1268],{"class":244},[138,1820,1281],{"class":429},[138,1822,751],{"class":244},[138,1824,1585],{"class":957},[138,1826,1268],{"class":244},[138,1828,1764],{"class":429},[138,1830,751],{"class":244},[138,1832,1019],{"class":1018},[138,1834,761],{"class":244},[138,1836,1837],{"class":140,"line":336},[138,1838,785],{"class":167},[12,1840,1841],{},[65,1842],{"alt":67,"src":1843},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f9c30e2557daa426.png",[124,1845,1847],{"id":1846},"implement-full-text-filtering","Implement full text filtering",[129,1849,1851],{"className":418,"code":1850,"language":260,"meta":67,"style":67},"\n\u003Ctemplate>\n  \u003Cva-input\n    v-model=\"filter\"\n    placeholder=\"Filter...\"\n  \u002F>\n  \u003Cdiv style=\"height: 300px; width: 100%;\">\n    \u003Cag-grid-vue\n      class=\"ag-theme-vuestic\"\n      style=\"width: 100%; height: 100%;\"\n      :columnDefs=\"columnDefs\"\n      :rowData=\"reactiveUsers\"\n      :isExternalFilterPresent=\"() => true\"\n      :doesExternalFilterPass=\"doesExternalFilterPass\"\n      @grid-ready=\"onGridReady\"\n      :modules=\"modules\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\n\n...\n\nconst filter = ref('')\nlet gridApi: any = null\n\nconst onGridReady = (params: any) => {\n  gridApi = params.api\n}\n\nwatch(() => filter.value, () => {\n  gridApi.onFilterChanged()\n})\n\nconst doesExternalFilterPass = ({ data: user }: {user: User}) => {\n  return JSON.stringify(user).includes(filter.value)\n}\n\n...\n",[135,1852,1853,1857,1865,1872,1886,1900,1905,1923,1929,1941,1953,1965,1977,1991,2005,2019,2031,2035,2043,2051,2055,2075,2079,2083,2087,2107,2125,2129,2152,2167,2171,2175,2202,2213,2220,2225,2265,2300,2305,2310],{"__ignoreMap":67},[138,1854,1855],{"class":140,"line":141},[138,1856,333],{"emptyLinePlaceholder":85},[138,1858,1859,1861,1863],{"class":140,"line":171},[138,1860,426],{"class":244},[138,1862,430],{"class":429},[138,1864,433],{"class":244},[138,1866,1867,1869],{"class":140,"line":182},[138,1868,438],{"class":244},[138,1870,1871],{"class":429},"va-input\n",[138,1873,1874,1877,1879,1881,1884],{"class":140,"line":192},[138,1875,1876],{"class":339},"    v-model",[138,1878,346],{"class":244},[138,1880,263],{"class":244},[138,1882,1883],{"class":148},"filter",[138,1885,478],{"class":244},[138,1887,1888,1891,1893,1895,1898],{"class":140,"line":330},[138,1889,1890],{"class":339},"    placeholder",[138,1892,346],{"class":244},[138,1894,263],{"class":244},[138,1896,1897],{"class":148},"Filter...",[138,1899,478],{"class":244},[138,1901,1902],{"class":140,"line":336},[138,1903,1904],{"class":244},"  \u002F>\n",[138,1906,1907,1909,1911,1913,1915,1917,1919,1921],{"class":140,"line":356},[138,1908,438],{"class":244},[138,1910,441],{"class":429},[138,1912,444],{"class":339},[138,1914,346],{"class":244},[138,1916,263],{"class":244},[138,1918,451],{"class":148},[138,1920,263],{"class":244},[138,1922,433],{"class":244},[138,1924,1925,1927],{"class":140,"line":361},[138,1926,460],{"class":244},[138,1928,463],{"class":429},[138,1930,1931,1933,1935,1937,1939],{"class":140,"line":385},[138,1932,468],{"class":339},[138,1934,346],{"class":244},[138,1936,263],{"class":244},[138,1938,475],{"class":148},[138,1940,478],{"class":244},[138,1942,1943,1945,1947,1949,1951],{"class":140,"line":390},[138,1944,483],{"class":339},[138,1946,346],{"class":244},[138,1948,263],{"class":244},[138,1950,490],{"class":148},[138,1952,478],{"class":244},[138,1954,1955,1957,1959,1961,1963],{"class":140,"line":551},[138,1956,497],{"class":339},[138,1958,346],{"class":244},[138,1960,263],{"class":244},[138,1962,504],{"class":148},[138,1964,478],{"class":244},[138,1966,1967,1969,1971,1973,1975],{"class":140,"line":561},[138,1968,511],{"class":339},[138,1970,346],{"class":244},[138,1972,263],{"class":244},[138,1974,518],{"class":148},[138,1976,478],{"class":244},[138,1978,1979,1982,1984,1986,1989],{"class":140,"line":566},[138,1980,1981],{"class":339},"      :isExternalFilterPresent",[138,1983,346],{"class":244},[138,1985,263],{"class":244},[138,1987,1988],{"class":148},"() => true",[138,1990,478],{"class":244},[138,1992,1993,1996,1998,2000,2003],{"class":140,"line":591},[138,1994,1995],{"class":339},"      :doesExternalFilterPass",[138,1997,346],{"class":244},[138,1999,263],{"class":244},[138,2001,2002],{"class":148},"doesExternalFilterPass",[138,2004,478],{"class":244},[138,2006,2007,2010,2012,2014,2017],{"class":140,"line":613},[138,2008,2009],{"class":339},"      @grid-ready",[138,2011,346],{"class":244},[138,2013,263],{"class":244},[138,2015,2016],{"class":148},"onGridReady",[138,2018,478],{"class":244},[138,2020,2021,2023,2025,2027,2029],{"class":140,"line":621},[138,2022,525],{"class":339},[138,2024,346],{"class":244},[138,2026,263],{"class":244},[138,2028,532],{"class":148},[138,2030,478],{"class":244},[138,2032,2033],{"class":140,"line":630},[138,2034,539],{"class":244},[138,2036,2037,2039,2041],{"class":140,"line":645},[138,2038,544],{"class":244},[138,2040,441],{"class":429},[138,2042,433],{"class":244},[138,2044,2045,2047,2049],{"class":140,"line":666},[138,2046,554],{"class":244},[138,2048,430],{"class":429},[138,2050,433],{"class":244},[138,2052,2053],{"class":140,"line":686},[138,2054,333],{"emptyLinePlaceholder":85},[138,2056,2057,2059,2061,2063,2065,2067,2069,2071,2073],{"class":140,"line":691},[138,2058,426],{"class":244},[138,2060,571],{"class":429},[138,2062,574],{"class":339},[138,2064,577],{"class":339},[138,2066,346],{"class":244},[138,2068,263],{"class":244},[138,2070,584],{"class":148},[138,2072,263],{"class":244},[138,2074,433],{"class":244},[138,2076,2077],{"class":140,"line":704},[138,2078,333],{"emptyLinePlaceholder":85},[138,2080,2081],{"class":140,"line":709},[138,2082,1031],{"class":244},[138,2084,2085],{"class":140,"line":724},[138,2086,333],{"emptyLinePlaceholder":85},[138,2088,2089,2091,2094,2096,2099,2101,2104],{"class":140,"line":729},[138,2090,340],{"class":339},[138,2092,2093],{"class":167}," filter ",[138,2095,346],{"class":244},[138,2097,2098],{"class":174}," ref",[138,2100,372],{"class":167},[138,2102,2103],{"class":244},"''",[138,2105,2106],{"class":167},")\n",[138,2108,2109,2112,2115,2117,2120,2122],{"class":140,"line":742},[138,2110,2111],{"class":339},"let",[138,2113,2114],{"class":167}," gridApi",[138,2116,751],{"class":244},[138,2118,2119],{"class":144}," any",[138,2121,852],{"class":244},[138,2123,2124],{"class":244}," null\n",[138,2126,2127],{"class":140,"line":764},[138,2128,333],{"emptyLinePlaceholder":85},[138,2130,2131,2133,2136,2138,2140,2142,2144,2146,2148,2150],{"class":140,"line":782},[138,2132,340],{"class":339},[138,2134,2135],{"class":167}," onGridReady ",[138,2137,346],{"class":244},[138,2139,1641],{"class":244},[138,2141,1175],{"class":1644},[138,2143,751],{"class":244},[138,2145,2119],{"class":144},[138,2147,409],{"class":244},[138,2149,1215],{"class":339},[138,2151,618],{"class":244},[138,2153,2154,2157,2159,2162,2164],{"class":140,"line":788},[138,2155,2156],{"class":167},"  gridApi",[138,2158,852],{"class":244},[138,2160,2161],{"class":167}," params",[138,2163,51],{"class":244},[138,2165,2166],{"class":167},"api\n",[138,2168,2169],{"class":140,"line":797},[138,2170,917],{"class":244},[138,2172,2173],{"class":140,"line":802},[138,2174,333],{"emptyLinePlaceholder":85},[138,2176,2177,2180,2182,2184,2186,2189,2191,2193,2195,2198,2200],{"class":140,"line":823},[138,2178,2179],{"class":174},"watch",[138,2181,372],{"class":167},[138,2183,1212],{"class":244},[138,2185,1215],{"class":339},[138,2187,2188],{"class":167}," filter",[138,2190,51],{"class":244},[138,2192,1182],{"class":167},[138,2194,1268],{"class":244},[138,2196,2197],{"class":244}," ()",[138,2199,1215],{"class":339},[138,2201,618],{"class":244},[138,2203,2204,2206,2208,2211],{"class":140,"line":829},[138,2205,2156],{"class":167},[138,2207,51],{"class":244},[138,2209,2210],{"class":174},"onFilterChanged",[138,2212,1192],{"class":429},[138,2214,2216,2218],{"class":140,"line":2215},34,[138,2217,633],{"class":244},[138,2219,2106],{"class":167},[138,2221,2223],{"class":140,"line":2222},35,[138,2224,333],{"emptyLinePlaceholder":85},[138,2226,2228,2230,2233,2235,2238,2241,2243,2246,2249,2251,2254,2256,2258,2261,2263],{"class":140,"line":2227},36,[138,2229,340],{"class":339},[138,2231,2232],{"class":167}," doesExternalFilterPass ",[138,2234,346],{"class":244},[138,2236,2237],{"class":244}," ({",[138,2239,2240],{"class":429}," data",[138,2242,751],{"class":244},[138,2244,2245],{"class":1644}," user",[138,2247,2248],{"class":244}," }:",[138,2250,245],{"class":244},[138,2252,2253],{"class":429},"user",[138,2255,751],{"class":244},[138,2257,849],{"class":144},[138,2259,2260],{"class":244},"})",[138,2262,1215],{"class":339},[138,2264,618],{"class":244},[138,2266,2268,2271,2274,2276,2279,2281,2283,2285,2287,2290,2292,2294,2296,2298],{"class":140,"line":2267},37,[138,2269,2270],{"class":240},"  return",[138,2272,2273],{"class":167}," JSON",[138,2275,51],{"class":244},[138,2277,2278],{"class":174},"stringify",[138,2280,372],{"class":429},[138,2282,2253],{"class":167},[138,2284,409],{"class":429},[138,2286,51],{"class":244},[138,2288,2289],{"class":174},"includes",[138,2291,372],{"class":429},[138,2293,1883],{"class":167},[138,2295,51],{"class":244},[138,2297,1182],{"class":167},[138,2299,2106],{"class":429},[138,2301,2303],{"class":140,"line":2302},38,[138,2304,917],{"class":244},[138,2306,2308],{"class":140,"line":2307},39,[138,2309,333],{"emptyLinePlaceholder":85},[138,2311,2313],{"class":140,"line":2312},40,[138,2314,1031],{"class":244},[12,2316,2317],{},[65,2318],{"alt":67,"src":2319},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f9e2ccd0c4a200c3.png",[124,2321,2323],{"id":2322},"add-create-edit-and-delete-functionality","Add create, edit and delete functionality",[129,2325,2327],{"className":418,"code":2326,"language":260,"meta":67,"style":67},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cva-button flat icon=\"edit\" @click=\"editUser(user)\" \u002F>\n    \u003Cva-button flat icon=\"close\" @click=\"removeUser(user)\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { VaButton } from 'vuestic-ui'\nimport { computed, reactive } from 'vue'\nimport { User } from '..\u002Fdata\u002Fusers'\n\nconst props = defineProps\u003C{params: {data: User, context: {\n  editUser: (user: User) => {},\n  removeUser: (user: User) => {},\n}}}>()\n\nconst { editUser, removeUser } = props.params.context\n\nconst user = computed(() => reactive(props.params.data))\n\u003C\u002Fscript>\n",[135,2328,2329,2337,2345,2381,2413,2421,2429,2433,2453,2472,2494,2512,2516,2549,2571,2592,2599,2603,2632,2636,2664],{"__ignoreMap":67},[138,2330,2331,2333,2335],{"class":140,"line":141},[138,2332,426],{"class":244},[138,2334,430],{"class":429},[138,2336,433],{"class":244},[138,2338,2339,2341,2343],{"class":140,"line":171},[138,2340,438],{"class":244},[138,2342,441],{"class":429},[138,2344,433],{"class":244},[138,2346,2347,2349,2352,2355,2358,2360,2362,2365,2367,2370,2372,2374,2377,2379],{"class":140,"line":182},[138,2348,460],{"class":244},[138,2350,2351],{"class":429},"va-button",[138,2353,2354],{"class":339}," flat",[138,2356,2357],{"class":339}," icon",[138,2359,346],{"class":244},[138,2361,263],{"class":244},[138,2363,2364],{"class":148},"edit",[138,2366,263],{"class":244},[138,2368,2369],{"class":339}," @click",[138,2371,346],{"class":244},[138,2373,263],{"class":244},[138,2375,2376],{"class":148},"editUser(user)",[138,2378,263],{"class":244},[138,2380,1083],{"class":244},[138,2382,2383,2385,2387,2389,2391,2393,2395,2398,2400,2402,2404,2406,2409,2411],{"class":140,"line":192},[138,2384,460],{"class":244},[138,2386,2351],{"class":429},[138,2388,2354],{"class":339},[138,2390,2357],{"class":339},[138,2392,346],{"class":244},[138,2394,263],{"class":244},[138,2396,2397],{"class":148},"close",[138,2399,263],{"class":244},[138,2401,2369],{"class":339},[138,2403,346],{"class":244},[138,2405,263],{"class":244},[138,2407,2408],{"class":148},"removeUser(user)",[138,2410,263],{"class":244},[138,2412,1083],{"class":244},[138,2414,2415,2417,2419],{"class":140,"line":330},[138,2416,544],{"class":244},[138,2418,441],{"class":429},[138,2420,433],{"class":244},[138,2422,2423,2425,2427],{"class":140,"line":336},[138,2424,554],{"class":244},[138,2426,430],{"class":429},[138,2428,433],{"class":244},[138,2430,2431],{"class":140,"line":356},[138,2432,333],{"emptyLinePlaceholder":85},[138,2434,2435,2437,2439,2441,2443,2445,2447,2449,2451],{"class":140,"line":361},[138,2436,426],{"class":244},[138,2438,571],{"class":429},[138,2440,574],{"class":339},[138,2442,577],{"class":339},[138,2444,346],{"class":244},[138,2446,263],{"class":244},[138,2448,584],{"class":148},[138,2450,263],{"class":244},[138,2452,433],{"class":244},[138,2454,2455,2457,2459,2462,2464,2466,2468,2470],{"class":140,"line":385},[138,2456,241],{"class":240},[138,2458,245],{"class":244},[138,2460,2461],{"class":167}," VaButton",[138,2463,251],{"class":244},[138,2465,254],{"class":240},[138,2467,319],{"class":244},[138,2469,303],{"class":148},[138,2471,610],{"class":244},[138,2473,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492],{"class":140,"line":390},[138,2475,241],{"class":240},[138,2477,245],{"class":244},[138,2479,1143],{"class":167},[138,2481,1268],{"class":244},[138,2483,673],{"class":167},[138,2485,251],{"class":244},[138,2487,254],{"class":240},[138,2489,319],{"class":244},[138,2491,260],{"class":148},[138,2493,610],{"class":244},[138,2495,2496,2498,2500,2502,2504,2506,2508,2510],{"class":140,"line":551},[138,2497,241],{"class":240},[138,2499,245],{"class":244},[138,2501,849],{"class":167},[138,2503,251],{"class":244},[138,2505,254],{"class":240},[138,2507,319],{"class":244},[138,2509,661],{"class":148},[138,2511,610],{"class":244},[138,2513,2514],{"class":140,"line":561},[138,2515,333],{"emptyLinePlaceholder":85},[138,2517,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542,2545,2547],{"class":140,"line":566},[138,2519,340],{"class":339},[138,2521,1164],{"class":167},[138,2523,346],{"class":244},[138,2525,1169],{"class":167},[138,2527,1172],{"class":244},[138,2529,1175],{"class":429},[138,2531,751],{"class":244},[138,2533,245],{"class":244},[138,2535,1476],{"class":429},[138,2537,751],{"class":244},[138,2539,849],{"class":167},[138,2541,1268],{"class":244},[138,2543,2544],{"class":429}," context",[138,2546,751],{"class":244},[138,2548,618],{"class":244},[138,2550,2551,2554,2556,2558,2560,2562,2564,2566,2568],{"class":140,"line":591},[138,2552,2553],{"class":174},"  editUser",[138,2555,751],{"class":244},[138,2557,1641],{"class":244},[138,2559,2253],{"class":1644},[138,2561,751],{"class":244},[138,2563,849],{"class":144},[138,2565,409],{"class":244},[138,2567,1215],{"class":339},[138,2569,2570],{"class":244}," {},\n",[138,2572,2573,2576,2578,2580,2582,2584,2586,2588,2590],{"class":140,"line":613},[138,2574,2575],{"class":174},"  removeUser",[138,2577,751],{"class":244},[138,2579,1641],{"class":244},[138,2581,2253],{"class":1644},[138,2583,751],{"class":244},[138,2585,849],{"class":144},[138,2587,409],{"class":244},[138,2589,1215],{"class":339},[138,2591,2570],{"class":244},[138,2593,2594,2597],{"class":140,"line":621},[138,2595,2596],{"class":244},"}}}>",[138,2598,1192],{"class":167},[138,2600,2601],{"class":140,"line":630},[138,2602,333],{"emptyLinePlaceholder":85},[138,2604,2605,2607,2609,2612,2614,2617,2619,2621,2623,2625,2627,2629],{"class":140,"line":645},[138,2606,340],{"class":339},[138,2608,245],{"class":244},[138,2610,2611],{"class":167}," editUser",[138,2613,1268],{"class":244},[138,2615,2616],{"class":167}," removeUser ",[138,2618,633],{"class":244},[138,2620,852],{"class":244},[138,2622,1218],{"class":167},[138,2624,51],{"class":244},[138,2626,1175],{"class":167},[138,2628,51],{"class":244},[138,2630,2631],{"class":167},"context\n",[138,2633,2634],{"class":140,"line":666},[138,2635,333],{"emptyLinePlaceholder":85},[138,2637,2638,2640,2642,2644,2646,2648,2650,2652,2654,2656,2658,2660,2662],{"class":140,"line":686},[138,2639,340],{"class":339},[138,2641,1500],{"class":167},[138,2643,346],{"class":244},[138,2645,1143],{"class":174},[138,2647,372],{"class":167},[138,2649,1212],{"class":244},[138,2651,1215],{"class":339},[138,2653,673],{"class":174},[138,2655,1515],{"class":167},[138,2657,51],{"class":244},[138,2659,1175],{"class":167},[138,2661,51],{"class":244},[138,2663,1524],{"class":167},[138,2665,2666,2668,2670],{"class":140,"line":691},[138,2667,554],{"class":244},[138,2669,571],{"class":429},[138,2671,433],{"class":244},[129,2673,2676],{"className":2674,"code":2675,"language":1682},[1680]," \u003Cva-button @click=\"createUser()\" icon=\"add\" text-color=\"white\" color=\"success\" \u002F>\n\n \u003Cva-modal\n  :model-value=\"!!selectedUser\"\n  ok-text=\"Save\"\n  cancel-text=\"Cancel\"\n  @cancel=\"selectedUser = null\"\n  @ok=\"saveUser()\"\n>\n  \u003Cva-input class=\"mb-3 d-block\" label=\"Image\" v-model=\"selectedUser.image\"\u002F>\n  \u003Cva-input class=\"mb-3 d-block\" label=\"Name\" v-model=\"selectedUser.name\"\u002F>\n  \u003Cva-input class=\"mb-3 d-block\" label=\"Email\" v-model=\"selectedUser.email\"\u002F>\n\u003C\u002Fva-modal>\n",[135,2677,2675],{"__ignoreMap":67},[129,2679,2681],{"className":231,"code":2680,"language":233,"meta":67,"style":67}," const editUser = (user: User) => {\n  selectedUser.value = { ...user }\n}\n\nconst removeUser = (userToRemove: User) => {\n  reactiveUsers.value = reactiveUsers.value.filter(user => user !== userToRemove)\n}\n\nconst createUser = () => {\n  selectedUser.value = {\n    id: Math.ceil(Math.random()*10000),\n    image: 'https:\u002F\u002Fpicsum.photos\u002Fid\u002F100\u002F50\u002F50',\n    name: '',\n    email: '',\n    active: true,\n  }\n}\n\nconst saveUser = () => {\n  const currentUser = selectedUser.value\n  selectedUser.value = null\n\n  if (!currentUser) {\n    return\n  }\n\n  const users = reactiveUsers.value\n  const existingUser = users.find(user => user.id === currentUser.id)\n\n  if (existingUser) {\n    reactiveUsers.value = reactiveUsers.value.map(user => existingUser === user ? currentUser : user)\n  } else {\n    reactiveUsers.value.push(currentUser)\n  }\n}\n\nconst agGridContext = {\n  editUser,\n  removeUser,\n}\n",[135,2682,2683,2706,2727,2731,2735,2758,2796,2800,2804,2819,2831,2867,2882,2892,2902,2912,2917,2921,2925,2940,2958,2970,2974,2993,2998,3002,3006,3020,3059,3063,3076,3122,3132,3151,3155,3159,3163,3174,3180,3186],{"__ignoreMap":67},[138,2684,2685,2687,2690,2692,2694,2696,2698,2700,2702,2704],{"class":140,"line":141},[138,2686,929],{"class":339},[138,2688,2689],{"class":167}," editUser ",[138,2691,346],{"class":244},[138,2693,1641],{"class":244},[138,2695,2253],{"class":1644},[138,2697,751],{"class":244},[138,2699,849],{"class":144},[138,2701,409],{"class":244},[138,2703,1215],{"class":339},[138,2705,618],{"class":244},[138,2707,2708,2711,2713,2715,2717,2719,2722,2724],{"class":140,"line":171},[138,2709,2710],{"class":167},"  selectedUser",[138,2712,51],{"class":244},[138,2714,1182],{"class":167},[138,2716,852],{"class":244},[138,2718,245],{"class":244},[138,2720,2721],{"class":244}," ...",[138,2723,2253],{"class":167},[138,2725,2726],{"class":244}," }\n",[138,2728,2729],{"class":140,"line":182},[138,2730,917],{"class":244},[138,2732,2733],{"class":140,"line":192},[138,2734,333],{"emptyLinePlaceholder":85},[138,2736,2737,2739,2741,2743,2745,2748,2750,2752,2754,2756],{"class":140,"line":330},[138,2738,340],{"class":339},[138,2740,2616],{"class":167},[138,2742,346],{"class":244},[138,2744,1641],{"class":244},[138,2746,2747],{"class":1644},"userToRemove",[138,2749,751],{"class":244},[138,2751,849],{"class":144},[138,2753,409],{"class":244},[138,2755,1215],{"class":339},[138,2757,618],{"class":244},[138,2759,2760,2763,2765,2767,2769,2772,2774,2776,2778,2780,2782,2784,2786,2788,2791,2794],{"class":140,"line":336},[138,2761,2762],{"class":167},"  reactiveUsers",[138,2764,51],{"class":244},[138,2766,1182],{"class":167},[138,2768,852],{"class":244},[138,2770,2771],{"class":167}," reactiveUsers",[138,2773,51],{"class":244},[138,2775,1182],{"class":167},[138,2777,51],{"class":244},[138,2779,1883],{"class":174},[138,2781,372],{"class":429},[138,2783,2253],{"class":1644},[138,2785,1215],{"class":339},[138,2787,2245],{"class":167},[138,2789,2790],{"class":244}," !==",[138,2792,2793],{"class":167}," userToRemove",[138,2795,2106],{"class":429},[138,2797,2798],{"class":140,"line":356},[138,2799,917],{"class":244},[138,2801,2802],{"class":140,"line":361},[138,2803,333],{"emptyLinePlaceholder":85},[138,2805,2806,2808,2811,2813,2815,2817],{"class":140,"line":385},[138,2807,340],{"class":339},[138,2809,2810],{"class":167}," createUser ",[138,2812,346],{"class":244},[138,2814,2197],{"class":244},[138,2816,1215],{"class":339},[138,2818,618],{"class":244},[138,2820,2821,2823,2825,2827,2829],{"class":140,"line":390},[138,2822,2710],{"class":167},[138,2824,51],{"class":244},[138,2826,1182],{"class":167},[138,2828,852],{"class":244},[138,2830,618],{"class":244},[138,2832,2833,2835,2837,2840,2842,2845,2847,2850,2852,2855,2857,2860,2863,2865],{"class":140,"line":551},[138,2834,952],{"class":429},[138,2836,751],{"class":244},[138,2838,2839],{"class":167}," Math",[138,2841,51],{"class":244},[138,2843,2844],{"class":174},"ceil",[138,2846,372],{"class":429},[138,2848,2849],{"class":167},"Math",[138,2851,51],{"class":244},[138,2853,2854],{"class":174},"random",[138,2856,1212],{"class":429},[138,2858,2859],{"class":244},"*",[138,2861,2862],{"class":957},"10000",[138,2864,409],{"class":429},[138,2866,627],{"class":244},[138,2868,2869,2871,2873,2875,2878,2880],{"class":140,"line":561},[138,2870,965],{"class":429},[138,2872,751],{"class":244},[138,2874,319],{"class":244},[138,2876,2877],{"class":148},"https:\u002F\u002Fpicsum.photos\u002Fid\u002F100\u002F50\u002F50",[138,2879,325],{"class":244},[138,2881,627],{"class":244},[138,2883,2884,2886,2888,2890],{"class":140,"line":566},[138,2885,981],{"class":429},[138,2887,751],{"class":244},[138,2889,1727],{"class":244},[138,2891,627],{"class":244},[138,2893,2894,2896,2898,2900],{"class":140,"line":591},[138,2895,997],{"class":429},[138,2897,751],{"class":244},[138,2899,1727],{"class":244},[138,2901,627],{"class":244},[138,2903,2904,2906,2908,2910],{"class":140,"line":613},[138,2905,1013],{"class":429},[138,2907,751],{"class":244},[138,2909,1019],{"class":1018},[138,2911,627],{"class":244},[138,2913,2914],{"class":140,"line":621},[138,2915,2916],{"class":244},"  }\n",[138,2918,2919],{"class":140,"line":630},[138,2920,917],{"class":244},[138,2922,2923],{"class":140,"line":645},[138,2924,333],{"emptyLinePlaceholder":85},[138,2926,2927,2929,2932,2934,2936,2938],{"class":140,"line":666},[138,2928,340],{"class":339},[138,2930,2931],{"class":167}," saveUser ",[138,2933,346],{"class":244},[138,2935,2197],{"class":244},[138,2937,1215],{"class":339},[138,2939,618],{"class":244},[138,2941,2942,2945,2948,2950,2953,2955],{"class":140,"line":686},[138,2943,2944],{"class":339},"  const",[138,2946,2947],{"class":167}," currentUser",[138,2949,852],{"class":244},[138,2951,2952],{"class":167}," selectedUser",[138,2954,51],{"class":244},[138,2956,2957],{"class":167},"value\n",[138,2959,2960,2962,2964,2966,2968],{"class":140,"line":691},[138,2961,2710],{"class":167},[138,2963,51],{"class":244},[138,2965,1182],{"class":167},[138,2967,852],{"class":244},[138,2969,2124],{"class":244},[138,2971,2972],{"class":140,"line":704},[138,2973,333],{"emptyLinePlaceholder":85},[138,2975,2976,2979,2981,2984,2987,2990],{"class":140,"line":709},[138,2977,2978],{"class":240},"  if",[138,2980,1641],{"class":429},[138,2982,2983],{"class":244},"!",[138,2985,2986],{"class":167},"currentUser",[138,2988,2989],{"class":429},") ",[138,2991,2992],{"class":244},"{\n",[138,2994,2995],{"class":140,"line":724},[138,2996,2997],{"class":240},"    return\n",[138,2999,3000],{"class":140,"line":729},[138,3001,2916],{"class":244},[138,3003,3004],{"class":140,"line":742},[138,3005,333],{"emptyLinePlaceholder":85},[138,3007,3008,3010,3012,3014,3016,3018],{"class":140,"line":764},[138,3009,2944],{"class":339},[138,3011,652],{"class":167},[138,3013,852],{"class":244},[138,3015,2771],{"class":167},[138,3017,51],{"class":244},[138,3019,2957],{"class":167},[138,3021,3022,3024,3027,3029,3031,3033,3036,3038,3040,3042,3044,3046,3048,3051,3053,3055,3057],{"class":140,"line":782},[138,3023,2944],{"class":339},[138,3025,3026],{"class":167}," existingUser",[138,3028,852],{"class":244},[138,3030,652],{"class":167},[138,3032,51],{"class":244},[138,3034,3035],{"class":174},"find",[138,3037,372],{"class":429},[138,3039,2253],{"class":1644},[138,3041,1215],{"class":339},[138,3043,2245],{"class":167},[138,3045,51],{"class":244},[138,3047,1671],{"class":167},[138,3049,3050],{"class":244}," ===",[138,3052,2947],{"class":167},[138,3054,51],{"class":244},[138,3056,1671],{"class":167},[138,3058,2106],{"class":429},[138,3060,3061],{"class":140,"line":788},[138,3062,333],{"emptyLinePlaceholder":85},[138,3064,3065,3067,3069,3072,3074],{"class":140,"line":797},[138,3066,2978],{"class":240},[138,3068,1641],{"class":429},[138,3070,3071],{"class":167},"existingUser",[138,3073,2989],{"class":429},[138,3075,2992],{"class":244},[138,3077,3078,3081,3083,3085,3087,3089,3091,3093,3095,3098,3100,3102,3104,3106,3108,3110,3113,3115,3118,3120],{"class":140,"line":802},[138,3079,3080],{"class":167},"    reactiveUsers",[138,3082,51],{"class":244},[138,3084,1182],{"class":167},[138,3086,852],{"class":244},[138,3088,2771],{"class":167},[138,3090,51],{"class":244},[138,3092,1182],{"class":167},[138,3094,51],{"class":244},[138,3096,3097],{"class":174},"map",[138,3099,372],{"class":429},[138,3101,2253],{"class":1644},[138,3103,1215],{"class":339},[138,3105,3026],{"class":167},[138,3107,3050],{"class":244},[138,3109,2245],{"class":167},[138,3111,3112],{"class":244}," ?",[138,3114,2947],{"class":167},[138,3116,3117],{"class":244}," :",[138,3119,2245],{"class":167},[138,3121,2106],{"class":429},[138,3123,3124,3127,3130],{"class":140,"line":823},[138,3125,3126],{"class":244},"  }",[138,3128,3129],{"class":240}," else",[138,3131,618],{"class":244},[138,3133,3134,3136,3138,3140,3142,3145,3147,3149],{"class":140,"line":829},[138,3135,3080],{"class":167},[138,3137,51],{"class":244},[138,3139,1182],{"class":167},[138,3141,51],{"class":244},[138,3143,3144],{"class":174},"push",[138,3146,372],{"class":429},[138,3148,2986],{"class":167},[138,3150,2106],{"class":429},[138,3152,3153],{"class":140,"line":2215},[138,3154,2916],{"class":244},[138,3156,3157],{"class":140,"line":2222},[138,3158,917],{"class":244},[138,3160,3161],{"class":140,"line":2227},[138,3162,333],{"emptyLinePlaceholder":85},[138,3164,3165,3167,3170,3172],{"class":140,"line":2267},[138,3166,340],{"class":339},[138,3168,3169],{"class":167}," agGridContext ",[138,3171,346],{"class":244},[138,3173,618],{"class":244},[138,3175,3176,3178],{"class":140,"line":2302},[138,3177,2553],{"class":167},[138,3179,627],{"class":244},[138,3181,3182,3184],{"class":140,"line":2307},[138,3183,2575],{"class":167},[138,3185,627],{"class":244},[138,3187,3188],{"class":140,"line":2312},[138,3189,917],{"class":244},[129,3191,3194],{"className":3192,"code":3193,"language":1682},[1680],"\u003Cag-grid-vue\n   ...\n   :context=\"agGridContext\"\n\u002F>\n",[135,3195,3193],{"__ignoreMap":67},[12,3197,3198],{},[65,3199],{"alt":67,"src":3200},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f9f48410be1e0023.png",[12,3202,3203],{},[65,3204],{"alt":67,"src":3205},"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002F6343f9ff2ecfad1c2db8.png",[124,3207,3209],{"id":3208},"conclusion","Conclusion",[3211,3212],"blog-button",{"label":3213,"to":3214},"Talk to an engineer","https:\u002F\u002Fcalendar.app.google\u002FXwRzASZitZRSVLxq6",[807,3216,3217],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":67,"searchDepth":182,"depth":182,"links":3219},[3220,3221,3222,3223,3224,3225,3226],{"id":126,"depth":171,"text":127},{"id":414,"depth":171,"text":415},{"id":1301,"depth":171,"text":1302},{"id":1687,"depth":171,"text":1688},{"id":1846,"depth":171,"text":1847},{"id":2322,"depth":171,"text":2323},{"id":3208,"depth":171,"text":3209},"2022-02-24","Learn how to integrate AG Grid with Vuestic UI for powerful Vue 3 datatables. Follow our step-by-step tutorial to build feature-rich CRUD tables, implement sorting, filtering, and customization. Explore the best Vue.js open-source tools with Epicmax!","md",false,"\u002Fimages\u002Fblog\u002Fvuestic-ui-with-ag-grid\u002Fcard.jpg",{},"\u002Fblog\u002Fvuestic-ui-with-ag-grid",{"title":5,"description":3228},"blog\u002Fvuestic-ui-with-ag-grid","r5Lw3lV8yycbfaV4wfe_uXpcg9wbgyI0Wm2KmKasTl8",1784559993475]