Skip to content

Transform

By default @mapped emits column-oriented data — one entry per mapped field:

typescript
// default output
[
  { field: "first_name", columnName: "Nombres", data: ["Ana", "Luis"] },
  {
    field: "email",
    columnName: "Correo",
    data: ["ana@mail.com", "luis@mail.com"],
  },
];

Use transform to receive row-oriented data instead:

typescript
import type { TransformFn } from "@dazzadev/vue-sheet-mapper";

type Contact = {
  full_name: string;
  email: string;
  phone: string;
};

const contactTransform: TransformFn<Contact> = (row) => {
  if (!row.first_name) return null; // skip empty rows
  return {
    full_name: `${row.first_name.trim()} ${row.last_name?.trim() ?? ""}`.trim(),
    email: row.email?.toLowerCase().trim() ?? "",
    phone: row.phone?.replace(/\D/g, "") ?? "",
  };
};

function onMapped(rows: Contact[]) {
  // [{ full_name: 'Ana García', email: 'ana@mail.com', phone: '3001234567' }, ...]
}
vue
<SheetMapper
  :fields="fields"
  :transform="contactTransform"
  @mapped="(rows) => onMapped(rows as Contact[])"
/>

Manual row conversion

If you don't use transform but still need row-oriented data, use the exported toRows utility:

typescript
import { toRows } from "@dazzadev/vue-sheet-mapper";
import type { MappedResult } from "@dazzadev/vue-sheet-mapper";

function onMapped(results: MappedResult[]) {
  const rows = toRows(results);
  // [{ first_name: 'Ana', email: 'ana@mail.com' }, ...]
}

Released under the MIT License.