Hi @Wei_Chen, thanks for posting your question here after OH.
Here is an example on how to make this work:
I created this array to represent the output of your query:
const classes = [
{
1: "08/26/2024",
2: "08/27/2024",
3: "08/28/2024",
4: "08/29/2024",
5: "08/30/2024",
6: "09/01/2024",
7: "09/02/2024",
8: "09/03/2024",
9: "09/04/2024",
10: "09/05/2024",
11: "09/06/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Beginner Chess",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "09/07/2024",
2: "09/08/2024",
3: "09/09/2024",
4: "09/10/2024",
5: "09/11/2024",
6: "09/12/2024",
7: "09/13/2024",
8: "09/14/2024",
9: "09/15/2024",
10: "09/16/2024",
11: "09/17/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Intermediate Chess",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "09/18/2024",
2: "09/19/2024",
3: "09/20/2024",
4: "09/21/2024",
5: "09/22/2024",
6: "09/23/2024",
7: "09/24/2024",
8: "09/25/2024",
9: "09/26/2024",
10: "09/27/2024",
11: "09/28/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Advanced Chess",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "09/29/2024",
2: "09/30/2024",
3: "10/01/2024",
4: "10/02/2024",
5: "10/03/2024",
6: "10/04/2024",
7: "10/05/2024",
8: "10/06/2024",
9: "10/07/2024",
10: "10/08/2024",
11: "10/09/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Chess Tournament Prep",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "10/10/2024",
2: "10/11/2024",
3: "10/12/2024",
4: "10/13/2024",
5: "10/14/2024",
6: "10/15/2024",
7: "10/16/2024",
8: "10/17/2024",
9: "10/18/2024",
10: "10/19/2024",
11: "10/20/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Chess Mastery",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "10/21/2024",
2: "10/22/2024",
3: "10/23/2024",
4: "10/24/2024",
5: "10/25/2024",
6: "10/26/2024",
7: "10/27/2024",
8: "10/28/2024",
9: "10/29/2024",
10: "10/30/2024",
11: "10/31/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Chess Strategy",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "11/01/2024",
2: "11/02/2024",
3: "11/03/2024",
4: "11/04/2024",
5: "11/05/2024",
6: "11/06/2024",
7: "11/07/2024",
8: "11/08/2024",
9: "11/09/2024",
10: "11/10/2024",
11: "11/11/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Chess Tactics",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "11/12/2024",
2: "11/13/2024",
3: "11/14/2024",
4: "11/15/2024",
5: "11/16/2024",
6: "11/17/2024",
7: "11/18/2024",
8: "11/19/2024",
9: "11/20/2024",
10: "11/21/2024",
11: "11/22/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Chess Openings",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "11/23/2024",
2: "11/24/2024",
3: "11/25/2024",
4: "11/26/2024",
5: "11/27/2024",
6: "11/28/2024",
7: "11/29/2024",
8: "11/30/2024",
9: "12/01/2024",
10: "12/02/2024",
11: "12/03/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Chess Endgames",
max_enrollment: 12,
min_enrollment: 6
},
{
1: "12/04/2024",
2: "12/05/2024",
3: "12/06/2024",
4: "12/07/2024",
5: "12/08/2024",
6: "12/09/2024",
7: "12/10/2024",
8: "12/11/2024",
9: "12/12/2024",
10: "12/13/2024",
11: "12/14/2024",
class_count: 20,
max_grade: "G6",
min_grade: "Kinder",
name: "Chess Analysis",
max_enrollment: 12,
min_enrollment: 6
}
];
return classes;
Here is the Transformer I created to nest all these dates inside a dates
key, with the value of an array with the dates in each object:
Here is the code for you to adapt to your columns:
const classes = {{query1.data}}
function nestDatesToArray(arr) {
return arr.map(obj => {
// Create a new array for dates
const dates = [];
// Loop through the object and collect numerical keys
for (const key in obj) {
if (!isNaN(key)) {
dates.push(obj[key]); // Add the date strings to the 'dates' array
}
}
// Create a new object with the 'dates' array and keep the rest of the properties intact
const { class_count, max_grade, min_grade, name, max_enrollment, min_enrollment } = obj;
return {
dates,
class_count,
max_grade,
min_grade,
name,
max_enrollment,
min_enrollment
};
});
}
// Example usage with the provided array 'classes'
const nestedClasses = nestDatesToArray(classes);
return nestedClasses
Now for the table settings, set the 'Data source' to the Transformer and make the dates column editable so the user can update the selection. Then click on 'Option list':
Under Options, keep the same transformer as the 'Data source,' and update the 'Value' to {{ item.dates[i] }}
, where item.dates
is a reference to the dates
keys from the data source (a two dimensional array with all the values of dates
), and i
is the current index.
Here is the result:
