agGrid + angular: Pagination, Sorting, Searching and filters [data table] 

Excellent tutorial. Very complete, clear and concise. Very good job. It helped me a lot. Thanks

Very well explained video and gives a good understanding of how to start using ag-grid

mock json url -> raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinnersSmall.json

you saved my day thanks a lot

Nice tutorial. Is the AG Grid responsive for mobile devices?

Excellent video.. Looking forward for more video in ag grid angular

Is it server side pagination ? I mean if load 1Lac data what will be happen? I want to load data as per paging request

Hello Sir this is a Server side pagination ? If yes then we can required to change our API code ?

I want dynamic async context menus, which make api call and return menus. This is possible in ag grid for angular??

Question: can we convert the simple html table to ag-grid for example: i have a table like and i want to use it as it is inside this table tag so is it possible??

Hi...this AngularGrid is paid right? den how can we use it??? I thought of doing column resizing and all but it is paid....how to achieve it? pls guide me

Thanks for the tutorial. Is there any way to set the page count? I don't want to fetch all the data at once. Thanks

Nice tutorial, Thanks. Is there any way to change labels in paginationPanel?

Thank you so much,awesome !!

Thank a lot.. btw, can it be used with millions of records ?

Why the columns are not auto fitted on the tables width? I really want to achieve that

How do we make a dynamic columnDef . In your demo, you are hard coding the headerNames etc . Is it possible to dynamically change the columnDefs as the data we receive ? . Hope you understood my question :)

Hello!! I am getting a error Cant bind to 'enablesorting' since it isnt a known property of ag-grid-angular

Great tutorial, Thank you

Any solution for white space between pinned and unpinned columns when resize

I have taken the excel file as input and converted to json but how to access it using ag grid

Excellent video.I have one doubt ?How to call excel data instead of API

@codeSpace.. in my project i want to get ag grid table dynamically ..like my requirement is ..if the user is assigned to 2 clients then 2 intsances of ag grid table should come on the page..if 3 clients then 3 instances of ag grid tables,can u please tell as this is achieved by html table ,but whether the same can be done by ag grid too ???

Are these server-side operations?

Sir errors giving like ag-grid-angular is not known element what to do sir

Rowindex is not updating when sorting data please reply how to solve this ?

getting error in console as rowData.map is not a function?

Hey, I am new to javascript and protractor, I want to test and verify filter and sorting functionality using protractor, but i cant find row data, column data maybe i dont know how to find it on grid, i didnt find any documentation on that please help me

i am getting error like columndefs is private and can be accessible by only Appcomponent

bro i have one doubt..Installing packages...npm WARN deprecated request@2.88.2: request has been deprecated, see github.com/request/request/issues/3142...may i know what i should do..

How to connect to ag-grid mongodb? I couldn't find information on this, can you help me?

can you just help me out how can i take the user input in ag grid

Hey. I have installed the ag-grid and ag-grid angular module. Still I’m getting this error Cannot find module ‘ag-grid-angular/main’

thanks man!

Can you post video on server side pagination?

Nice 👍

how to add search icon at each row in ag grid?

Topic: Full stack javascript - Data Pagination and Filtering Good day, If I may humbly ask a little help, any hints, comments and suggestions are very much welcome, thank you in advance for all your help, please see question below, how do I code this?: /* Create the `showPage` function This function will create and insert/append the elements needed to display a "page" of nine students */ /* Create the `addPagination` function This function will create and insert/append the elements needed for the pagination buttons */ // Call functions

how can I do this when records are grouped by a column, the groups are sorted according to the values of this column in ag-grid?

For production deployment, does it require any license?

can i set page 1,2,3 on pagination?

How about filtering and sorting direct to the server?

Can u share the JSON data URL....in my pc the data not found...it's urgent please

Hi Sir, Are these features available for free or licensed fetaures?

nice

I did followed exactly what you did, but when browser reloads, the data are not loading. It only showed the "Loading" prompt. Need help...

How to expand the row in case a cell has two-three lines of text

how to add validations to the cells (mandatory columns)

hello dear, can we show horizontal ag grid table?

Sir I want learn complete angular step by step by your tutorial.whare is the complete tutorial.

HI Code Space he way of the ur teaching is excellent i subscribed channel also.I need a small help in this example how we can provide the GLOBAL filter to grid not column level filter can u please help me with this.

also what control are u using to terminat ethe batch job at 7:22

hi i followed the same procedure but the grid shows as loading....

Hi code space..can I make such kind of requirement like..entering id data in textbox and fetching only that data in grid related to the I'd I entered in the textbox

Will this work in angular 7

Where can I find that css style sheet which u have imported in angular.json file

Where is next tutorial video u mention

Can you show, custom select with (value + id) in cell dropdown please

Hello This is great. However I am developing an web application with AngularJS. Can you assist me with using AgGrid in AngularJS.

how can i filter a key which nested from parent object

What is the onGridReady()

hi code space..i am getting error code "ERROR in src/app/app.component.html:4:20 - error TS2341: Property 'columnDefs' is private and only accessible within class 'AppComponent'

Cannot read property 'api' of undefined bro I'm Getting the above error while running

Great, where is the second part with server side features like slice and dice, pagination, pivot, infinite scrolling 😊 ?

hi sir, i want to clone this project ,please provide the link..i will do it in practical way..

How to call sever side method on sorting

Music is disturbing.

hello, do you know how i can limit a big decimal number to only 2 values ? ex: 19.22234 to 19.22

Guau!

Share code

can you share code?

never talks about pagination

Add Comment Submit Cancel import { Component, ViewChild, ElementRef } from '@angular/core'; import { AgGridAngular } from 'ag-grid-angular'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'] }) export class YourComponent { gridApi: any; defaultColDef: any; columns: any[] = []; @ViewChild('commentModal') commentModal!: ElementRef; // Reference to the modal constructor(private gridService: GridService) { this.defaultColDef = { // Define your default column properties here // ... }; } onGridReady(params: any) { this.gridApi = params.api; this.gridService.initialize(); } onFirstDataRendered(event: any) { const commentCol = this.gridApi.getColumnDef('Comment'); // Replace 'Comment' with the actual column name if (commentCol) { commentCol.cellClassRules = { 'cell-comment': () => true }; commentCol.cellRenderer = this.commentCellRenderer; this.gridApi.refreshCells(); } } commentCellRenderer(params: any) { const cellElement = document.createElement('div'); cellElement.classList.add('cell-comment'); cellElement.innerHTML = params.value || ''; cellElement.addEventListener('click', () => { this.openCommentModal(params); }); return cellElement; } openCommentModal(params: any) { const modalRef = new bootstrap.Modal(this.commentModal.nativeElement); // Initialize the modal modalRef.show(); modalRef._element?.addEventListener('hidden.bs.modal', () => { const comment = modalRef._element?.querySelector('input').value; // Handle the comment submission console.log(comment); }); } } Your Angular App