function setup() {
createCanvas(500, 300);
textSize(16);
matchQueryInput =
createInput();
matchQueryInput.position(30, 40);
getColBtn =
createButton("Get the matching row");
getColBtn.position(30, 70);
getColBtn.mouseClicked(getMatchedResults);
// Create the table
table = new p5.Table();
// Add two columns
table.addColumn("name");
table.addColumn("id");
// Add some rows to the table
let newRow = table.addRow();
newRow.setString("name", "mary");
newRow.setString("id", 21);
newRow = table.addRow();
newRow.setString("name", "marco6");
newRow.setString("id", 27);
newRow = table.addRow();
newRow.setString("name", "tunisia 4");
newRow.setString("id", 32);
newRow = table.addRow();
newRow.setString("name", "user 23");
newRow.setString("id", 32);
newRow = table.addRow();
newRow.setString("name", "admin");
newRow.setString("id", 45);
newRow = table.addRow();
newRow.setString("name", "mikasa");
newRow.setString("id", 23);
showTable();
}
function getMatchedResults() {
clear();
let matchQuery =
matchQueryInput.value();
if (matchQuery != "") {
// Match the query in the column of 'name'
matchResults =
table.matchRows(new RegExp(matchQuery),
'name');
if (matchResults.length > 0) {
text("The rows that matches the " +
"query is", 20, 120);
for (let i = 0; i < matchResults.length; i++) {
// Display the matched value
text(matchResults[i].arr[0], 20, 140 + i * 20);
text(matchResults[i].arr[1], 120, 140 + i * 20);
}
}
else text("No Results Found", 20, 120);
} else {
text("The query string is empty", 20, 120);
}
text("Enter a string to match it in " +
"the 'name' column table", 20, 20);
}
function showTable() {
clear();
// Display the total rows present in the table
text("There are " + table.getRowCount() +
" rows in the table", 20, 120);
for (let r = 0; r < table.getRowCount(); r++)
for (let c = 0; c < table.getColumnCount(); c++)
text(table.getString(r, c),
20 + c * 100, 140 + r * 20);
text("Enter a string to match it in " +
"the 'name' column table", 20, 20);
}