Estoy terminando mi primer proyecto, pero el cliente quiere que agregue etiquetas cuando se desplazan sobre ciertas celdas de la cuadrícula de datos.

Sin embargo, no puedo encontrar ninguna respuesta en Google sobre cómo agregar una información sobre herramientas de Material ui en el nombre del encabezado.

Que alguien me ayude por favor.

Aquí está mi código. Solo dejaré algunos encabezados en la columna ya que todos son bastante similares.

 const columns = [ { field: 'memberId', headerClassName: 'super-app-theme--header', headerAlign: 'center', headerName: 'Member ID', sortable: true, width: 200 }, { field: 'materialId', headerClassName: 'super-app-theme--header', headerName: 'Material ID', headerAlign: 'center', sortable: true, width: 200, editable: true, }, ]; const newMembers = [] for(let index in members) { newMembers.push(members[index]) } const displayApiData = () => { const loading = [{ id: 'Calculating...', memberId: 'Calculating...', materialId: 'Calculating...', sectionId: 'Calculating...', lm: 'Calculating...', lx: 'Calculating...', kx: 'Calculating...', ly: 'Calculating...', ky: 'Calculating...', llt: 'Calculating...', cbx: 'Calculating...', cby: 'Calculating...', lsc: 'Calculating...', lst: 'Calculating...', }] if (newMembers === null) { return loading } else { console.log("The new new members === ", JSON.stringify(newMembers)); let id = 0 const newOptions = newMembers.map((data) => ({ id: id++, memberId: data.memberId, materialId: data.materialId, sectionId: data.sectionId, lm: data.totalLengthOfMember, lx: data.yAxisUnbracedLength, kx: data.yAxisEffectiveLengthFactor, ly: data.zAxisUnbracedLength, ky: data.zAxisEffectiveLengthFactor, llt: data.LLT, cbx: data.unbracedLengthLateralTorsional, cby: data.lateralTorsionalModificationFactor, lsc: data.slendernessRatioInCompression, lst: data.LST, })) return ( newOptions ) } }