Skip to content

Commit

Permalink
docs: review basic usage docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding authored Jan 27, 2025
1 parent f05cc0b commit fa13918
Showing 1 changed file with 35 additions and 31 deletions.
66 changes: 35 additions & 31 deletions packages/aurelia-slickgrid/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,40 @@ npm install @slickgrid-universal/excel-export
## License
[MIT License](LICENSE)

## Screenshots

Screenshots from the demo app with the `Bootstrap` theme.

### Slickgrid example with Formatters (last column shown is a custom Formatter)

#### You can also see the Grid Menu opened (aka hambuger menu)

![Default Slickgrid Example](../../screenshots/formatters.png)

### Filter and Sort (clientside with DataView)

![Filter and Sort](../../screenshots/filter_and_sort.png)

### Editors and/or onCellClick

![Editors](../../screenshots/editors.png)

### Pinned (aka frozen) Columns/Rows

![Pinned Columns/Rows](../../screenshots/frozen.png)

### Draggable Grouping & Aggregators

![Draggable Grouping](../../screenshots/draggable-grouping.png)

### Slickgrid Example with Server Side (Filter/Sort/Pagination)
#### Comes with OData & GraphQL support (you can implement custom too)

![Slickgrid Server Side](../../screenshots/pagination.png)
#### Basic Grid

```ts
import { type Column, type GridOption } from 'aurelia-slickgrid';

export class Example {
columnDefinitions: Column[] = [];
gridOptions: GridOption;
dataset: any[] = [];

constructor() {
this.columnDefinitions = [
{ id: 'firstName', name: 'First Name', field: 'firstName'},
{ id: 'lastName', name: 'Last Name', field: 'lastName'},
{ id: 'age', name: 'Age', field: 'age' }
];
}

attached() {
this.dataset = [
{ id: 1, firstName: 'John', lastName: 'Doe', age: 20 },
{ id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 }
];
this.gridOptions = { /*...*/ }; // optional grid options
}
}
```

### Composite Editor Modal Windows
![Composite Editor Modal](../../screenshots/composite-editor.png)
```html
<aurelia-slickgrid
grid-id="grid2"
column-definitions.bind="columnDefinitions"
grid-options.bind="gridOptions"
dataset.bind="dataset">
</aurelia-slickgrid>
```

0 comments on commit fa13918

Please sign in to comment.