Fillin a column of a table with a user input

App Building
1

I have a table that stores information coming from a CSV file imported into Retool. After the user gives the OK via a button, the data is sent to the database. In this table, I have a column called competencia that is initially empty. I want the user to fill it out using a date picker element. The order is as follows: first, the user selects the date, then imports the CSV, and upon importing, the data is displayed in the table with the date chosen by the user.

How would I do this in Retool?

1 Like
2

I don't believe this is possible because you are attempting to allow access to data that is being loaded but you want to edit it at the same time.
So, I would suggest you might be able to do the following:
User imports the file.
Run query to read data from db (csv just imported into db) and populate table component with data and make that date column editable.

  • I stand corrected!
3

Hi @Ricardo_Bezerra,
Welcome to Retool!

If I understand correctly you can do the something like this.

Make sure you have the following components

  • File Input (fileInput1) → For importing the CSV.
  • Date Picker (datePicker1) → For selecting the competencia date.
  • Table (table1) → To display the imported data.

Next, you'll need to create a JavaScript Query. Let's call it processCSV.

Add something like this:

// Get the selected date from the date picker
const selectedDate = datePicker1.value;

// Parse the CSV file from fileInput1
const csvData = utils.parseCsv(fileInput1.value[0]);

// Add the selected date as "competencia" in each row
const processedData = csvData.map(row => ({
  ...row,
  competencia: selectedDate  // Assign selected date
}));

return processedData;

Set table1 to display processed data. Data source: `{{ processCSV.data }}

Create a Query to send data to database:

INSERT INTO your_table (column1, column2, competencia)
SELECT 
  (value->>'column1')::text, 
  (value->>'column2')::text, 
  (value->>'competencia')::date
FROM jsonb_array_elements({{ processCSV.data }}::jsonb);

Connect the submit button. Select btnSubmitData.
In the right-side panel, go to Event Handlers. On Click → Trigger Query → insertDataToDB

That's it!. If you need further help please send screenshots.

3 Likes
4

Yup, I had the exact same line of thought as Shawn, but was lazy enough not to write it down. Definitely agree with his approach.

2 Likes