I have a table component (exampleTable) that displays 'name', 'city', 'zip' and 'street' among other values, all of which is pulled from a table.
I also have a SQL query (getVehicles), that outputs a list of the same fields, in this case labeled 'NAME', 'CITY', 'ZIP' and 'STREET', respectively. The query also calculates how many vehicles each combination of the above currently has, as 'number_vehicles'. All of this data is queried from a table separate from the first.
When the fields from the exampleTable match their respective fields in the getVehicles output, I would like to have a custom column that displays that respective 'number_vehicles' value. How can I do that as efficiently as possible?
Let me know if more specifics are required, but I would be very interested to know how some of the builders here would approach this, as I've failed in several attempts so far.
Quick question first, why not just use the data from the getVehicles query as your table data source if it has the same original columns + the number_vehicles count?
Assuming there is a reason for it (maybe some don't exist in the SQL output), I'd probably go with a transformer as your data source, and within the transformer do something to map over your exampleTable data and merge in the number_vehicles data. Something like this perhaps.
// The reshapes the data into an array of object, keyed by column name
const reshapedVehicles = formatDataAsArray(getVehicles.data)
// Loop over the table data
return exampleTableData.map(row => {
const {name, city, zip, street} = row // Makes the vars easier to access
// Find the matching row in the reshapedVehicles. If not found, set to null
// Also extract the number_vehicles when found, if not found, set to null
const { number_vehicles = null } = reshapedVehicles.find(item => {
return name === item.name && city === item.city && zip === item.zip && street === item.street
})
return { name, city, zip, street, number_vehicles } // return it as an object in a format that will populate a table
})
Makes total sense then, you could tweak the example code to this then, which would handle the other 15 columns.
// The reshapes the data into an array of object, keyed by column name
const reshapedVehicles = formatDataAsArray(getVehicles.data)
// Loop over the table data
return exampleTableData.map(row => {
const {name, city, zip, street, ...rest} = row // Makes the vars easier to access
// Find the matching row in the reshapedVehicles. If not found, set to null
// Also extract the number_vehicles when found, if not found, set to null
const { number_vehicles = null } = reshapedVehicles.find(item => {
return name === item.name && city === item.city && zip === item.zip && street === item.street
})
return { name, city, zip, street, number_vehicles, ...rest} // return it as an object in a format that will populate a table
})
Only change is the ...rest in the destructuring and return object. In the first use case, it puts all remaining columns into a variable called rest, in the second use case it adds them back into the returned object.
Thanks very much for this, I hadn't thought of this approach.
For the sake of curiosity, is there a way to create an array that I can reference in the 'Value' field of a custom column and get the same number? I have a number of tables throughout my applications that I would be looking to supplement with similar columns, but want to avoid reconstructing the tables themselves.