Recommend a grid/table component

Ionic Framework
1

I need to display a list of data from firestore. Can anyone recommend a good grid or table package to use?
Most of the packages I have seen are based on Angular and I would prefer an example which uses Ionic 3.

2

Ionic is based Angular (currently), so you can leverage other Angular solutions. I have used the Angular Material’s table in a project.

3

Thanks spent a few hours working with ag-grid in Ionic3 and finally got it working.

4

How did you manage to make it work? I can’t load the external css files

5

I had the same problem - I solved it by opening the css files and copy/paste them into the app.sccs file.
Since them I have tried it in Ionic 4 and the links to the css files works OK with it.
If you are sticking with Ionic 3 then perhaps try copy and paste the css files into a new sccs file and linking to the sccs files - I have not tried that but it might work.
If you want I could send you my attempt.

6

I found the solution!

  1. externalize your sass.config.js (you can find it under node_modules@ionic\app-scripts\config)
  2. override only the includePath property like in the example below
module.exports = {
  /**
   * includePaths: Used by node-sass for additional
   * paths to search for sass imports by just name.
   */
  includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/ag-grid-community/dist/styles'
  ]
};
  1. in your package.json include your sass custom configuration file like in the example below
"config": {
    "ionic_webpack": "./webpack.config.js",
    "ionic_uglifyjs": "./uglifyjs.config.js",
    "ionic_sass": "./sass.config.js"
  }
  1. then in the page that uses the ag-grid style include the desired styles
// importing the custom ag-grid css and theme
@import 'ag-grid';
@import 'ag-theme-material';
page-report {
}

That’s all! :wink:

7

That is a really good solution!