Change React MUI DataTable Row Color onRowClick()

Viewed 18

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!

0 Answers
Related