datatable in ionic5

 https://www.positronx.io/create-ionic-data-table-with-ngx-datatable/
npm install @swimlane/ngx-datatable --save

import below code in app.module.ts

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
NgxDatatableModule

First, go to assets folder and create styles > ngx-datatable folder inside the assets folder.

add below lines in 

# node_modules > @swimlane > ngx-datatable > index.css

# node_modules > @swimlane > ngx-datatable > themes > bootstrap.css

# node_modules > @swimlane > ngx-datatable > themes > dark.css

# node_modules > @swimlane > ngx-datatable > themes > material.css

Copy the fonts folder and icons.css from the following path..

# node_modules > @swimlane > ngx-datatable > assets > fonts

# node_modules > @swimlane > ngx-datatable > assets > icons.css

Next, paste data table theme filesfonts folder and icons.css file inside the following path.

# app > assets > styles > ngx-datatable

Now, change the name of these data table files as given below.

_index.css

_bootstrap.css

_dark.css

_icons.css

_material.css

Next, go to app/assets/styles/ngx-datatable/_icons.css file and update data-table @font-face path as given below.

@font-face {
  font-family: 'data-table';
  src: url('./fonts/data-table.eot');
  src: url('./fonts/data-table.eot?#iefix') format('embedded-opentype'), 
    url('./fonts/data-table.woff') format('woff'),
    url('./fonts/data-table.ttf') format('truetype'), 
    url('./fonts/data-table.svg#data-table') format('svg');
  font-weight: normal;
  font-style: normal;
}

Then, we will add the following data table theme paths inside the global CSS file. Add the following path inside the global.scss file.

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

/* NGX Datatable CSS */
@import '~assets/styles/ngx-datatable/_index.css';
@import '~assets/styles/ngx-datatable/_dark.css';
@import '~assets/styles/ngx-datatable/_material.css';
@import '~assets/styles/ngx-datatable/_bootstrap.css';
@import '~assets/styles/ngx-datatable/_icons.css';
CSS

Comments