JSFiddle - React, Tailwind, and code Playground

CSS

table{
	border-collapse: collapse;
}

td{
	width:28px;
	height: 28px;
	background-color: white;
	border: 1px solid;
	cursor: pointer;
}

.active td, .active{
	background-color:black;
}

table.active td.active{
	background-color: white;
	
}

JavaScript

var table = document.createElement("table");
var tbody = document.createElement('tbody');
table.appendChild(tbody);
for(var i = 0; i<5; i++){
	tbody.innerHTML+="<tr><td></td><td></td><td></td></tr>";
}
var button = document.createElement("button");
button.innerHTML = "отметить все";
document.body.appendChild(table);
document.body.appendChild(button);

button.onclick = function(){
	table.classList.toggle('active');
}

table.onclick = function(event){
	if(event.target.tagName=="TD"){
		event.target.classList.toggle("active");
	}
};