Table - Import Data

Through the built-in import feature, you can import file data in CSV, JSON, TXT, XML, HTML, XLSX and other formats into the table, supporting multiple import modes and data validation.

Import Data

The most basic import method, opening the file picker through the component instance method openImport().

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Import Data

Import TXT Format

TXT format uses Tab-separated columns (TSV format), consistent with the format of copying and pasting from Excel to Notepad.

TXT file format:

Name	Age	Department	Status	Address
Wang Wu	25	Design	Active	Guangzhou Tianhe
Zhao Liu	35	Operations	Active	Shenzhen Nanshan

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Import TXT

Import XML Format

Supports importing standard XML format table data.

XML file format:

<?xml version="1.0" encoding="UTF-8"?>
<table>
  <columns>
    <column name="Name" />
    <column name="Age" />
    <column name="Department" />
    <column name="Status" />
    <column name="Address" />
  </columns>
  <rows>
    <row>
      <cell>Wang Wu</cell>
      <cell>25</cell>
      <cell>Design</cell>
      <cell>Active</cell>
      <cell>Guangzhou Tianhe</cell>
    </row>
  </rows>
</table>

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Import XML

Import HTML Format

Supports importing HTML files containing <table>, automatically identifies <thead> as header and <tbody> as data.

HTML file format:

<table>
  <thead>
    <tr><th>Name</th><th>Age</th><th>Department</th><th>Status</th><th>Address</th></tr>
  </thead>
  <tbody>
    <tr><td>Wang Wu</td><td>25</td><td>Design</td><td>Active</td><td>Guangzhou Tianhe</td></tr>
  </tbody>
</table>

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Import HTML

Import CSV Format

CSV (Comma Separated Values) is the most common import format for tables, first row is the header.

CSV file format:

Name,Age,Department,Status,Address
Wang Wu,25,Design,Active,Guangzhou Tianhe
Zhao Liu,35,Operations,Active,Shenzhen Nanshan

Tip: Import supports numberFields configuration to automatically convert specified field values to number type.

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Import CSV

Import JSON Format

JSON format is the most precise import format, key automatically matches column's prop or label.

JSON file format:

[
  { "name": "Wang Wu", "age": 25, "dept": "Design", "status": "Active", "address": "Guangzhou Tianhe" },
  { "name": "Zhao Liu", "age": 35, "dept": "Operations", "status": "Active", "address": "Shenzhen Nanshan" }
]

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Import JSON

Import Excel Format

Supports importing .xlsx, .xls, .xlsm format Excel files. First row is header, column names should match table column label or prop.

Tip: Excel import relies on the xlsx library for parsing, which is powerful and has good compatibility.

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Import Excel

Advanced Import

Configure import format, import mode, maximum row limit, and perform data validation and callbacks through beforeImport / afterImport.

Format:CSVJSONTXTXMLHTMLExcelMode:Insert TopInsert BottomCoveringMax Rows:

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Advanced Import

Server-Side Import

For large files or scenarios requiring backend validation, it is recommended to upload the file to the server for processing. The server parses it and returns standard JSON data for loading into the table.

Index	Name	Age	Department	Status	Address

1	John	28	Engineering	Active	Chaoyang, Beijing
2	Jane	32	Product	Active	Pudong, Shanghai

Server-Side Import

Import Mode Description

Mode	Value	Description
Insert Top	'insertTop'	Insert imported data at the top of the table
Insert Bottom	'insertBottom'	Append imported data to the bottom of the table (default)
Covering	'covering'	Clear existing data and replace with imported data

Supported Import Formats

Format	Extension	Description
CSV	.csv	Comma-separated values, first row as header
JSON	.json	Object array, key corresponds to column prop
TXT	.txt	Tab-separated values (TSV), first row as header
XML	.xml	Standard XML format, with <columns> and <rows>
HTML	.html	Standard <table> structure, with <thead> and <tbody>
XLSX	.xlsx	Excel format, supports .xlsx, .xls, .xlsm

Data Mapping Rules

Columns are matched with the following priority during import:

1. Custom fieldMapping configuration (highest priority)
2. File field name exactly matches column prop
3. File field name exactly matches column label

Tip: Unmatched fields will be ignored. Use numberFields to specify columns that should be automatically converted to numbers.

API

openImport(config?) Method

Call through table instance to open file picker and import data.

Property	Description	Type	Default
type	Import format	'csv' | 'json' | 'txt' | 'xml' | 'html' | 'xlsx'	Auto-detect
mode	Import mode	'covering' | 'insertTop' | 'insertBottom'	'insertBottom'
separator	CSV separator	string	','
fieldMapping	Field mapping: file column name → prop	Record<string, string>	—
autoMapping	Whether to auto-map label/prop	boolean	true
numberFields	Numeric type field list	string[]	—
maxRows	Max import rows	number	—
encoding	File encoding	string	'utf-8'
beforeImport	Before import validation	(rows) => boolean | rows[]	—
afterImport	After import callback	(rows, mode) => void	—
sheetIndex	Sheet index to read (XLSX only)	number	0
sheetName	Sheet name to read (XLSX only, takes priority over sheetIndex)	string	—
headerRow	Whether to use first row as header (XLSX only)	boolean	true

importFile(file, config?) Method

Import data from a File object.

importData(content, config?) Method

Import data from text string or object array.