CSV Parser with LWC

Sometimes you want to look at a CSV file inside Salesforce before deciding what to do with it, without opening the import wizard or writing server code. In January 2023 I wrote a tutorial on the old version of this blog showing how to do that with a Lightning Web Component, and this repo is its companion code.

One Lightning Web Component, createCSVTotable. It shows a card titled "CSV To Datatable" with a file picker that only accepts .csv files. When you pick a file, the component reads it in the browser, turns the first line into table columns and every other line into a row, and shows the result in a lightning-datatable. It only displays the data; it does not create or update records.

How it works

The component takes the first selected file and reads it with the browser's FileReader.readAsText, wrapped in a Promise so the code can await it. Then parseCSV() does the rest:

    parseCSV(csv) {
        // parse the csv file and treat each line as one item of an array
        const lines = csv.split(/\r\n|\n/);
        //console.log("#### lines = "+JSON.stringify(lines));
        // parse the first line containing the csv column headers
        const headers = lines[0].split(',');
        console.log("#### headers = "+JSON.stringify(headers));
        // iterate through csv headers and transform them to column format supported by the datatable
        this.columns = headers.map((header) => {
          return { label: header, fieldName: header };
        });

Full file: createCSVTotable/createCSVTotable.js. Each later line becomes an object keyed by those headers, and the array is bound to the datatable. There is no Apex, no @wire and no third-party CSV library. The metadata file targets API version 55.0 and exposes the component to App, Home and Record pages.

Because it is teaching code, it has limits I would fix before using it on real files: it splits on every comma, so quoted values that contain commas break the columns; a trailing newline adds an empty row; the datatable's key field is Id; and read errors are caught but never shown.

Stack: Lightning Web Components, JavaScript, the FileReader API, lightning-datatable.

Status and links

This is tutorial code from January 2023 and I have not changed it since. The repo holds only the component folder, so to try it you copy createCSVTotable/ into the force-app/main/default/lwc/ folder of an SFDX project, deploy it with the Salesforce CLI and add it to a Lightning page. The original tutorial, "How to Build a Simple CSV Parser with Lightning Web Components", is being restored on this site and updated for the current API version.