chore: use shorter columns prop name & fix some typos

demos/aurelia/src/examples/slickgrid/example01.html

@@ -33,7 +33,7 @@ <h3>
 <div class="grid-container1">
   <aurelia-slickgrid
     grid-id="grid1-1"
-    columns.bind="columnDefinitions1"
+    columns.bind="columns1"
     options.bind="gridOptions1"
     dataset.bind="dataset1"
     on-aurelia-grid-created.trigger="aureliaGridReady($event.detail)"
@@ -44,5 +44,4 @@ <h3>
 <hr />
 
 <h3>Grid 2 <small>(with local Pagination)</small></h3>
-<aurelia-slickgrid grid-id="grid1-2" columns.bind="columnDefinitions2" options.bind="gridOptions2" dataset.bind="dataset2">
-</aurelia-slickgrid>
+<aurelia-slickgrid grid-id="grid1-2" columns.bind="columns2" options.bind="gridOptions2" dataset.bind="dataset2"> </aurelia-slickgrid>

demos/aurelia/src/examples/slickgrid/example01.ts

@@ -8,8 +8,8 @@ export class Example01 {
   aureliaGrid1!: AureliaGridInstance;
   gridOptions1!: GridOption;
   gridOptions2!: GridOption;
-  columnDefinitions1: Column[] = [];
-  columnDefinitions2: Column[] = [];
+  columns1: Column[] = [];
+  columns2: Column[] = [];
   dataset1: any[] = [];
   dataset2: any[] = [];
   hideSubTitle = false;
@@ -41,7 +41,7 @@ export class Example01 {
 
   /* Define grid Options and Columns */
   defineGrids() {
-    this.columnDefinitions1 = [
+    this.columns1 = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100 },
       { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100 },
       { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 },
@@ -60,7 +60,7 @@ export class Example01 {
 
     // copy the same Grid Options and Column Definitions to 2nd grid
     // but also add Pagination in this grid
-    this.columnDefinitions2 = this.columnDefinitions1;
+    this.columns2 = this.columns1;
     this.gridOptions2 = {
       ...this.gridOptions1,
       ...{
@@ -99,7 +99,7 @@ export class Example01 {
 
   resetGrid1() {
     // const cols = this.aureliaGrid1.slickGrid?.getColumns() || [];
-    const cols = this.columnDefinitions1.slice();
+    const cols = this.columns1.slice();
     cols.forEach((c) => (c.hidden = false));
     this.aureliaGrid1.slickGrid?.setColumns(cols);
     this.aureliaGrid1.slickGrid?.autosizeColumns();

demos/aurelia/src/examples/slickgrid/example02.html

@@ -39,11 +39,5 @@ <h2>
 </button>
 <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="disposeGrid()">Dispose Grid</button>
 
-<aurelia-slickgrid
-  grid-id="grid2"
-  columns.bind="columnDefinitions"
-  options.bind="gridOptions"
-  dataset.bind="dataset"
-  instances.bind="aureliaGrid"
->
+<aurelia-slickgrid grid-id="grid2" columns.bind="columns" options.bind="gridOptions" dataset.bind="dataset" instances.bind="aureliaGrid">
 </aurelia-slickgrid>

demos/aurelia/src/examples/slickgrid/example02.ts

@@ -32,7 +32,7 @@ const customEnableButtonFormatter: Formatter<DataItem> = (_row: number, _cell: n
 export class Example02 {
   aureliaGrid!: AureliaGridInstance;
   gridOptions!: GridOption;
-  columnDefinitions: Column<DataItem>[] = [];
+  columns: Column<DataItem>[] = [];
   dataset: any[] = [];
   hideSubTitle = false;
   resizerPaused = false;
@@ -50,7 +50,7 @@ export class Example02 {
   /* Define grid Options and Columns */
   defineGrid() {
     // the columns field property is type-safe, try to add a different string not representing one of DataItems properties
-    this.columnDefinitions = [
+    this.columns = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, width: 70 },
       {
         id: 'phone',

demos/aurelia/src/examples/slickgrid/example03.html

@@ -118,7 +118,7 @@ <h2>
 <div id="grid-container" class="col-sm-12">
   <aurelia-slickgrid
     grid-id="grid3"
-    columns.bind="columnDefinitions"
+    columns.bind="columns"
     options.bind="gridOptions"
     dataset.bind="dataset"
     instances.bind="aureliaGrid"

demos/aurelia/src/examples/slickgrid/example03.ts

@@ -56,7 +56,7 @@ export class Example03 {
   private _commandQueue: EditCommand[] = [];
   aureliaGrid!: AureliaGridInstance;
   gridOptions!: GridOption;
-  columnDefinitions: Column[] = [];
+  columns: Column[] = [];
   dataset: any[] = [];
   updatedObject: any;
   hideSubTitle = false;
@@ -79,7 +79,7 @@ export class Example03 {
 
   /* Define grid Options and Columns */
   defineGrid() {
-    this.columnDefinitions = [
+    this.columns = [
       {
         id: 'edit',
         field: 'id',
@@ -464,7 +464,7 @@ export class Example03 {
     // wrap into a timer to simulate a backend async call
     setTimeout(() => {
       // at any time, we can poke the "collection" property and modify it
-      const requisiteColumnDef = this.columnDefinitions.find((column: Column) => column.id === 'prerequisites');
+      const requisiteColumnDef = this.columns.find((column: Column) => column.id === 'prerequisites');
       if (requisiteColumnDef) {
         const collectionEditor = requisiteColumnDef.editor!.collection;
         const collectionFilter = requisiteColumnDef.filter!.collection;
@@ -489,7 +489,7 @@ export class Example03 {
 
   /** Delete last inserted row */
   deleteItem() {
-    const requisiteColumnDef = this.columnDefinitions.find((column: Column) => column.id === 'prerequisites');
+    const requisiteColumnDef = this.columns.find((column: Column) => column.id === 'prerequisites');
     if (requisiteColumnDef) {
       const collectionEditor = requisiteColumnDef.editor!.collection;
       const collectionFilter = requisiteColumnDef.filter!.collection;
@@ -596,20 +596,20 @@ export class Example03 {
 
     // you can dynamically add your column to your column definitions
     // and then use the spread operator [...cols] OR slice to force Aurelia to review the changes
-    this.columnDefinitions.push(newCol);
+    this.columns.push(newCol);
 
     // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
     // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
     // for example if you use the Checkbox Selector (row selection), you MUST use the code below
     /*
     const allColumns = this.aureliaGrid.gridService.getAllColumnDefinitions();
     allColumns.push(newCol);
-    this.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Aurelia to do dirty checking
+    this.columns = [...allColumns]; // (or use slice) reassign to column definitions for Aurelia to do dirty checking
     */
   }
 
   dynamicallyRemoveLastColumn() {
-    this.columnDefinitions.pop();
+    this.columns.pop();
 
     /*
     // remove your column the full set of columns

demos/aurelia/src/examples/slickgrid/example04.html

@@ -85,7 +85,7 @@ <h2>
 
 <aurelia-slickgrid
   grid-id="grid4"
-  columns.bind="columnDefinitions"
+  columns.bind="columns"
   options.bind="gridOptions"
   dataset.bind="dataset"
   on-aurelia-grid-created.trigger="aureliaGridReady($event.detail)"

demos/aurelia/src/examples/slickgrid/example04.ts

@@ -22,7 +22,7 @@ const NB_ITEMS = 10500;
 
 export class Example04 {
   aureliaGrid!: AureliaGridInstance;
-  columnDefinitions: Column[] = [];
+  columns: Column[] = [];
   gridOptions!: GridOption;
   dataset: any[] = [];
   hideSubTitle = false;
@@ -47,7 +47,7 @@ export class Example04 {
 
   /* Define grid Options and Columns */
   defineGrid() {
-    this.columnDefinitions = [
+    this.columns = [
       {
         id: 'title',
         name: 'Title',

demos/aurelia/src/examples/slickgrid/example05.html

@@ -157,7 +157,7 @@ <h2>
 
 <aurelia-slickgrid
   grid-id="grid5"
-  columns.bind="columnDefinitions"
+  columns.bind="columns"
   options.bind="gridOptions"
   dataset.bind="dataset"
   pagination-options.bind="paginationOptions"

demos/aurelia/src/examples/slickgrid/example05.ts

@@ -18,7 +18,7 @@ const PERCENT_HTML_ESCAPED = '%25';
 
 export class Example05 {
   aureliaGrid!: AureliaGridInstance;
-  columnDefinitions: Column[] = [];
+  columns: Column[] = [];
   gridOptions!: GridOption;
   dataset: any[] = [];
   hideSubTitle = false;
@@ -45,7 +45,7 @@ export class Example05 {
   }
 
   defineGrid() {
-    this.columnDefinitions = [
+    this.columns = [
       {
         id: 'name',
         name: 'Name',

demos/aurelia/src/examples/slickgrid/example06.html

@@ -154,7 +154,7 @@ <h2>
 
 <aurelia-slickgrid
   grid-id="grid6"
-  columns.bind="columnDefinitions"
+  columns.bind="columns"
   options.bind="gridOptions"
   dataset.bind="dataset"
   on-aurelia-grid-created.trigger="aureliaGridReady($event.detail)"

demos/aurelia/src/examples/slickgrid/example06.ts

@@ -26,7 +26,7 @@ const FAKE_SERVER_DELAY = 250;
 export class Example06 {
   isWithCursor = false;
   aureliaGrid!: AureliaGridInstance;
-  columnDefinitions: Column[] = [];
+  columns: Column[] = [];
   gridOptions!: GridOption;
   dataset: any[] = [];
   metrics!: Metrics;
@@ -58,7 +58,7 @@ export class Example06 {
   }
 
   defineGrid() {
-    this.columnDefinitions = [
+    this.columns = [
       {
         id: 'name',
         field: 'name',

demos/aurelia/src/examples/slickgrid/example07.html

@@ -37,7 +37,7 @@ <h2>
 <h5>Grid 1</h5>
 <aurelia-slickgrid
   grid-id="grid7-1"
-  columns.bind="columnDefinitions1"
+  columns.bind="columns1"
   options.bind="gridOptions1"
   dataset.bind="dataset1"
   on-aurelia-grid-created.trigger="aureliaGrid1Ready($event.detail)"
@@ -47,7 +47,7 @@ <h5>Grid 1</h5>
 <h5>Grid 2 - <span class="subtitle">with both Header Buttons & Menus</span></h5>
 <aurelia-slickgrid
   grid-id="grid7-2"
-  columns.bind="columnDefinitions2"
+  columns.bind="columns2"
   options.bind="gridOptions2"
   dataset.bind="dataset2"
   on-aurelia-grid-created.trigger="aureliaGrid2Ready($event.detail)"

demos/aurelia/src/examples/slickgrid/example07.ts

@@ -5,8 +5,8 @@ let columns1WithHighlightingById: any = {};
 let columns2WithHighlightingById: any = {};
 
 export class Example07 {
-  columnDefinitions1: Column[] = [];
-  columnDefinitions2: Column[] = [];
+  columns1: Column[] = [];
+  columns2: Column[] = [];
   gridOptions1!: GridOption;
   gridOptions2!: GridOption;
   dataset1: any[] = [];
@@ -37,8 +37,8 @@ export class Example07 {
   }
 
   defineGrid() {
-    this.columnDefinitions1 = [];
-    this.columnDefinitions2 = [];
+    this.columns1 = [];
+    this.columns2 = [];
 
     this.gridOptions1 = {
       enableAutoResize: true,
@@ -210,7 +210,7 @@ export class Example07 {
     }
 
     // assign column definitions only once
-    this[`columnDefinitions${gridNo}`] = cols;
+    this[`columns${gridNo}`] = cols;
 
     return mockDataset;
   }

demos/aurelia/src/examples/slickgrid/example08.html

@@ -53,7 +53,7 @@ <h2>
 
   <aurelia-slickgrid
     grid-id="grid8"
-    columns.bind="columnDefinitions"
+    columns.bind="columns"
     options.bind="gridOptions"
     dataset.bind="dataset"
     on-aurelia-grid-created.trigger="aureliaGridReady($event.detail)"

demos/aurelia/src/examples/slickgrid/example08.ts

@@ -5,7 +5,7 @@ import './example08.scss'; // provide custom CSS/SASS styling
 
 export class Example08 {
   aureliaGrid!: AureliaGridInstance;
-  columnDefinitions: Column[] = [];
+  columns: Column[] = [];
   gridOptions!: GridOption;
   dataset: any[] = [];
   hideSubTitle = false;
@@ -32,7 +32,7 @@ export class Example08 {
   }
 
   defineGrid() {
-    this.columnDefinitions = [
+    this.columns = [
       { id: 'title', name: 'Title', field: 'title', nameKey: 'TITLE' },
       { id: 'duration', name: 'Duration', field: 'duration', nameKey: 'DURATION', sortable: true },
       { id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', sortable: true },
@@ -41,7 +41,7 @@ export class Example08 {
       { id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', formatter: Formatters.checkmarkMaterial },
     ];
 
-    this.columnDefinitions.forEach((columnDef) => {
+    this.columns.forEach((columnDef) => {
       columnDef.header = {
         menu: {
           commandItems: [

demos/aurelia/src/examples/slickgrid/example09.html

@@ -43,7 +43,7 @@ <h2>
 
 <aurelia-slickgrid
   grid-id="grid9"
-  columns.bind="columnDefinitions"
+  columns.bind="columns"
   dataset.bind="dataset"
   options.bind="gridOptions"
   on-aurelia-grid-created.trigger="aureliaGridReady($event.detail)"

demos/aurelia/src/examples/slickgrid/example09.ts

@@ -14,7 +14,7 @@ import './example09.scss'; // provide custom CSS/SASS styling
 
 export class Example09 {
   aureliaGrid!: AureliaGridInstance;
-  columnDefinitions: Column[] = [];
+  columns: Column[] = [];
   gridOptions!: GridOption;
   dataset: any[] = [];
   dataView!: SlickDataView;
@@ -44,7 +44,7 @@ export class Example09 {
   }
 
   defineGrid() {
-    this.columnDefinitions = [
+    this.columns = [
       { id: 'title', name: 'Title', field: 'title', nameKey: 'TITLE', filterable: true },
       {
         id: 'duration',

demos/aurelia/src/examples/slickgrid/example10.html

@@ -53,7 +53,7 @@ <h2>
 <div class="overflow-hidden">
   <aurelia-slickgrid
     grid-id="grid1"
-    columns.bind="columnDefinitions1"
+    columns.bind="columns1"
     options.bind="gridOptions1"
     dataset.bind="dataset1"
     on-aurelia-grid-created.trigger="aureliaGrid1Ready($event.detail)"
@@ -93,7 +93,7 @@ <h2>
 <div class="overflow-hidden">
   <aurelia-slickgrid
     grid-id="grid2"
-    columns.bind="columnDefinitions2"
+    columns.bind="columns2"
     options.bind="gridOptions2"
     dataset.bind="dataset2"
     on-aurelia-grid-created.trigger="aureliaGrid2Ready($event.detail)"

demos/aurelia/src/examples/slickgrid/example10.ts

@@ -7,8 +7,8 @@ export class Example10 {
 
   aureliaGrid1!: AureliaGridInstance;
   aureliaGrid2!: AureliaGridInstance;
-  columnDefinitions1: Column[] = [];
-  columnDefinitions2: Column[] = [];
+  columns1: Column[] = [];
+  columns2: Column[] = [];
   gridOptions1!: GridOption;
   gridOptions2!: GridOption;
   dataset1: any[] = [];
@@ -39,7 +39,7 @@ export class Example10 {
 
   /* Define grid Options and Columns */
   defineGrids() {
-    this.columnDefinitions1 = [
+    this.columns1 = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, filterable: true },
       { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: 'number', filterable: true },
       {
@@ -92,7 +92,7 @@ export class Example10 {
       },
     ];
 
-    this.columnDefinitions2 = [
+    this.columns2 = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, filterable: true },
       { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: 'number', filterable: true },
       {