ag-Grid - The Best JavaScript Grid in the World!

[Music] let me show you why AG grid is becoming the de facto data grid so let's go to the AG grid comm website and I'm going to go full screen I'll click on the demo page here we have an Ag grid example that pretty fully featured you don't need to have all of these features here in your application everything that you see here can be turned off so you can get a simplistic grid to your users but here we want to showcase so a lot of the things are turned on so first of all grid basics we can do some sorting sort but one column sort by two columns sort T opposite direction turn sort off we can move columns around by dragging them around además we can move groups of columns around by dragging at the group level and some columns are inside groups where we hit the exponent button to see them and then contract to hide them again let's look at filtering up here we've got the quick filter for pen and Tony that'll search in the first column for Tony Oracle put in a second Lloyds to filter across two columns here and filtering Tony and chess I've also got filter out to column level yurikano up the column filter for a country thumbpick different countries here again you can see the smoothness of the operations as rows are coming in and out the other rows are scrolling into position we'd like to give an excel talked field to the grid one thing would like is a range selection here as I select a range you'll notice two values in the bottom Ryder Cup dating a lot of the time people will export data from your application just to bring it into Excel so they can do a range selection like this if you can do this inside your app people will stay inside your application and stuff going to Excel I can also do ctrl C to copy and ctrl V to paste old grid is fully editable the grid is really highly performance to show that let's put in 100,000 rows so the grid now has 100,000 rows in it and you'll see that the scrolling is extremely smooth I can even grab to scroll humble here and bring it all the way down to the bottom and it just goes up and down and no problems at all sorting and filtering are just as smooth as well so 100,000 rows no problem to AG grid whatsoever the grid cells are fully themed above that of the box it comes at a few different themes here I can see the dark theme the material theme or I can turn the themes off completely so the user can add its own CSS okay so you could ask what's the use of having a data grader with 100,000 rows in it the answer is it's not very useful because nobody's going to look to have 300,000 droves so what do you do that's where a grouping and aggregation come in so with the columns I can drag them around as we saw but what I'm going to do now is bring this country column over to the group drop zone and let go and here you can see that the grid has grouped all of these rows inside the browser each of these numbers in brackets here indicate how many roads are inside this group so inside France there's 20,000 898 rows I can expand a group to see these rows I can group by as many columns as I like let's go ahead and group by language bring it before country because countries fall in two languages I can also group by game name and lastly I'll group by a bot the grouping again is to murder browser almost instantly here over four levels now it would be great to get some values appear let's do some aggregations for these aggregations you're going to use the monthly breakdown columns so that brings us over to the left-hand side I picked these columns because there's nice numbers here to do aggregations with to get the aggregations up at the group level we bring the monkey breakdown down to the value section and let go voila and they're the greatest group stores one hundred thousand records on the fly inside the browser the group values appear are kept up to date as updates happen so if I'm to change the data down here you'll see the values flashing and updating in the group levels rather than to those values I never to show you pivoting so I'm going to clear down all of the grouping I'm now going to click on privet mode into the mode you must bring the date again you want to group pivot and aggregate by just like an Excel pivot table so let's pivot by language to getting started it is net created columns and what used to be rows so English French German etc used to be values in different rows that have been represented by columns pivoting only makes sense when there is an aggregation presence it's let's drag Dan John into the values the grid is now aggregated to January figures pivoted by language just with row grouping we can pivot by as many columns as we like it's let's bring country up and drop it after language so here in at pivoting in two dimensions for example we can see here that French is a column group and below it it has tree countries Belgium France and Luxembourg all that speak French and we can mix row grouping but pivoting so let's bring game name over it and drop it to the row group section and bring bought over and dropped out into the real group section also so here we can see two row groups on the left hand side the pivots along by the top and all of the aggregation values in the center now if you view sort of data grids you'll realize that this just is not possible and any other JavaScript data grid you will get some pivot grids that just do pivoting and nothing else but what a G grid you get the pivot aggregate group sort filter range select absolutely everything is together in one grid all the features work alongside each other okay let's get out of pivot mode and let me show you charting let's select arrange right-click go to chart pick a chart type and click the grid has generated a chart on the fly let me point something out this example has got zero charting code in it all of the charting is done by the grid it comes out of the box there's no code needed by the developer to integrate the charting with the grid an application using HG grid can get this chart and capability but a developer just adding one attribute to the grid which is enable charts the churchmen comes practical analogy only changed a range here you can see the charting is updating on the fly the axis here showing numbers because they'll until the category picked let me pick a category but going into the chart properties here I can see categories and I'll pick a country so it picks the country of column or it could pick game length the game names look a bit squashed in here so let's go into the format let's go into axis let's go down to the x-axis and change it slightly cool there's lots of different things you can change with the properties here we can change the position of the legend row we can give it a title but then the chart types there is a lot of different chart types to pick from bars pies doughnuts scatters areas etc and then for all the different chart types we've got the different palettes to change the colors the charts a PNG so we can right click and choose copy image to put it into an email or we can just download and it downloads the chart locally ok let's lows down the chart let's go into pivot mode and let's bring up the pivot chart pivot charts build up as you add stuff to the grid so let's bring some data over let's bring language in country and bring down to values you can see the charges building up on the fly if we expand one of these to say English you can see the chart alters and let's do the same for French that's pretty cool and we can also pivot so this integration of the charts and the grid if I could be a small bit modest it's kind of pretty awesome it's cool okay let's talk about frame rates a small bit you can see here that this grits customized the country column has some customization in the cells where the cell is showing the country flag in the country name likewise to rating does let showing text either that's showing some stars that's done at cell components you can provide a component in any framework that you like an Ag grid will put it into the cell for you so for country we've configured this with a component for displaying country flags and country names again this could be an angular component to react component and view component at every framework you want to use we will allow you to customize the grid using that framework to see all the different areas of the grid you can customize go to the documentation go to components and here we can see where hem doors editors date components filter components header components etc etc as well as customizing the grid the grid itself would be exposed as a component and a framework of your choice the grid has zero dependencies so if you're using the vanilla version of AG grid the grid will not pull any third-party dependencies into your application however if you want to use angular or react we will provide a component for that framework for AG grid so we have an angular component for AG grade a react component for AG grid etc etc and for each of those if you go to a getting started page you will see a step-by-step guide and had to use AG grid inside that framework now last leaders tumour features I want to show you to working on the demo page the first one is streaming data the best place to see that is to go back to our main home page and there's a real kick-ass example down here live streaming updates what we see here is a grid with 10,000 rows those rows are aggregated by the grid across these three columns product portfolio and book as well as having the 10,000 rows there are one it hasn't updates per second coming into the grid the grid is aggregating all the data as the updates are coming in keeping all of the group levels up today while all of this processing is happening the grid is still very very functional very interactive it does not slow down so if you're working fine on its new think you need to use a canvas base grade to get this type of performance well you're wrong and then further down we see similar example but it's also got a chart it's updating with the updates as well and then lastly a grid can hold as much data as you can fit in the browser which is about 100,000 records what if you want to start looking at millions or billions and records what happens then that's exactly what our services are growing on this for let me show you let me take off the grouping to get started here we've got a flat dataset with about 8,000 records but you'll notice to scroll doesn't go down as 8,000 money goes down is 100 because the browser I got the grid is only pulled back to first 100 records as I scroll down to the bottom you'll notice it it brings back more watch the last row down here as I scroll down again you can see a loading icon' appearance under brings back more rooms this is what's called infinite scroll it's a common feature other great toughness we take it a step further we allow grouping and pivoting on aggregation let me show you let's go back to the top that's grabbed country on a snag grouping by country this grouping is happening on the server side and the server is sending back the top-level grows when I expand a group for example I'm going to expand United States now then the children are lazy loaded from the server and that's before if the data is bigger than 100 rows for example United States does have more than 100 children when I scroll down to the bottom it will AZ know the next block I can group by as many columns as I likes let's bring Kathleen up here and they can also pivots let's turn on pivot mode I'm bring year over Judah to the drop zone Wow so with this technique AG grid can work on massive amounts of data and give the user experience to the user as if the data is loaded inside our browser so this is an eye on your application to almost act like a powerful bi tool with very large data sets that's pretty pretty cool but remember all of this is optional if all you want is a simple little grid but about five columns and customized a solid angular or react you can use AG grid for that as well maybe simple users off you're a producer simple features and then you can have more complex features for the more advanced users okay lastly pressing age grid is two flavors age agree community and age of your at enterprise community is absolutely free MIT license in never need to even tell us that you're using it in each agreed enterprise starts at about one thousand two hundred dollars per developer that comes more features and comes with support to see the features that are available Pony and enterprise go to our documentation and look for this key symbol here those features are available only in age if you're done surprise the others are free and open source well I hope you found this useful if not at least you got to laugh at my funny little Irish accent take her

Channel: ag-Grid

Views: 53,171

Keywords: javascript datagrid, reactjs datagrid, angularjs datagrid, vue datagrid, ag-grid, ag grid

Id: 29ja0liMuv4

Length: 12min 44sec (764 seconds)

Published: Thu Aug 29 2019