Displaying Monday.com board data in a Table Component

Queries and Resources
,
1

  • Goal: Display Monday.com board data as a table in a Retool app. It should be able to display multiple columns for each board line item.

  • Steps: I have successfully connected the Monday.com API and have created a query that fetches the data from the board. However, I'm stuck in how to take the resulting query output and transform it into a format that can be read by a table component in Retool. Each "text" item (unsure if I can label these better, by actual column name) is a separate column within a line item (ex. name, email, date). I've tried several solutions across this forum and elsewhere but without success in transforming this query output so that the table component can read it as individual entries with columns.

  • Details: Here is the query I'm using to fetch the data (actual board ID replaced with "BOARD_ID_HERE"):

query fetchMondayData
{
boards(ids: BOARD_ID_HERE) {
items_page {
items {
name
column_values {
text
}
}
}
}
}

And here is the data that gets returned (some fields that aren't required are left empty):

{
"data": {
"boards": [
{
"items_page": {
"items": [
{
"name": "test for licensing",
"column_values": [
{
"text": null
},
{
"text": "need to license a few songs for an event"
},
{
"text": "2024-12-19 22:15:59 UTC"
},
{
"text": "2024-11-01"
},
{
"text": "2024-11-23"
},
{
"text": "Music Licensing"
},
{
"text": "50000"
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": "3"
},
{
"text": ""
},
{
"text": "12"
},
{
"text": "YES"
},
{
"text": ""
},
{
"text": ""
},
{
"text": "lily"
},
{
"text": "lily @"
},
{
"text": "music house"
},
{
"text": "music house @"
},
{
"text": "none at this time"
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": null
}
]
},
{
"name": "testing testing",
"column_values": [
{
"text": null
},
{
"text": "12345"
},
{
"text": "2024-12-19 22:15:59 UTC"
},
{
"text": "2024-10-26"
},
{
"text": "2024-10-29"
},
{
"text": "Vendor Payment"
},
{
"text": "1500"
},
{
"text": ""
},
{
"text": ""
},
{
"text": "1"
},
{
"text": ""
},
{
"text": ""
},
{
"text": "10"
},
{
"text": "NO"
},
{
"text": ""
},
{
"text": ""
},
{
"text": "lily"
},
{
"text": "lily@"
},
{
"text": "bob"
},
{
"text": "bob@"
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": null
}
]
},
{
"name": "Splash Page Artist, Test",
"column_values": [
{
"text": null
},
{
"text": "Please pay joe $5000. By the 31st. (test)"
},
{
"text": "2024-12-19 22:15:59 UTC"
},
{
"text": "2024-10-28"
},
{
"text": "2024-10-31"
},
{
"text": "Art Licensing"
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": null
},
{
"text": ""
},
{
"text": "$5000"
},
{
"text": "Chris"
},
{
"text": "chris@emotionstudios.com"
},
{
"text": ""
},
{
"text": ""
},
{
"text": "Please charge markup to xx job... "
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": "Done!"
}
]
},
{
"name": "one more time",
"column_values": [
{
"text": null
},
{
"text": "test"
},
{
"text": "2024-12-19 22:15:59 UTC"
},
{
"text": ""
},
{
"text": ""
},
{
"text": "Art Licensing"
},
{
"text": "12000"
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": "3"
},
{
"text": ""
},
{
"text": "12"
},
{
"text": "YES"
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": "Done!"
}
]
},
{
"name": "example",
"column_values": [
{
"text": null
},
{
"text": ""
},
{
"text": "2024-12-19 22:15:59 UTC"
},
{
"text": "2024-10-31"
},
{
"text": "2024-11-02"
},
{
"text": "Music Licensing"
},
{
"text": "40000"
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": "4"
},
{
"text": ""
},
{
"text": "12"
},
{
"text": "YES"
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": ""
},
{
"text": "Done!"
}
]
}
]
}
}
]
}
}

Essentially, I'm trying to replicate the columns and items within our Monday.com board to display in our Retool app dashboard.

Please let me know if I can provide any further information or context.
Thank you for your help!

2

Hello @hollyhazeldine

To display Monday.com board data in a Retool table, transform the nested API response into a flat array of objects, each representing a row.

Steps:

  1. Extract Data: Pull name and text from column_values.
  2. Flatten Data: Map column_values.text to columns, using name as the row identifier.
  3. Define Columns: Map to meaningful column labels.
const boardData = YourQueryName.data.boards[0].items_page.items;

const transformedData = boardData.map((item) => {
  const columns = item.column_values.map((col) => col.text || "");
  return {
    Name: item.name,
    Column1: columns[0],
    Column2: columns[1],
    Column3: columns[2],
    Column4: columns[3],
    Column5: columns[4],
    Column6: columns[5],
    Column7: columns[6],
    Column8: columns[7],
  };
});

return transformedData;

OUTPUT

[
  {
    "Name": "test for licensing",
    "Column1": null,
    "Column2": "need to license a few songs",
    "Column3": "2024-12-19 22:15:59 UTC",
    "Column4": "2024-11-01",
    "Column5": "2024-11-23",
    "Column6": "Music Licensing",
    "Column7": "50000",
    "Column8": ""
  },
  {
    "Name": "testing testing",
    "Column1": null,
    "Column2": "12345",
    "Column3": "2024-12-19 22:15:59 UTC",
    "Column4": "2024-10-26",
    "Column5": "2024-10-29",
    "Column6": "Vendor Payment",
    "Column7": "1500",
    "Column8": ""
  }
]
1 Like