[SOLVED] What is the optimal way to structure a dynamic grid component?

What is the optimal way to structure a dynamic grid component?

I am building an angular app that the majority of the data is displayed in grid view. I want to build a reusable dynamic grid component that takes a config json object and build a new instance of it based on the config data.

For example:

If I want to implement two new grids (Users Grid and Report Grid) where each grid has different rows and cols. And both of them use the dynamicGrid component.

My question: for performance wise, is it better to store the config data of the grids in the database or hardcode them in a .ts file as objects?

something like that:

export const gridUserConfig:TableBasicConfig = {
colsLength: 7,
rowsLength: 100,
pagination: true,
rowsPerPage: [5, 10, 15, 50, 100, 200],
defaultRowsPerPage: 10,
style: {
  tableSizeClass: 'p-datatable-sm',
  gridLinesClass: 'p-datatable-gridlines',
  striped: 'p-datatable-striped'
},
header: {
  displayHeader: true,
  title: {
    displayTitle: true,
    text: 'User Grid'
  },
  caption: {
    displayCaption: true
  }
},
footer: {
  displayFooter: false
},
rawData: this.getUsers()

}

TheTableBasicConfig is an interface where the structure and keys of the response are specified.

Solution

In this case it is good to store the data on the frontend side only as we are saving standard configurations for the different type of Grids.

It is always good not to make unwanted API calls and here by putting the configurations on the frontend side, we can save the network request and can serve our frontend faster to better user experience.

But, let consider that there is a case where we want to have the user specific configuration for each Grid then in this case it is always good to store the Grids configuration into database so that user can customise accordingly and we can save it into our database for future references.

Please feel free to comment in case you want to discuss more on this.

Thanks.