What is best practice to dynamically CRUD columns in igx-grid

[KaushikEDS]

I have a use case where user can manually add which columns he wants in the grid.
I want the best possible solution with state management (using Ngrx) where all interactions with grid are as smooth as possible.
The dynamic columns can have filters, sorting, grouping, summaries, etc.

Also the type of columns will be different, so want the best way to apply formatting. For example if column shows price of a Stock it should have $ sign with it.

User can save the grid and on refresh the same grid should be visible.
https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/state-persistence
I'm thinking that will be able to help.

I would like an example or links to the code snippets/documentation if possible.

[RivaIvanova]

Hello,

I have been looking into your questions and here are some directions regarding the different points:

I have a use case where user can manually add which columns he wants in the grid.

I am not quite sure what you mean by "manually add which columns he wants in the grid", however, if you require showing/hiding some columns, I believe that you will find our Column Hiding feature topic here quite helpful on the matter. Additionally, you could also set the IgxColumn’s hidden property in order to hide/show it.

I want the best possible solution with state management (using Ngrx) where all interactions with grid are as smooth as possible.

The NgRx framework is not directly related to the Ignite UI for Angular components and as such it could be considered beyond our scope. I will suggest referring to the official NgRx documentation here where you could further investigate the requirements and setup.

The dynamic columns can have filters, sorting, grouping, summaries, etc.

In order to define the IgxColumn, you could achieve this by defining the columns collection in the markup as mentioned in our Defining columns section here. Additionally, if these columns are dynamic, you could define them by adding the <igx-column> tag in the template and using *ngFor="let col of columns in order to add as many columns as you want in the IgxGrid.

For example:

component.html

<igx-grid #grid [data]="data" [height]="'600px'" [allowFiltering]="true" [filterMode]="'quickFilter'">
  <igx-column
    *ngFor="let c of columns"
    [sortable]="true"
    [filterable]="true"
    [field]="c.field"
    [header]="c.header"
    [dataType]="c.dataType"
    [pinned]="c.pinned"
    [filterable]="c.filterable"
    [sortable]="c.sortable"
    [groupable]="c.groupable"
    [hasSummary]="c.hasSummary"
    [cellTemplate]="c.cellTemplate"
  >
  </igx-column>
</igx-grid>

component.ts

this.columns = [
  {
    field: 'ID',
    header: 'ID',
    width: '100px',
    dataType: 'number',
    pinned: true,
    filterable: true,
    sortable: true,
    groupable: false,
    hasSummary: true,
  },
  ...
];

Here could be found a small sample demonstrating my suggestion.

Also the type of columns will be different, so want the best way to apply formatting. For example if column shows price of a Stock it should have $ sign with it.

I would suggest checking out our Grid Column Types topic here as it provides detailed information along with code snippets and a sample demonstrating how to enable a data type-specific template.

User can save the grid and on refresh the same grid should be visible.
https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/state-persistence
I'm thinking that will be able to help.

Yes, the IgxGridState directive is the correct feature to use in order to save and restore the IgxGrid state with many supported features such as Sorting, Filtering, Advanced Filtering, Paging, Cell Selection, Row Selection, Column Selection, Row Pinning, Expansion, GroupBy, Columns.

Here could be found a sample demonstrating how the state persistence could be configured.

I hope the provided resources help you achieve your requirements.