I would like to find a solution that would allow me to use the map function to extract properties based on an array of properties. Ideally I would like a general solution so that I do not have to hard code the map function for each variation.

My use case: I am building an admin dashboard that will need to display 20+ tables - each with a different combination of columns. Using VueJS I have a table component to render the table but currently each table has the exact same columns being shown.

// every table shows these 4 columns
this.rows = this.menu.MenuItem.map(r => ({
   Id: r.Id,
   Name: r.Name,
   Description: r.Description,
   Category: r.Category
}))

Instead of the same columns for each table, I would like each table to be able to define which columns it would like to display. The same table component is used for each table, so I need a general solution to avoid writing a massive if-else block.

const MenuColumnMapping = [
    { menu: "Menu 1", columns: ["Id", "Name", "Description"] },
    { menu: "Menu 2", columns: ["Id", "Name", "Description", "Category" ] },
    { menu: "Menu 3", columns: ["Id", "Name", "Description", "Price", "Condition" ] },
    ...
]

How could I rewrite the map function to select the properties based on the array of columns for a given menu?

let cols = MenuColumnMapping
              .filter((m) => m.menu === this.menu.Name)
              .map((m) => m.columns)

// ex. cols = [ "Id", "Name", "Description", "Category" ]
this.rows = this.menu.MenuItem.map(r => ({
   
   // How can I select only the properties listed in cols

}))