Hi everyone, I’d like to talk to you about what I’m trying to do. In short, I created an HTML table using React by dividing the Table.js into itself with two components such as:
StaffColumns.js
StaffData.js
Inside these two we have functions with passed props that is:
StaffData.js
//utentiLista it's my list of objects inside an Array called "utentiLista"
const StaffDati = ({utentiLista}) => {
const styleText = {
backgroundColor: '#1F2A37',
textAlign: 'left',
padding:'10px 10px 10px 10px',
color: 'var(--primary-text)',
paddingLeft: '10px',
borderTop: '1px solid #343E4E',
borderBottom: '1px solid #343E4E',
}
const getStatusStyle = (status) => {
switch (status) {
case 'Completed':
return ({ color: 'lightgreen',
src: check
});
case 'Pending':
return { color: 'yellow',
src: hour
};
case 'In progress':
return { color: '#A992F6',
src: cloud
};
default:
return {};
}
};
return (
<tbody style={{width:'100%'}}>
{//! la lista utenti viene passata come props a Tabella e poi fatto un mapping proprio come in Sidebar.js
utentiLista.map((utente, index) => (
<tr key={utente.id} style={{width:'100%'}}>
<td style={{...styleText, borderLeft: index === -1 ? 'none' : '1px solid #343E4E'}}>{utente.id}</td>
<td style={styleText}>{utente.username}</td>
<td style={styleText}>{utente.data}</td>
<td style={styleText}>{utente.amount}€</td>
<td style={{...styleText, borderRight: index === utentiLista.length ? 'none' : '1px solid #343E4E' }}>
<div style={{color: getStatusStyle(utente.status).color,
width: 'fit-content',
padding:'5px',
border:`1px solid ${getStatusStyle(utente.status).color}`,
borderRadius: '10px',
fontSize: '10px',
backgroundColor: '#374151',
display: 'flex',
flexDirection: 'row',
flexWrap: 'no-wrap',
alignContent: 'center',
gap: '5px'}}>
<img src={getStatusStyle(utente.status).src} alt="" />
{utente.status}
</div>
</td>
</tr>
))}
</tbody>
)
}
export default StaffDati;
My StaffColumns instead have this code:
import React, {useState, useTransition } from "react"
const ColoneStaff = ({utentiLista, setUtentiLista}) => {
const styleTr = {
backgroundColor: '#374151',
color: 'var(--primary-text)',
textAlign: 'left',
}
const styleTh = {
backgroundColor: '#374151',
color: 'var(--primary-text)',
textAlign: 'left',
padding: '20px 0px 20px 10px',
cursor: 'pointer',
};
const [staffColumns, setStaffColumns] = useState([
{
name: 'ID',
field: 'id',
type: 'number',
style: styleTh,
ascending: true,
isSortable: true,
},
{
name: 'Username',
field: 'username',
type: 'string',
style: styleTh,
ascending: true,
isSortable: true,
},
{
name: 'Data',
field: 'data',
type: 'string',
style: styleTh,
ascending: true,
isSortable: false,
},
{
name: 'Amount',
field: 'amount',
type: 'number',
style: styleTh,
ascending: true,
isSortable: true,
},
{
name: 'Status',
field: 'status',
type: 'string',
style: styleTh,
ascending: true,
isSortable: true,
},
{
name: 'Action',
field: 'action',
type: 'string',
style: styleTh,
ascending: true,
isSortable: false,
}
]);
const handleSort = (field) => {
const sortingColumn = staffColumns.find((column) => column.field === field);
if (field) {
const updatedColumns = staffColumns.map((column) => {
if (column.field === field && column.isSortable) {
column.ascending = !column.ascending;
}
return column;
});
setStaffColumns(updatedColumns);
const sortedList = [...utentiLista].sort((a, b) => {
const aValue = a[field];
const bValue = b[field];
if(sortingColumn.type === 'number'){
return sortingColumn.ascending ? aValue - bValue : bValue - aValue;
}else{
return sortingColumn.ascending
? String(aValue).localeCompare(String(bValue))
: String(bValue).localeCompare(String(aValue));
}
});
setUtentiLista(sortedList);
}
};
return (
<thead>
<tr style={{...styleTr}}>
{staffColumns.map((column) => {
return(
<th key={column.field} onClick={() =>handleSort(column.field)} style={column.style}>
{column.name}
</th>
)
})
}
</tr>
</thead>
)
}
export default ColoneStaff;
Now my question it’s pretty simple, how can I check if my utentiLista.keys are equal to my StaffColumns list. Inside StaffColumns I created an object that has no properties of the usersList object and therefore does not print anything in the table data but simply prints the empty Column. This is the {name:'Action'} object.
I would like to be able to find the “intruder” object in my columnStaff list, and not delete it but every time a column like that of ‘Action’ is added and which does not correspond to any value of the usersList object, and which then go and print a simple “in the data of that column Action”.
<td>Missing Value</td>
This is my usersList array:
const [utentiLista, setUtentiLista] = useState([
{id: 1, username: 'FEDERICOSCHI', data: '...', amount: 2000, status: 'Completed'},
{id: 2, username: 'Feryzz', data: '...', amount: 15, status: 'Completed'},
{id: 3, username: 'Cinquanta', data: '...', amount: 27, status: 'Pending'},
{id: 4, username: 'NotAffected', data: '...', amount: 50, status: 'In progress'},
{id: 5, username: 'Ytnoos', data: '...', amount: 12, status: 'Completed'},
{id: 6, username: 'Mattia882', data: '...', amount: 33, status: 'In progress'}
]);
