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

1. 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

1. 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!!!

GitHub - ntnraj14/ag-grid-simple-column-chooser

Thanks for Reading. Please give a clap if you liked the content.

Follow if you want more content like this.