Make your Retool Table "Feel" like a spreadsheet

🤝 Community Show & Tell
1

It is very common for retool users to want to replicate the look and feel of a "spreadsheet". Although I often advise clients to try and embrace the options that retool gives in terms of adding new records, visualising data and interacting with tables, I also try to replicate the experience that they've had for many many years, i.e. a spreadsheet.

On this tutorial I provide some tips on how you can make a Retool Table component "feel more" like a spreadsheet (it will never be a spreadsheet though!), whilst at the same time updating your database in the backend.

Here's the app shown in the video which you can import to see the snippets, which I also report below:

excel-feel-tutorial.json|attachPreformatted textment (26.4 KB)

This tutorial makes use of

  • Scripts as Handle events
  • Temporable variables
  • setIn and setValue methods to update the variable
  • Row buttons

Code Snippets:

Chance Cell

const index = table1.selectedDataIndex
const key = Object.keys(table1.changesetArray[0]).find(k => k !== "id");
const value = Object.entries(table1.changesetArray[0]).find(([key]) => key !== "id")[1];

updateUser.trigger({
  onSuccess: () => {  tableData.setIn([index,key],value);
  }
});

Delete Cell

let updatedArray = [...tableData.value];
updatedArray.splice(table1.selectedDataIndex, 1);

deleteUser.trigger({
  onSuccess: () => {  tableData.setValue(updatedArray);
  }
});
9 Likes
2

@MiguelOrtiz Fantastic stuff!

Well done and thank you for taking the time to put that together. Easy to follow and for sure it gave me some ideas.

I agree wholeheartedly with trying to embrace the UI ethos of Retool. Often times the work around to get a client exactly what they had before can be a big miss, as they may be more efficient and have a better and more productive UI experience if they are willing to look at alternative ways to accomplish the same objective.

But, for sure the table is extremely powerful and only limited to ones JS skills and imagination in terms of getting it to do most use cases.

Again, well done and a heartfelt thank you for the time you put into the forum in sharing knowledge and technical expertise.

2 Likes