I need a method that creates a Quasar Table column definition dynamically. The method below works, however, I believe that using a for loop in place of the long switch statement is a better solution.
How do I write a for loop that produces the same result as the following:
const createTableColumns = (numberOfColumns: number) => {
const tableCols: QTableProps["columns"] = [];
const numberOfColumnsStr = numberOfColumns.toString();
switch (numberOfColumnsStr) {
case "15":
tableCols.push({
name: "15",
align: "center",
label: "15",
field: (row) => row.fifteen.value,
format: (val, row) =>
row.fifteen.isSlected ? `** ${val} **` : `${val}`,
sortable: false,
});
case "14":
tableCols.push({
name: "14",
align: "center",
label: "14",
field: (row) => row.fourteen.value,
format: (val, row) =>
row.fourteen.isSlected ? `** ${val} **` : `${val}`,
sortable: false,
});
case "13":
tableCols.push({
name: "13",
align: "center",
label: "13",
field: (row) => row.thirteen.value,
format: (val, row) =>
row.thirteen.isSlected ? `** ${val} **` : `${val}`,
sortable: false,
});
case "12":
tableCols.push({
name: "12",
align: "center",
label: "12",
field: (row) => row.twelve.value,
format: (val, row) =>
row.twelve.isSlected ? `** ${val} **` : `${val}`,
sortable: false,
});
case "11":
tableCols.push({
name: "11",
align: "center",
label: "11",
field: (row) => row.eleven.value,
format: (val, row) =>
row.eleven.isSlected ? `** ${val} **` : `${val}`,
sortable: false,
});
case "10":
tableCols.push({
name: "10",
align: "center",
label: "10",
field: (row) => row.ten.value,
format: (val, row) => (row.ten.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "9":
tableCols.push({
name: "9",
align: "center",
label: "9",
field: (row) => row.nine.value,
format: (val, row) => (row.nine.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "8":
tableCols.push({
name: "8",
align: "center",
label: "8",
field: (row) => row.eight.value,
format: (val, row) => (row.eight.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "7":
tableCols.push({
name: "7",
align: "center",
label: "7",
field: (row) => row.seven.value,
format: (val, row) => (row.seven.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "6":
tableCols.push({
name: "6",
align: "center",
label: "6",
field: (row) => row.six.value,
format: (val, row) => (row.six.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "5":
tableCols.push({
name: "5",
align: "center",
label: "5",
field: (row) => row.five.value,
format: (val, row) => (row.five.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "4":
tableCols.push({
name: "4",
align: "center",
label: "4",
field: (row) => row.four.value,
format: (val, row) => (row.four.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "3":
tableCols.push({
name: "3",
align: "center",
label: "3",
field: (row) => row.three.value,
format: (val, row) => (row.three.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "2":
tableCols.push({
name: "2",
align: "center",
label: "2",
field: (row) => row.two.value,
format: (val, row) => (row.two.isSlected ? `** ${val} **` : `${val}`),
sortable: false,
});
case "1":
tableCols.push({
name: "1",
align: "center",
label: "1",
field: (row) => row.name,
format: (val, row) => `${val}`,
sortable: false,
});
break;
default:
console.error(`Game: createTableColumns DEFAULT!!!`);
}
tableCols.sort((a, b) => parseInt(a.name) - parseInt(b.name));
return tableCols;
};
I’ve tried this:
const tableCols2: QTableProps["columns"] = [];
for (let colIndex = 0; colIndex < numberOfColumns; colIndex++) {
const rowKeyArray = [
"NotUsed",
"one",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
"nine",
"ten",
"eleven",
"twelve",
"thirteen",
"fourteen",
"fifteen",
];
const colNumber: number = colIndex + 1;
const rowKey: string = rowKeyArray[colIndex];
const myObj = {
name: colNumber.toString(),
align: "center",
label: colNumber.toString(),
field: (row) => row[rowKey].value,
format: (val, row) => (row[rowKey].isSlected ? `** ${val} **` : `${val}`),
sortable: false,
};
tableCols2.push(myObj);
}