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

Hey, In this tutorial we will see how to do sorting, searching in huge data sets using agGid in Angular This is a 1 way sorting, this 1 is both ascending and descending order sorting. We can see that it starts with A on ascending and W on descending order Also we will implement filter or search, like in Country field we can type JA and it will show only those countries which has JA in its name. Similarly we can use starts with, ends with and we can see the appropriate results. And at the end we will see how to do pagination for huge data sets So we have created a project using ng new agGrd and opened it in visual studio code Next we will install ag-grid and ag-grid-angular In the mean time Lets run the serve. And inside src - app - app.module.ts lets import aGGridModule from ag-grid-angular/main Add it in imports using AgGridModule.withComponent which takes an array of custom components. This withComponent is used to specify custom cell color or buttons on particular cell. Since we will checkout this in our later tutorials. So for now we will leave it blank We will edit app.module.html and add ag-grid-angular Here we define what height and width of the grid should be and define theme using class name. If left blank It takes default theme. I will go with ag-theme-balham And in angular-cli json we will add these two style sheets else grid will not be displayed properly In the component.ts layer we will add - private gridApi, then private gridColumnApi private columnDefs which will render the column headers and types and then sortingOrders In the constructor we will initialize the columnDefs with a array It is basically an array of column definitions. So headerName is the name that will be displayed, field name should be same as that of data set key name. We will use firstName to differentiate it width is how much pixels the column must have by default and in sortingOrder we can pass an array. So 1st it will sort in ascending manner and on second click it will sort in descending order Similarly I will add another column of header Age field name as age, and width as 50. I wont use sortingOrder so that it can pick default sorting In app component html we will bind gridReady to onGridReady function and pass the event So onGridReady we will assign event.api to this.apiGrid and params.columnApi to this.gridColumnApi We will have a dummy data which is an array of json object of firstName gourab and age 22. SO this keys should match the field name and on params.api.setRowData we will pass the dataValue Lets start the server. And in app.component.html we will use pass our columnDef to agGrid columnDef and enableSorting as true Something went wrong, we started the server before saving the angular-cli.json so It didn't picked the css files Lets re run it and now we can see it is working fine. But the age is showing as ... because the width is too less to display. We will add another dataValue Paul of age 24 and increase the width of age to 150 Now it looks great Lets change this dataSet to something more realistic. So we will use a rest api call to fetch the data. For this we require http. In constructor let us initialize httpClient and make a get call to this url. Something is not correct. OK import from angular/common/http Lets see whats there in that url. So we can see its a huge data set of players name and his age , country and how many gold silver or bronze medal he won and on what games. So we will populate these values in this grid for sorting and searching. Once the value is retrieved we will assign data to rowData We need to add HttpClientModule in our app.module.ts and import it Lets change our columnDef acording to our dataSet Hearder name athletes field athletes age and field also age. Lets change it sorting order to 1st descending and then ascending For country we will have only one way sorting and for years we will have ascending order only And then we will add how many medals he won- gold , silver , bronze and total And default sorting we will keep 1st descending then ascending and reset Saved The grid looks lovely So in athletes it 1st sorts in ascending order then descending order and in age its 1st sorts in descending then ascending but for both the cases it doesn't reset because we have not passed null in sorting But for country it sorts to descending order and then gets reset to default order Lets put filter and search. It very easy. In ag grid angular we need to pass enableFilter true So we can use filter like athlete contains Ryan or should not contain Ryan Starts with Ryan. And we can use multiple filters like starts with Ryan of Age 27. If conditions are not matched it shows blank grid. And when we clear all filter it automatically populates all the values Lets put pagination. For this we will add pagination equals true and animateRow will give a nice look and feel And we will pass our sortingOrder as default sortingOrder SO it automatically got paginated with 100 rows per page and navigates to next page without any hiccups and even to last page as well And this jump user experience is due to animateRow -set to true That's all this tutorials. In our next tutorials we will see how to put custom buttons or icons in column cell and on click get particular cell and row data and dynamically drag to change column width If you like this video then hit the thumbs up icon. Subscribe to the channel Code space and get notified by hitting the bell icon for upcoming tutorials and live sessions on cloud technology, nodejs and much more For queries comment below. Thanks for watching

Channel: CodeSpace

Views: 57,928

Keywords: agGrid, agGrid with angular, sorting, searching, filters, pagination, pagination in angular, sorting in angular, searching in angular, data table in angular, yt:cc=on, codeSpace, table, table pagination, paginate_links, pagination in php, pagination in wordpress

Id: iGGaUQFMA08

Length: 15min 35sec (935 seconds)

Published: Tue May 08 2018