Building a Custom Low-Code NBA Dashboard in Retool

Andre Dubovskiy

In this tutorial I'll walk you through how I used our client Retool's low-code internal tools platform to build a dashboard to study the Dallas Mavericks' performance in the 2022 postseason.

I started by pulling data from ESPN into a Google spreadsheet with


This spreadsheet command goes to a given webpage and imports the first HTML table.

I ended up with the following stats:

Number, First, Last, POS, Age, HT, WT, College, Salary, Full, Pic, GP, GS, MIN, PTS, OR, DR, REB, AST, STL, BLK, TO, PF, AST/TO, PER.

I manually populated the Pic column with player photo URLs. This can be automated.

To get started with Retool, I made a trial account here and created an app from scratch.

Then I imported my table from Google Sheets by

1. Creating a new Resource Query and adding my sheet

  • You might have already connected Google Sheets when you created the app, but if not, add a resource from the bottom inspector.

2. Referencing the relevant cells with A1 notation in the query settings

3. Creating a Table widget by dragging it in from the Create tab on the right

  • You might not have to do this given that Retool's "from scratch" template includes a table right off the bat

4. Setting the Data field of the table to {{}}, also on the right.

This tells Retool to pull the data from the query1 I created above.

After that, I dragged in a new Image widget from the Create menu on the right. I wanted the picture to correspond to the selected player in the table (linked in the Pic column of each row). Rather than a static URL for the Image widget, one can use a variable like {{}}:

Retool lets you combine Markdown and variables to visualize the data in a dynamic fashion, and built-in variables like selectedRow make it really straightforward to create a reactive interface.

I added an individual stat viewer by mixing the following markdown cocktail.

## <span style="color:darkblue">{{ }}</span>
### {{}}, {{}}
### ${{"en-US")}}/year

### <span style="color:darkblue">Postseason Stats</span>
#### Points Per Game: {{}}
#### Assists Per game: {{}}
#### Personal Fouls: {{}}
#### Rebounds: {{}}
#### Value (PPG / Million $):
### <span style="color:#5588DD">{{Math.round(*1000)/1000}}

Beyond the statistics I found on ESPN, I included a custom "Value" index in the viewer. This tells you how many points a player scores per game for every $1M that they get paid. I'm not a sports analyst and don't know if this has been calculated before, or if it's useful, but at least I can brag to my friends that I invented my own basketball statistic :-)

Subscribe to Frindle Blog

Sign up now to get access to the library of members-only issues.
Jamie Larson