diff --git a/demo/angular.json b/demo/angular.json index 2330dc66..1e8883ab 100644 --- a/demo/angular.json +++ b/demo/angular.json @@ -58,7 +58,8 @@ "node_modules/prismjs/components/prism-bash.min.js", "node_modules/prismjs/plugins/toolbar/prism-toolbar.min.js", "node_modules/clipboard/dist/clipboard.min.js", - "node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" + "node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js", + "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js" ], "vendorChunk": true, "extractLicenses": false, @@ -123,7 +124,8 @@ "node_modules/datatables.net-buttons/js/buttons.print.js", "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js", "node_modules/datatables.net-responsive/js/dataTables.responsive.js", - "node_modules/datatables.net-select/js/dataTables.select.js" + "node_modules/datatables.net-select/js/dataTables.select.js", + "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js" ], "styles": [ "node_modules/datatables.net-dt/css/jquery.dataTables.css", diff --git a/demo/package-lock.json b/demo/package-lock.json index 691a247e..d6b156a8 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -20,13 +20,15 @@ "@types/marked": "^4.3.0", "angular-datatables": "^16.0.0", "clipboard": "^2.0.8", - "core-js": "^3.19.1", + "core-js": "^3.23.3", "datatables.net": "^1.11.3", "datatables.net-buttons": "^2.0.1", "datatables.net-buttons-dt": "^2.0.1", "datatables.net-colreorder": "^1.5.5", "datatables.net-colreorder-dt": "^1.5.5", "datatables.net-dt": "^1.11.3", + "datatables.net-fixedcolumns": "^4.3.0", + "datatables.net-fixedcolumns-bs4": "^4.3.0", "datatables.net-responsive": "^2.2.9", "datatables.net-responsive-dt": "^2.2.9", "datatables.net-scroller": "^2.0.5", @@ -6271,9 +6273,9 @@ } }, "node_modules/datatables.net": { - "version": "1.13.4", - "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.4.tgz", - "integrity": "sha512-yzhArTOB6tPO2QFKm1z3hA4vabtt2hRvgw8XLsT1xqEirinfGYqWDiWXlkTPTaJv2e7gG+Kf985sXkzBFlGrGQ==", + "version": "1.13.8", + "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.8.tgz", + "integrity": "sha512-2pDamr+GUwPTby2OgriVB9dR9ftFKD2AQyiuCXzZIiG4d9KkKFQ7gqPfNmG7uj9Tc5kDf+rGj86do4LAb/V71g==", "dependencies": { "jquery": ">=1.7" } @@ -6325,6 +6327,25 @@ "jquery": ">=1.7" } }, + "node_modules/datatables.net-fixedcolumns": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/datatables.net-fixedcolumns/-/datatables.net-fixedcolumns-4.3.0.tgz", + "integrity": "sha512-H2otCswJDHufI4A8k7HUDj25HCB3a44KFnBlYEwYFWdrJayLcYB3I79kBjS8rSCu4rFEp0I9nVLKvWgKlZZgCQ==", + "dependencies": { + "datatables.net": ">=1.13.4", + "jquery": ">=1.7" + } + }, + "node_modules/datatables.net-fixedcolumns-bs4": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/datatables.net-fixedcolumns-bs4/-/datatables.net-fixedcolumns-bs4-4.3.0.tgz", + "integrity": "sha512-iQqN0+/qekGRP/zFxTNSYxnc1Sj65ps+rWRQIRSQLbCt6tndXkjCp1pwT17QmsEELJjnZwArZqxq2zdKTEaHIQ==", + "dependencies": { + "datatables.net-bs4": ">=1.13.4", + "datatables.net-fixedcolumns": ">=4.2.2", + "jquery": ">=1.7" + } + }, "node_modules/datatables.net-responsive": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/datatables.net-responsive/-/datatables.net-responsive-2.4.1.tgz", diff --git a/demo/package.json b/demo/package.json index 185de568..898acba5 100644 --- a/demo/package.json +++ b/demo/package.json @@ -31,6 +31,7 @@ "datatables.net-colreorder": "^1.5.5", "datatables.net-colreorder-dt": "^1.5.5", "datatables.net-dt": "^1.11.3", + "datatables.net-fixedcolumns": "^4.3.0", "datatables.net-responsive": "^2.2.9", "datatables.net-responsive-dt": "^2.2.9", "datatables.net-scroller": "^2.0.5", diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html index 489dd576..0ecd0c5a 100644 --- a/demo/src/app/app.component.html +++ b/demo/src/app/app.component.html @@ -110,6 +110,9 @@

  • Select extension
    • +
  • + Fixed Columns extension +
    • diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts index 44a3bfc4..8d5e4905 100644 --- a/demo/src/app/app.module.ts +++ b/demo/src/app/app.module.ts @@ -32,6 +32,7 @@ import { RouterLinkComponent } from './advanced/router-link.component'; // Using extension examples import { ButtonsExtensionComponent } from './extensions/buttons-extension.component'; import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component'; +import { FixedColumnsExtensionComponent } from './extensions/fixed-columns-extension.component'; import { ResponsiveExtensionComponent } from './extensions/responsive-extension.component'; import { SelectExtensionComponent } from './extensions/select-extension.component'; import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component'; @@ -73,6 +74,7 @@ import { NewServerSideComponent } from './basic/new-server-side/new-server-side. ButtonsExtensionComponent, ColreorderExtensionComponent, + FixedColumnsExtensionComponent, ResponsiveExtensionComponent, SelectExtensionComponent, UsingNgPipeComponent, diff --git a/demo/src/app/app.routing.ts b/demo/src/app/app.routing.ts index 50dd31b8..54b07e4b 100644 --- a/demo/src/app/app.routing.ts +++ b/demo/src/app/app.routing.ts @@ -30,6 +30,7 @@ import { UsingNgTemplateRefComponent } from './advanced/using-ng-template-ref.co import { MoreHelpComponent } from './more-help/more-help.component'; import { WithAjaxCallbackComponent } from './basic/with-ajax-callback/with-ajax-callback.component'; import { NewServerSideComponent } from './basic/new-server-side/new-server-side.component'; +import { FixedColumnsExtensionComponent } from './extensions/fixed-columns-extension.component'; const routes: Routes = [ { @@ -129,6 +130,10 @@ const routes: Routes = [ path: 'extensions/colreorder', component: ColreorderExtensionComponent }, + { + path: 'extensions/fixed-columns', + component: FixedColumnsExtensionComponent + }, { path: 'extensions/responsive', component: ResponsiveExtensionComponent diff --git a/demo/src/app/extensions/fixed-columns-extension.component.html b/demo/src/app/extensions/fixed-columns-extension.component.html new file mode 100644 index 00000000..4d9fa9ad --- /dev/null +++ b/demo/src/app/extensions/fixed-columns-extension.component.html @@ -0,0 +1,6 @@ + +
    +     + + diff --git a/demo/src/app/extensions/fixed-columns-extension.component.ts b/demo/src/app/extensions/fixed-columns-extension.component.ts new file mode 100644 index 00000000..ba111412 --- /dev/null +++ b/demo/src/app/extensions/fixed-columns-extension.component.ts @@ -0,0 +1,97 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-fixed-columns-extension', + templateUrl: 'fixed-columns-extension.component.html' +}) +export class FixedColumnsExtensionComponent implements OnInit { + + pageTitle = 'DataTables Fixed Columns extension'; + mdIntro = 'assets/docs/extensions/fixedcolumns/intro.md'; + mdInstall = 'assets/docs/extensions/fixedcolumns/installation.md'; + mdHTML = 'assets/docs/extensions/fixedcolumns/source-html.md'; + mdTS = 'assets/docs/extensions/fixedcolumns/source-ts.md'; + + // Must be declared as "any", not as "DataTables.Settings" + dtOptions: any = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + } + + ], + // Make sure that scrollX is set to true for this to work! + scrollX: true, + fixedColumns: { + left: 3, + right: 0 + }, + }; + } +} diff --git a/demo/src/assets/docs/extensions/fixedcolumns/installation.md b/demo/src/assets/docs/extensions/fixedcolumns/installation.md new file mode 100644 index 00000000..e6d75477 --- /dev/null +++ b/demo/src/assets/docs/extensions/fixedcolumns/installation.md @@ -0,0 +1,70 @@ +##### NPM + +You need to install its dependencies: + +```bash +# JS file +npm install datatables.net-fixedcolumns --save +``` + +##### angular.json + +Add the dependencies in the scripts and styles attributes: + +```json +{ + "projects": { + "your-app-name": { + "architect": { + "build": { + "options": { + "styles": [ + ... + ], + "scripts": [ + ... + "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js" + ], + ... +} +``` + +#### Update CSS + +Update your global style ( genreally styles.css ) as + + ```css + /** Fixed columns css + + These classes are injected by fixed columns extensions + and can be tweaked here to match the colors of headers and body + to hide the scrolling element behind the fixed header. + + */ + + table.dataTable thead tr > .dtfc-fixed-left, + table.dataTable thead tr > .dtfc-fixed-right, + table.dataTable tfoot tr > .dtfc-fixed-left, + table.dataTable tfoot tr > .dtfc-fixed-right { + top: 0; + bottom: 0; + z-index: 3; + background-color: white; + } + + table.dataTable tbody tr > .dtfc-fixed-left, + table.dataTable tbody tr > .dtfc-fixed-right { + z-index: 1; + background-color: white; + } + + div.dtfc-left-top-blocker, + div.dtfc-right-top-blocker { + background-color: white; + } + ``` + Alternative to writing css to global file, you can also install a supported css file for this extension from npm library and update it inside ``styles`` property in angular.json. + +```bash +npm install datatables.net-fixedcolumns-bs4 --save +``` diff --git a/demo/src/assets/docs/extensions/fixedcolumns/intro.md b/demo/src/assets/docs/extensions/fixedcolumns/intro.md new file mode 100644 index 00000000..4471a41d --- /dev/null +++ b/demo/src/assets/docs/extensions/fixedcolumns/intro.md @@ -0,0 +1,3 @@ +You can use the [Fixed Columns Extension](https://datatables.net/extensions/fixedcolumns/) with angular-datatables.
    +This extension comes handy when you have a large number of columns and want to freeze +certain columns on either side while scrolling along X axis. diff --git a/demo/src/assets/docs/extensions/fixedcolumns/source-html.md b/demo/src/assets/docs/extensions/fixedcolumns/source-html.md new file mode 100644 index 00000000..5c0933e6 --- /dev/null +++ b/demo/src/assets/docs/extensions/fixedcolumns/source-html.md @@ -0,0 +1,3 @@ +```html +
    +``` diff --git a/demo/src/assets/docs/extensions/fixedcolumns/source-ts.md b/demo/src/assets/docs/extensions/fixedcolumns/source-ts.md new file mode 100644 index 00000000..f02a2787 --- /dev/null +++ b/demo/src/assets/docs/extensions/fixedcolumns/source-ts.md @@ -0,0 +1,93 @@ +```typescript +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-select-extension', + templateUrl: 'select-extension.component.html' +}) +export class SelectExtensionComponent implements OnInit { + + // Must be declared as "any", not as "DataTables.Settings" + dtOptions: any = {}; + + ngOnInit(): void { + this.dtOptions = { + ajax: 'data/data.json', + columns: [{ + title: 'ID', + data: 'id' + }, { + title: 'First name', + data: 'firstName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + }, + { + title: 'Last name', + data: 'lastName' + }, { + title: 'Last name', + data: 'lastName' + } + + ], + // Make sure that scrollX is set to true for this to work! + scrollX: true, + fixedColumns: { + left: 3, + right: 0 + }, + }; + } +} +``` diff --git a/demo/src/styles.css b/demo/src/styles.css index f89ab27a..0323fb7d 100644 --- a/demo/src/styles.css +++ b/demo/src/styles.css @@ -154,3 +154,34 @@ div.code-toolbar > .toolbar button { markdown h5:not(markdown.faqMarkdown) { color: #2196f3; } + + +/** Fixed columns css + +These classes are injected by fixed columns extensions +and can be tweaked here to match the colors of headers and body +to hide the scrolling element behind the fixed header. + +*/ + + +table.dataTable thead tr > .dtfc-fixed-left, +table.dataTable thead tr > .dtfc-fixed-right, +table.dataTable tfoot tr > .dtfc-fixed-left, +table.dataTable tfoot tr > .dtfc-fixed-right { + top: 0; + bottom: 0; + z-index: 3; + background-color: white; +} + +table.dataTable tbody tr > .dtfc-fixed-left, +table.dataTable tbody tr > .dtfc-fixed-right { + z-index: 1; + background-color: white; +} + +div.dtfc-left-top-blocker, +div.dtfc-right-top-blocker { + background-color: white; +} \ No newline at end of file