Implementation idea for Table components

Table.js

//Configuration object that can be used to build the table:
const trackRowSchema = [    
    { 
        field: 'expand-column', 
        renderValue: (value) => <Button aria-label="expand-icon"><icon /></Button>,
    },
    { 
        field: 'name', 
        renderValue: (value) => <FancyLabel>{value.name}</FancyLabel>,
    },
    { 
        field: 'status', 
        renderValue: (value) => <ComplexStatusComponent>{value.status}</ComplexStatusComponent>
    },
]

//Table component agnostic of specific business logic, or entity/model
function Table({ entityPath, tableRowSchema }) {
    const [entityList] = useFetch(entityPath);    
    entityList.map(entity => <TableRow track={entity} rowSchema={tableRowSchema} />)
}

//TableRow component just gets the entity and the row schema adn renders the row
function TableRow({ entity, rowSchema }) {
  return (
    <tr>
        {rowSchema.map(({ field, renderValue }) => (
            <td key={field}>
                {renderValue(entity)}
            </td>
        ))}
    </tr> 
  );
}

<Table entityPath="/tracks" tableRowSchema={trackRowSchema} />