I recently experimented with the material-table library to perform basic CRUD operations. Utilizing onRowAdd, onRowUpdate, and onRowDelete, I was able to incorporate icons for each function. However, I am interested in changing the color of these icons. Can anyone provide guidance on how to achieve this?
In my table, there are specific icons – add, edit, delete – that I would like to customize with different colors.
For reference, here is the link to my codesandbox.
App.js file content:
import React, { useState } from 'react';
import './App.css';
import MaterialTable from 'material-table'
const empList = [
{ id: 1, name: "Neeraj", email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90fef5f5e2f1fad0f7fdf1f9fcbef3fffd">[email protected]</a>', phone: 9876543210, city: "Bangalore" },
{ id: 2, name: "Raj", email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5624373c16331b373f3a78353d39">[email protected]</a>', phone: 9812345678, city: "Chennai" },
{ id: 3, name: "David", email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f69297809f92c5c2c4b697989f9ad895999b">[email protected]</a>', phone: 7896536289, city: "Jaipur" },
{ id: 4, name: "Vikas", email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ff9e6e4eefcb8bacfe8e2eee6e3a1ece0e2">[email protected]</a>', phone: 9087654321, city: "Hyderabad" },
]
function App() {
const [data, setData] = useState(empList)
const columns = [
{ title: "ID", field: "id", editable: false },
{ title: "Name", field: "name" },
{ title: "Email", field: "email" },
{ title: "Phone Number", field: 'phone', },
{ title: "City", field: "city", }
]
return (
<div className="App">
<h1 align="center">React-App</h1>
<h4 align='center'>Material Table with CRUD operation</h4>
<MaterialTable
title="Employee Data"
data={data}
columns={columns}
editable={{
onRowAdd: (newRow) => new Promise((resolve, reject) => {
const updatedRows = [...data, { id: Math.floor(Math.random() * 100), ...newRow }]
setTimeout(() => {
setData(updatedRows)
resolve()
}, 2000)
}),
onRowDelete: selectedRow => new Promise((resolve, reject) => {
const index = selectedRow.tableData.id;
const updatedRows = [...data]
updatedRows.splice(index, 1)
setTimeout(() => {
setData(updatedRows)
resolve()
}, 2000)
}),
onRowUpdate:(updatedRow,oldRow)=>new Promise((resolve,reject)=>{
const index=oldRow.tableData.id;
const updatedRows=[...data]
updatedRows[index]=updatedRow
setTimeout(() => {
setData(updatedRows)
resolve()
}, 2000)
})
}}
options={{
actionsColumnIndex: -1, addRowPosition: "first"
}}
/>
</div>
);
}
export default App;