Question about web page DevExpress and Blazor

[MMock]

First of all, I don't know if I'm in the right forum so feel free to move this if you are a moderator and secondly I have a very specific question because I code 95% of the time in windows desktop applications and I can't speak about what I'm doing "generally", I will explain in terms of my modules and what the overall goal is.

Our desktop winforms application has a new form that I'm also developing to run on the web. It is just a grid of data, very simple. The complexity (and fun) is because it has dynamic columns. Employees here work on projects and the grid displays those projects and who is doing what. For example, we have project roles: Assigned PA (PA), Review Technical Lead (Tech Rev), System Technician (ST) etc. There are currently 18 roles. I don't want to have to code them all statically. Because next week we might decide there are two more roles. So I want to be able to do something like SELECT * FROM xtblProjectRoles, get all the roles that exist right now and build the grid with a column for each, and the employee who is fulfilling that role will have his empID in the row for the project. The problem I am having is with my class, ProjectListModel. It's code as below with names "colRole" and the control # in of that role in the database table. Is there some dynamic way I can define this class so I'm not locked into knowing how many possible roles there are? That is, how I can make it work when next week we have colRole18 and colRole19? Here is file ProjectListModel.cs.

    {
       public string? ProjectName { get; set; }
        public string? ProjectStatus { get; set; }
        public string? ProjectLevelOfEffort { get; set; }
        public string? ProjectType { get; set; }
        public string? ProjectTeam { get; set; }
        public string? CTS { get; set; }
        public string? colRole1 { get; set; }
        public string? colRole2 { get; set; }
        public string? colRole3 { get; set; }
        public string? colRole4 { get; set; }
        public string? colRole6 { get; set; }
        public string? colRole7 { get; set; }
        public string? colRole8 { get; set; }
        public string? colRole9 { get; set; }
        public string? colRole12 { get; set; }
        public string? colRole13 { get; set; }
        public string? colRole14 { get; set; }
        public string? colRole15 { get; set; }
        public string? colRole16 { get; set; }
        public string? colRole17 { get; set; }
        public string? colRole18 { get; set; }
        public string? PrevailingWage { get; set; }
    }

Here is Index.razor. I started to work on the dynamic columns but had an error until I defined them all in the class above.


I hope this makes sense. If I'm not explaining it well and you care, please ask questions and I'll say more. I didn't want to get overly complicated to start. Thank you.