Develop a specialized data structure for rows in ag grid that can adapt to changes

Question

Develop a specialized data structure for rows in ag grid that can adapt to changes

I have been working on creating an independent component using ag-grid. The column definitions are passed to this component from my application as input properties, defined like this:

interface ColumnDef {
  field: string;
  headerName: string;
}

@Input() colDef: ColumnDef[];

Currently, I am able to pass different sets of columns from the host application to the common component with unique IDs.

However, now I have a new requirement where I need to dynamically define the row data type for ag-grid inside the common component as well.

For example, if I pass column definitions like:

[{field: 'colA', headerName: 'Col A'},
{field: 'colB', headerName: 'Col B'}]

The component should generate a row data type dynamically as follows:

interface rowData {
 colA: string;
 colB: string;
}

Similarly, if I pass more columns like:

[{field: 'colA', headerName: 'Col A'},
{field: 'colB', headerName: 'Col B'},
{field: 'colC', headerName: 'Col C'}]

The row data type should be created accordingly:

interface rowData {
 colA: string;
 colB: string;
 colC: string;
}

This dynamic definition would allow me to use the interface for typing the row data effectively. Is there a way to achieve this functionality?

Thank you for your assistance.

angular typescript ag-grid typescript-generics ag-grid-angular

Answer 1

Answer №1

If we consider an array structured like this:

const columnDefinitions = [
{field: 'colA', headerName: 'Col A'},
{field: 'colB', headerName: 'Col B'},
{field: 'colC', headerName: 'Col C'}
] as const;

We can define the following types:

type FieldNames<T> = T extends ReadonlyArray<{ field: infer U }> ? U : never;

type Rows<T> = FieldNames<T> extends string ? Record<FieldNames<T>, string> : never;

Resulting in the outputs:

```
FieldNames<typeof columnDefinitions>
```
is 'colA' | 'colB' | 'colC'

Rows<typeof columnDefinitions>

is

{ colA: string; colB: string; colC: string }

.

However, if your current ColumnDef type is used, typeof columnDefinitions will be ColumnDef, making

FieldNames<typeof columnDefinitions>

result in Record<string, string>, which is not very useful. To resolve this issue, introducing a type parameter to the component class is necessary:

class CustomGridComponent<T extends ColumnDef> implements OnInit /* or what have you */ { 
    @Input() columnDefinitions: ReadonlyArray<T> = [] as const;
    ... 
}

(It is worth noting that using ReadonlyArray allows for automatic generation of types for column definitions by appending as const at the end of the array. If manually defining an interface like

ABCColDef { field: 'colA' | 'colB' | 'colC'; ... }

is preferred, then omitting ReadonlyArray is acceptable.)

Answer 2

If we consider an array structured like this:

const columnDefinitions = [
{field: 'colA', headerName: 'Col A'},
{field: 'colB', headerName: 'Col B'},
{field: 'colC', headerName: 'Col C'}
] as const;

We can define the following types:

type FieldNames<T> = T extends ReadonlyArray<{ field: infer U }> ? U : never;

type Rows<T> = FieldNames<T> extends string ? Record<FieldNames<T>, string> : never;

Resulting in the outputs:

```
FieldNames<typeof columnDefinitions>
```
is 'colA' | 'colB' | 'colC'

Rows<typeof columnDefinitions>

is

{ colA: string; colB: string; colC: string }

.

However, if your current ColumnDef type is used, typeof columnDefinitions will be ColumnDef, making

FieldNames<typeof columnDefinitions>

result in Record<string, string>, which is not very useful. To resolve this issue, introducing a type parameter to the component class is necessary:

class CustomGridComponent<T extends ColumnDef> implements OnInit /* or what have you */ { 
    @Input() columnDefinitions: ReadonlyArray<T> = [] as const;
    ... 
}

(It is worth noting that using ReadonlyArray allows for automatic generation of types for column definitions by appending as const at the end of the array. If manually defining an interface like

ABCColDef { field: 'colA' | 'colB' | 'colC'; ... }

is preferred, then omitting ReadonlyArray is acceptable.)

Develop a specialized data structure for rows in ag grid that can adapt to changes

Answer №1

Similar questions

Ag-Grid: A Guide to Storing and Restoring Columns with Filter Settings

How can I restart an asynchronous observable when the parameter changes?

Angular: The type AbstractControl<any> cannot be assigned to type FormControl

No data found in the subrow of the datasource after the filter has been

The tab title will be invisible if it is located within the second Angular component

Guide on setting up p-menubar in PrimeNG to expand in the opposite direction, from left to right, for the responsive

Encountering error "An import path cannot end with a '.ts' extension." when importing TypeScript file in Vue Single File Component (SFC) within VS Code

Transforming Angular 4's folder structure for improved architecture simplicity

Using Node-Forge for importing in an Angular 2 service

Unshifting values in a JavaScript array only if they exist in another array

Encountering an issue with Next.js, Typescript, and mongoose when attempting to use `let cached = global.mongoose

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?

Issue: Oops! The digital envelope routines are not supported in Angular while attempting to run the project

Troubleshooting: The canvas texture in Phaser 3's Update() function is not functioning

Choose does not showcase the updated value

What is the correct way to access and assign a value from a different getter or setter? I am facing an issue with the creation of my second array

Angular developers are struggling to find a suitable alternative for the deprecated "enter" function in the drag and drop CDK with versions 10 and above

Changing the ngModel value causes the maxlength to become ineffective

implementing a function to execute after making a successful $http.get request

Tips for storing the returned value from an HTTP request in a variable in Angular 8