JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

Creating a Virtualized Grid

  • /header-row-service’; @Component({ selector: ‘spreadsheet’, templateUrl: }) export class Spreadsheet implements AfterViewChecked { model:SpreadsheetModel; @Input() rows:Number; @Input() columns:Number; constructor(){ this.model = new SpreadsheetModel(10,4); this.header = this.visibleRows = this.getVisibleRows(); } getHeader(){ return } navigate($event){ this.visibleRows = this.getVisibleRows(); } ngAfterViewChecked(){ let cell = + ‘-‘ + cell.focus(); } getVisibleRows(){ return this.model.rows.filter((row) => row.rowIndex >= this.model.start && row.rowIndex < this.model.end); } getActive(col){ if(col === this.model.current){ return 'active-cell'; } } } The next step is to create a model for managing user interaction with the grid.
  • The model supports arrow key based navigation and will allocate new data rows if you navigate beyond the current “page”.
  • /column’; export class SpreadsheetModel{ rows:Array; current:Column; start:number; end:number; constructor(public rowCount, public columnCount){ this.rows = []; this.start = 0; this.end = rowCount; for(let i = 0; i < this.rowCount; i++){ this.rows.push(new Row(i,this.columnCount)); } this.current = this.rows[0].
  • columns[0]; } selectColumn(col){ this.current = col; } navigate(keyCode){ const navDirection = if(navDirection.down){ this.ensureRow(); this.current = + this.adjustRowRangeDownward(); } if(navDirection.up){ if(this.current.rowIndex === 0){ return; } this.current = – this.adjustRowRangeUpward(); } if(navDirection.left){ if(this.current.columnIndex === 0){ return; } this.current = – 1]; } if(navDirection.right){ if(this.current.columnIndex === this.columnCount – 1){ return; } this.current = + 1]; } } adjustRowRangeUpward(){ if(this.current.rowIndex < this.start){ this.shiftRowsBy(-1); } } adjustRowRangeDownward(){ if(this.current.rowIndex === this.end){ this.shiftRowsBy(1); } } shiftRowsBy(offset){ this.start = this.start + offset; this.end = this.end + offset; } ensureRow(){ if(this.current.rowIndex + 1 >= this.rows.length){ this.rows.push(new Row(this.current.rowIndex + 1,this.columnCount)); } } }

    I have also added a two entities to represent rows and columns.

  • {{columnHeader}}

    As always there is also a live demo of the code:

    Check it out here

    The code is also on Github



Virtualized spreadsheet component in Angular


https://twitter.com/intent/tweet

Comments are closed, but trackbacks and pingbacks are open.