How To Create Simple Column Chooser In AG Grid Using Angular Framework
AG Grid offers a Columns Chooser Panel positioned to the grid’s right side by default. I believe it occupies a considerable amount of space, requiring users to horizontally scroll to view columns, which detracts from the overall user experience.
Create Data Table And Configure Tailwind Css
- Install ag-grid
npm i ag-grid-angular
2. Configure tailwind (perform 2, 3, 4 only if you want to use tailwind otherwise you can write your own css)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
3. Add below in tailwind.config.js
4. Include below styles in styles.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Import AgGridAngular module in app.module.ts
6. Add ag grid component in app.component.html
7. Create row data and column defs in app.component.ts
Above 3 steps create a basic data table
Table Title and Column Chooser Icon Along With Events
- Add below code in app.component.html for table title and column chooser icon
2. To access ag-grid in app.component.ts I have created myGrid viewchild. I created hostlistener so that if column chooser is open and user clicks outside it will be closed. Initially column chooser will be hidden so I am setting hideTableColumnChooser property to true.
3. changevisibility method handles the user click and hide/show the column chooser. checkedStateChanged method hide/show the column on check/uncheck of checkbox.
Full code can be found here!!!
Thanks for Reading. Please give a clap if you liked the content.
Follow if you want more content like this.