SYIDAX / DATA GRID

Import CSV

Convert delimited text into rows and columns.

Get started
Import CSVSample order data
120 rows
Loading Grid…

Options

Changes below update the Grid and code immediately.

Latest result

Start with Product and Quantity columns, for example product,quantity on the first line and Atlas Sensor,25 on the next.

View code
Current preview

Usage guide

#

Import and inspect CSV files exported from spreadsheets. The first line can supply column headings.

Try it yourself

  1. Prepare a simple CSV

    Start with Product and Quantity columns, for example product,quantity on the first line and Atlas Sensor,25 on the next.

  2. Use Grid import

    Select a file using the enabled CSV import tool. The table changes to columns and rows matching its content.

  3. Check rows, columns, and values

    Verify headers, row counts, numbers, and empty cells. Click Reset to return to sample orders.

Expected results

Inspect the file content as new columns and row data.

Import replaces current table data. Common options assume order columns, so changing options after import may reapply the order column definitions.

Useful terms

CSV
A text file with comma-separated columns.
hasHeader
An option using the first row as column names rather than data.

Key API examples

Application code that references the registered Grid element as grid.

const result = await grid.importCsvText('product,quantity\nAtlas Sensor,25', {hasHeader:true});
console.log(result);

API reference

#

Other properties1
Attribute / PropertyType / DefaultDescription
csvImport
booleanDefault: falseshow the "Import CSV" toolbar affordance + mapping wizard.
Events1
EventsDetail typeDescription
{ rowCount: number; columnCount: number }fires after a CSV import loads new columns + rows.
Methods1
Method / ArgumentsReturn typeDescription
text: string, options?: { delimiter?: CsvDelimiter; hasHeader?: boolean }
Promise<{ rowCount: number; columnCount: number }>parse CSV text and load it into the grid (replaces `columnDefs` + `rowData`). Returns the parsed shape; fires `csvImported`.