AG Grid Column Header Configuration Tips

so in this video i'm going to give you six tips for working with ag grid column headers and to start we're going to do this in code i'm just going to use the example on the website in the documentation so javascript data grid getting started i'll open this in plunker so that we can start editing this example now the code we want is in main.js and you can immediately see tip one tip one is that if we want to have a header we can add the header name in our column definitions so let's just change this to make info and we'll see that our grid shows the make info as the column header but you already knew that so let's move on to tip two now tip two is we don't actually have to add the header name a g grid will create a header name for us and you can see that it's taken the name of the field which is make and capitalize the first letter for us now tip three is if the field name is camel cased then ag grid will do its best to render that on the grid itself and instead of the camel case is capitalize the first letter of each part and put a space in the middle so it's trying to make this a human readable nicely formatted name now tip four is we can make this much more dynamic we can use functions in here to create our column headers so if i put in a function that is using the header value getter it's given a params which has access to the api the column definition there's a whole bunch of information in there that's explained in our documentation and then we can make very dynamic column headers so here i've taken make and i've added in the field name itself this is very dynamic using the data that's in the grid now if i want to write a function tip 5 is that i could use an expression instead let me change this to use an expression and we'll see the column definition field and now we're showing the field name in there raw without a g grid amending it so tip six is that this is all documented in our documentation in various places and as you go through the documentation you'll see that we can even create header components and take full control over the rendering of the grid so there are no limitations to what you can do in this header so six tips for working with edgy grid column headers and to discover more visit a g dash grid dot com you

Channel: ag-Grid

Views: 182

Keywords: ag-grid, javascript data grid, react data grid, angular data grid, vue data grid, ag grid, javascript datagrid, column headers, grid column headers, dynamic column headers, ag-grid column headers

Id: oZaXyAmnLpM

Length: 2min 55sec (175 seconds)

Published: Fri Nov 19 2021