In our 2020 Volume 2 release, the Blazor Pivot Table component has added support for comma-separated value (CSV) data sources. CSV is one of the most popular data sharing formats, primarily used in business and science applications. It is also considered a more compact format than JSON, as it is just half the size of JSON. As such, it helps reduce bandwidth usage while transferring data through a browser.
In the Blazor Pivot Table component, a CSV data source can be set as input in the following ways:
- As a file from local storage.
- As a file from remote storage.
- From a web service using the “text/csv” MIME type.
Let’s learn about them!
As a file from local storage
A CSV file can be retrieved from local storage using the File Uploader component. Once the file is uploaded, the contents will be converted to the format accepted by the Pivot Table and set as its data source.
Refer to the following code example.
[*.ts]
import { PivotView } **from** '@syncfusion/ej2-pivotview'``;
import { Uploader } **from** '@syncfusion/ej2-inputs'``;
// Step 1: Initiate the File Uploader.
**let** uploadObj: Uploader = **new** Uploader();
uploadObj.appendTo(``'#fileupload'``);
**let** input = document.querySelector(``'input[type="file"]'``);
// Step 2: Add the event listener which fires when the *.CSV file is uploaded.
input.addEventListener(``'change'``, function (e: Event) {
// Step 3: Initiate the file reader.
**let** reader: FileReader = **new** FileReader();
reader.onload = function () {
// Step 4: Getting the string output which is to be converted as string[][].
**let** result: **string**``[][] = (reader.result **as** **string**``).split(``'\n'``).map(function (line) {
**return** line.split(``','``);
});
**let** pivotObj: PivotView = **new** PivotView({
dataSourceSettings: {
// Step 5: The string[][] result to be bound as data source.
dataSource: result,
// Step 6: Set data source type as “CSV”.
type: 'CSV'``,
// Step 7: The appropriate report needs to be provided here.
},
});
pivotObj.appendTo(``'#PivotTable'``);
};
reader.readAsText((input **as** any).files[0]);
});
As a file from remote storage
A CSV file can be uploaded to any server, and its HTTP or HTTPS link can then be set for the Pivot Table. Then, the Pivot Table will internally retrieve and convert the data to the required format for future processing.
Refer to the following code example.
[*.ts]
**let** pivotObj: PivotView = **new** PivotView({
dataSourceSettings: {
// URL for file hosted on remote server needs to be placed here.
url: 'https://cdn.syncfusion.com/data/sales-analysis.csv'``,
// Set data source type as “CSV”.
type: 'CSV'``,
// The appropriate report needs to be provided here.
},
});
#blazor #web #what's new #data source #pivot table #productivity #what's new
