I am trying to change the background color or text color of a row after it is clicked using MUI DataTables. Does anyone know how I could go about doing this? I tried playing around with onRowClick but I can not figure out a way to update the color of a specific row. Thank you so much!
export default function CoursesTable() {
const columns = [
{
name: "dept",
label: "Dept",
options: {
filter: false,
sort: false,
}
},
{
name: "number",
label: "ID",
options: {
filter: false,
sort: true,
}
},
{
name: "title",
label: "Name",
options: {
filter: false,
sort: false,
}
},
{
name: "prereqs",
label: "Prerequisites",
options: {
filter: false,
sort: false,
display: false,
}
},
{
name: "description",
label: "Description",
options: {
filter: false,
sort: false,
display: false,
}
}
];
const data = courses;
var arr: string[] = [];
const handleRowClick = (rowData, rowMeta) => {
const courseID = rowData[0] + ' ' + rowData[1];
if (arr.includes(courseID)){
const index = arr.indexOf(courseID);
arr.splice(index, 1);
}
else if (arr.length >= 7) {
alert('You can not have more than 7 courses in your cart!')
}
else {
arr.push(courseID);
}
};
return (
<div>
<MUIDataTable
title = {"Course List"}
data = {data}
columns = {columns}
options={{
selectableRowsHideCheckboxes: true,
caseSensitive: false,
download: false,
onRowClick: handleRowClick
}}
/>
<Cart arr = {arr}/>
</div>
)
}
Please let me know if you need any further clarifications of what I am trying to do!