feat: dynamically create grid from imported CSV data

[ghiscoding]

• dynamically create a grid by importing an external CSV or Excel file, the script assumes that the first row is to be considered the header titles and creates the column definitions from that first row. All other rows are considered the data

TODOs

• create example with static CSV list to start
• add an import CSV button that will read any imported file
  • only accept demo CSV .txt file though, user can implement Excel import themselves if they wish
• provide static CSV list as downloadable template on the website
• add E2E tests assuming default static CSV list is provided
• replicate example in Slickgrid-Vue as well
• add Excel Export grid option to demo

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.8%. Comparing base (f61bf18) to head (850174f).
Report is 1 commits behind head on master.

Additional details and impacted files

@@          Coverage Diff           @@
##           master   #1772   +/-   ##
======================================
  Coverage    99.8%   99.8%           
======================================
  Files         187     187           
  Lines       31164   31164           
  Branches     9791    9791           
======================================
  Hits        31075   31075           
  Misses         89      89           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ghiscoding]

@zewa666 so I was looking for a new feature so that I could push a new minor release for Slickgrid-Vue in the next few days and thought of creating this new example. It's most probably a common scenario and perhaps that might help you with your recent comment about creating a grid from a dynamic form!? What do you think? Pretty cool, right? 😉

I haven't done the Angular-Slickgrid example yet and it for this use case, it might actually be easier to create a dynamic grid from vanilla code, but anyway it shouldn't be too hard in Angular as well (will create in Vue first though)

Also a reminder, all PRs now include the Stackblitz link above, so you can even give try it live if you want :)

[zewa666]

we do that for our OData provided Grid/ColumnConfigs so thats a super valuable example. our current use case though is to somewhat replicate the composite editor form but instead with ngx-formly in order to support rendering various grid definitions. e.g the grid shows the overview but dblckick on a row will open a modal with 1..n related tables based on forms.

so we're essentially wrapping slickgrid controls and mapping slickgrid Interfaces to formly ones