Csv Preview Table

About this block

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.

When to use

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

• Forms
• Filters and search

After

• Notifications
• Data table

What you can display

One strong use is the contacts CSV import mapper. Other preview tables:

• Product catalog import. SKU, title, price, and inventory columns mapped to catalog fields.
• User bulk invite. Email and role columns with the role Select pre-filled to Member.
• Transaction import. Date, amount, and description mapped to ledger fields with currency validation.

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.