```dataviewjs
const rows = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const columns = [" ", "Habit 1 😀👍", "Habit 2 🥩🥕", "Habit 3 🏢👨‍💼", "Habit 4 🗣🎉", "Habit 5 ✍🖥", "Habit 6 🏋️‍♀🚲", "Habit 7 🧽🧹"];

// Create table element
const table = document.createElement("table");
table.className = 'habit-table';
// Create and append header row
const headerRow = document.createElement("tr");
headerRow.className = "habit-header";
columns.forEach(column => {
    const header = document.createElement("th");
    header.textContent = column;
    headerRow.appendChild(header);
});
table.appendChild(headerRow);

// Gets everything between the 2 frontmatter delimiters, but has to be in the format [Word]: [comma separated list of numbers]
// This isnt general code at all, just for my specific use case.
function processLines(input) {
    const result = [];
    let tempArray = [];
    let delimiterCount = 0;

    for (const element of input) {
        if (element === '---') {
            delimiterCount++;
            if (delimiterCount === 2) {
                break;
            }
        } else if (delimiterCount === 1 && element.includes(':')) {
            const dataParts = element.split(': ')[1];
			if (dataParts) {
				const data = dataParts.split(',').map(Number);
				tempArray.push(data);
            }
        }
    }

    if (tempArray.length > 0) {
        result.push(tempArray);
    }

    return result.length > 0 ? result[0] : [];
}


// Gets the frontmatter value at position row, col
async function getValue(row, col)
{
	let fileContent = await dv.io.load(dv.current().file.path.toString());
	let lines = processLines(fileContent.split('\n'));
	return lines[row][col]
}

// Flips the frontmatter value at position row, col. Basically the logic to edit the habit value
async function flipValue(row, col)
{
	let fileContent = await dv.io.load(dv.current().file.path.toString());
	let file = fileContent.split("\n");
	let lines = processLines(file);
	lines[row][col] = lines[row][col] === 0 ? 1 : 0;
	for(i=0; i<rows.length; i++)
	{
		file[i+1] = rows[i] + ": " + lines[i].join(",");
	}

	let newString = file.join('\n');
	app.vault.adapter.write(dv.current().file.path.toString(), newString)

}

// Creates the button with HTML. Buttons have id ending -[row]-[col] so i can find which button was pressed easily in the onclick method
async function createButton(rowIndex, colIndex) {
    const button = document.createElement("button");
    button.id = `button-habit-${rowIndex}-${colIndex}`;

    // Await the getValue call here
    button.textContent = await getValue(rowIndex, colIndex) === 1 ? "🟢" : "🔴";
	button.style = '';
    button.onclick = async (event) => {
        const parts = event.target.id.split('-');
        const row = parseInt(parts[2], 10);
        const col = parseInt(parts[3], 10);
        await flipValue(row, col);
        button.textContent = button.textContent === "🟢" ? "🔴" : "🟢";
    };

    return button;
}

// Create and append data rows
rows.forEach((_, rowIndex) => {
    const rowElement = document.createElement("tr");
    const day = document.createElement("td");
    day.textContent = _;
    day.className = "habit-day"
    rowElement.appendChild(day);
    columns.forEach(async (_, colIndex) => {
	    if( _ != " "){
	        const cell = document.createElement("td");
	        const button = await createButton(rowIndex, colIndex-1);
	        cell.appendChild(button);
	        rowElement.appendChild(cell);
        }
    });
    table.appendChild(rowElement);
});


let calloutTitle = dv.paragraph(`> [!habits|Habits]\n> \n`);
let content = calloutTitle.querySelector("div:last-child");

const calloutContent = document.createElement("div");
calloutContent.className = "callout-content";
calloutContent.appendChild(table);
content.appendChild(calloutContent);
```