"use client" import { IconDownload } from "@tabler/icons-react" import * as React from "react" import { Example, ExampleWrapper } from "../example" import { Button } from "../ui/button" import { Importer } from "../ui/importer" import { Tag } from "../ui/tag" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../ui/table" interface Machine { id: string code: string type: string brand: string model: string year: number status: string } const STATUS_COLOR: Record = { Operativa: "emerald", Mantenimiento: "amber", Inactiva: "gray", } const INITIAL: Machine[] = [ { id: crypto.randomUUID(), code: "MAQ-001", type: "Excavadora", brand: "Caterpillar", model: "320D", year: 2019, status: "Operativa", }, { id: crypto.randomUUID(), code: "MAQ-003", type: "Bulldozer", brand: "Komatsu", model: "D65PX", year: 2018, status: "Mantenimiento", }, { id: crypto.randomUUID(), code: "MAQ-006", type: "Motoniveladora", brand: "Caterpillar", model: "140K2", year: 2019, status: "Inactiva", }, ] function ImporterBasic() { const [data, setData] = React.useState(INITIAL) return (

Archivos de prueba:

{ const formatted: Machine[] = rows.map((row) => ({ id: crypto.randomUUID(), code: String(row.code ?? ""), type: String(row.type ?? ""), brand: String(row.brand ?? ""), model: String(row.model ?? ""), year: Number.isNaN(Number(row.year)) ? 0 : Number(row.year), status: String(row.status ?? ""), })) setData((previous) => [...previous, ...formatted]) }} />

Código Tipo Marca Modelo Año Estado {data.map((machine) => ( {machine.code} {machine.type} {machine.brand} {machine.model} {machine.year || "—"} {machine.status && ( {machine.status} )} ))}

Descarga un archivo de prueba, ábrelo con “Importar”, y asigna cada columna (ej. Codigo → Código) al campo correspondiente. Acepta CSV, XLS y XLSX.

) }

Código	Tipo	Marca	Modelo	Año	Estado
MAQ-001	Excavadora	Caterpillar	320D	2019	Operativa
MAQ-003	Bulldozer	Komatsu	D65PX	2018	Mantenimiento
MAQ-006	Motoniveladora	Caterpillar	140K2	2019	Inactiva

Command Palette