Csv Preview Table
CSV import preview with column to field mapping Selects, an unmapped column flag, and a row issue count.
CSV import preview with column to field mapping Selects, an unmapped column flag, and a row issue count.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Csv Preview Table is the import preview panel, six CSV columns mapped to contact fields via a closed Select in each header cell. Five columns are mapped (first_name to First name, email_address to Email, and so on); phone_no is flagged unmapped with a destructive-bordered Select and an AlertCircle icon. Four sample rows preview the parsed data: Avery Stone, Priya Nair, Jordan Lee, and Maya Chen, with Jordan missing a phone number rendered as empty in italics. A footer badge reads "2 of 48 rows have issues" and explains that invalid emails will be skipped.
Mappings and preview rows are two separate typed arrays. The header row renders field Selects server-side (closed) so the layout is readable without client state.
Reach for this block as the second step of a CSV import flow, after file upload and before the final import commit. Wire columnMappings to your parsed header inference and previewRows to the first N records from the parsed buffer.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the contacts CSV import mapper. Other preview tables:
Tip: flag unmapped columns in the header rather than hiding them; the user needs to decide skip or map before the import runs, not after.