- App to display a responsive table of data from an API, using the Ionic framework with Angular
- Code from Simon Grimm - see 👏 Inspiration below
- Note: to open web links in a new window use: ctrl+click on link
- App gets data from a random user details API and displays it in a responsive table that, upon resizing, reduces the number of columns from 6 (PC screen) to 4 (mobile screen)
- Updated to latest Ionic, Angular etc. note:
tsconfig.jsoncompiler options updated to include"skipLibCheck": true
- Load dependencies using
npm i - To start the server on localhost://8100 type:
ionic serve
bulkDelete()method uses checkbox column result to remove rows checked
// take items checked - this.edit - and filter indexes and coerce into a number
// remove rows with this index using the splice method
bulkDelete() {
console.log('this.edit: ', this.edit); // example: returns {0: true, 1: true, 2: true}
const preDelete = Object.keys(this.edit);
console.log('preDelete', preDelete) // example returns ["0", "1", "2"] - array of strings
const deleteList = preDelete.filter(index => this.edit[index]).map(key => +key); // [0, 1, 2]
while (deleteList.length) { // as long as deleteList is > 0
this.data.splice(deleteList.pop(), 1) // splice each row[item], pop deleteList down each time
}
this.toggleBulkEdit(); // boolean switched to hide bulkEdit ion-button once complete
}- Sort function uses the localeCompare() method to return a number indicating if a reference string comes before or after or is the same as the given string in sort order.
ion-select-optionused to provide drop-down rows per page options. Couldn't work out how to have a default selected value, e.g. 10, currently defaults to the full list until a rows per page option is chosen
- Status: Working
- To-do: Nothing
- Simon Grimm: Youtube video: Building a Responsive Data Table with Ionic Grid.
- Simon Grimms great Ionic site: Devdactic
- Stackoverflow: Error TS2344: Type 'T[K]' does not satisfy the constraint
- N/A
- Repo created by ABateman, email: gomezbateman@yahoo.com