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

Popular posts from this blog

Your app currently targets API level 27 and must target at least API level 28 to ensure it is built on the latest APIs optimized for security and performance. Change your app's target API level to at least 28

ionic project creation

how to install nativescripts required tools and softwares.