feat: dynamically create grid from imported CSV data (#1299)

packages/demo/src/assets/data/users.csv

@@ -0,0 +1,5 @@
+First Name,Last Name,Age,User Type
+John,Doe,20,Student
+Bob,Smith,33,Assistant Teacher
+Jane,Doe,21,Student
+Robert,Ken,42,Teacher

packages/demo/src/examples/slickgrid/example43.html

@@ -0,0 +1,52 @@
+<div class="container-fluid">
+  <h2>
+    Example 43: Dynamically Create Grid from CSV / Excel import
+    <span class="float-end">
+      <a style="font-size: 18px" target="_blank"
+        href="https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example43.ts">
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      click.trigger="toggleSubTitle()"
+    >
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
+  </h2>
+
+  <div if.bind="showSubTitle" class="subtitle">
+    Allow creating a grid dynamically by importing an external CSV or Excel file. This script demo will read the CSV file and will
+    consider the first row as the column header and create the column definitions accordingly, while the next few rows will be
+    considered the dataset. Note that this example is demoing a CSV file import but in your application you could easily implemnt
+    an Excel file uploading.
+  </div>
+
+  <div>A default CSV file can be download <a id="template-dl" href.bind="templateUrl">here</a>.</div>
+
+  <div class="d-flex mt-5 align-items-end">
+    <div class="file-upload">
+      <label for="formFile" class="form-label">Choose a CSV file…</label>
+      <input class="form-control" type="file" data-test="file-upload-input" value.bind="uploadFileRef" change.trigger="handleFileImport($event)" />
+    </div>
+    <span class="mx-3">or</span>
+    <div>
+      <button id="uploadBtn" data-test="static-data-btn" class="btn btn-outline-secondary" click.trigger="handleDefaultCsv">
+        Use default CSV data
+      </button>
+      <button class="btn btn-outline-secondary" click.trigger="destroyGrid()">Destroy Grid</button>
+    </div>
+  </div>
+
+  <hr />
+
+  <aurelia-slickgrid
+    if="value.bind: gridCreated; cache: false"
+    grid-id="grid43"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset">
+  </aurelia-slickgrid>
+</div>

packages/demo/src/examples/slickgrid/example43.ts

@@ -0,0 +1,100 @@
+import { type Column, type GridOption, toCamelCase } from 'aurelia-slickgrid';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+
+const sampleDataRoot = 'assets/data';
+
+export class Example43 {
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  gridCreated = false;
+  showSubTitle = true;
+  dataset: any[] = [];
+  paginationPosition: 'bottom' | 'top' = 'top';
+  templateUrl = `${sampleDataRoot}/users.csv`;
+  uploadFileRef = '';
+
+  destroyGrid() {
+    this.gridCreated = false;
+  }
+
+  handleFileImport(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e: any) => {
+        const content = e.target.result;
+        this.dynamicallyCreateGrid(content);
+      };
+      reader.readAsText(file);
+    }
+  }
+
+  handleDefaultCsv() {
+    const staticDataCsv = `First Name,Last Name,Age,Type\nBob,Smith,33,Teacher\nJohn,Doe,20,Student\nJane,Doe,21,Student`;
+    this.dynamicallyCreateGrid(staticDataCsv);
+    this.uploadFileRef = '';
+  }
+
+  dynamicallyCreateGrid(csvContent: string) {
+    // dispose of any previous grid before creating a new one
+    this.gridCreated = false;
+
+    const dataRows = csvContent?.split('\n');
+    const colDefs: Column[] = [];
+    const outputData: any[] = [];
+
+    // create column definitions
+    dataRows.forEach((dataRow, rowIndex) => {
+      const cellValues = dataRow.split(',');
+      const dataEntryObj: any = {};
+
+      if (rowIndex === 0) {
+        // the 1st row is considered to be the header titles, we can create the column definitions from it
+        for (const cellVal of cellValues) {
+          const camelFieldName = toCamelCase(cellVal);
+          colDefs.push({
+            id: camelFieldName,
+            name: cellVal,
+            field: camelFieldName,
+            filterable: true,
+            sortable: true,
+          });
+        }
+      } else {
+        // at this point all column defs were created and we can loop through them and
+        // we can now start adding data as an object and then simply push it to the dataset array
+        cellValues.forEach((cellVal, colIndex) => {
+          dataEntryObj[colDefs[colIndex].id] = cellVal;
+        });
+
+        // a unique "id" must be provided, if not found then use the row index and push it to the dataset
+        if ('id' in dataEntryObj) {
+          outputData.push(dataEntryObj);
+        } else {
+          outputData.push({ ...dataEntryObj, id: rowIndex });
+        }
+      }
+    });
+
+    this.gridOptions = {
+      gridHeight: 300,
+      gridWidth: 800,
+      enableFiltering: true,
+      enableExcelExport: true,
+      externalResources: [new ExcelExportService()],
+      headerRowHeight: 35,
+      rowHeight: 33,
+    };
+
+    this.dataset = outputData;
+    this.columnDefinitions = colDefs;
+    console.log(this.columnDefinitions, this.dataset)
+    this.gridCreated = true;
+  }
+
+  toggleSubTitle() {
+    this.showSubTitle = !this.showSubTitle;
+    const action = this.showSubTitle ? 'remove' : 'add';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+  }
+}

packages/demo/src/my-app.ts

@@ -46,6 +46,7 @@ export class MyApp {
     { path: 'example40', component: () => import('./examples/slickgrid/example40'), title: '40- Infinite Scroll from JSON data' },
     { path: 'example41', component: () => import('./examples/slickgrid/example41'), title: '41- Drag & Drop' },
     { path: 'example42', component: () => import('./examples/slickgrid/example42'), title: '42- Custom Pagination' },
+    { path: 'example43', component: () => import('./examples/slickgrid/example43'), title: '43- Grid from CSV' },
     { path: 'home', component: () => import('./home-page'), title: 'Home' },
   ];
 

test/cypress/e2e/example43.cy.ts

@@ -0,0 +1,83 @@
+describe('Example 43 - Dynamically Create Grid from CSV / Excel import', () => {
+  const defaultCsvTitles = ['First Name', 'Last Name', 'Age', 'Type'];
+  const GRID_ROW_HEIGHT = 33;
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/example43`);
+    cy.get('h2').should('contain', 'Example 43: Dynamically Create Grid from CSV / Excel import');
+  });
+
+  it('should load default CSV file and expect default column titles', () => {
+    cy.get('[data-test="static-data-btn"]').click();
+
+    cy.get('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(defaultCsvTitles[index]));
+  });
+
+  it('should expect default data in the grid', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Bob');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Smith');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'Teacher');
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'John');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Doe');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '20');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'Student');
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Jane');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Doe');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '21');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'Student');
+  });
+
+  it('should sort by "Age" and expect it to be sorted in ascending order', () => {
+    cy.get('.slick-header-columns .slick-header-column:nth(2)').click();
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'John');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Doe');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '20');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'Student');
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Jane');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Doe');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '21');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'Student');
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Bob');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Smith');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '33');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'Teacher');
+  });
+
+  it('should click again the "Age" column and expect it to be sorted in descending order', () => {
+    cy.get('.slick-header-columns .slick-header-column:nth(2)').click();
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Bob');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Smith');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'Teacher');
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Jane');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Doe');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '21');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', 'Student');
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'John');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Doe');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '20');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', 'Student');
+  });
+
+  it('should filter Smith as "Last Name" and expect only 1 row in the grid', () => {
+    cy.get('.slick-headerrow .slick-headerrow-column:nth(1) input').type('Smith');
+
+    cy.get('.slick-row').should('have.length', 1);
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Bob');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Smith');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(2)`).should('contain', '33');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', 'Teacher');
+  });
+});