How to skip second row with merged cell in CSV uploaded via FileInput before displaying in Table

đź’¬ App Building
1
  • My goal:
    I'm using the FileInput component in Retool to upload a CSV file and display its contents in a table.
  • Issue:
    The first row of the CSV contains proper column headers (which is expected), but the second row includes a long note in merged cells—it's just a comment and not actual data. This row causes issues when displaying the data in the table, as it breaks the structure and appears as part of the dataset.

I’ve attached a screenshot of the CSV data format that mimics my actual data structure for reference. I would appreciate any help cleaning this up after the file upload!

image
image629Ă—147 4.81 KB

2

Hi @Hamza_Hassan, Welcome to the forum.

You can use the following JS snippet to skip a particular row:

// Get the base64 string from FileInput
const base64CSV = {{ fileInput.value[0].base64Data }};

// Decode the base64 to get the raw CSV string
const decodedCSV = atob(base64CSV);

// Split into rows
const rows = decodedCSV.split('\n');

// Remove the second row (index 1)
rows.splice(1, 1);

// Join rows back
const updatedCSV = rows.join('\n');

// Parse the cleaned CSV
return Papa.parse(updatedCSV, { header: true }).data;

The header: true option tells PapaParse to treat the first row as column headers. This way, it returns an array of objects (instead of arrays), which makes it easier to work with in Retool tables.

If your CSV doesn’t include headers, or they’re on a different row, you'll need to adjust this logic a bit.

Let me know if you want help customizing it further!

2 Likes
3

Hi @Adnan_Khalil1, thanks a lot! That worked perfectly — really appreciate your help.

1 Like