Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 62dba9e

Browse files
author
bikrant
committed
Fixed columns extension documentation added
1 parent 861f94b commit 62dba9e

12 files changed

+290
-8
lines changed

‎demo/angular.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
"node_modules/materialize-css/dist/css/materialize.css",
3434
"node_modules/prism-themes/themes/prism-material-dark.css",
3535
"src/styles.css",
36-
"node_modules/prismjs/plugins/toolbar/prism-toolbar.css"
36+
"node_modules/prismjs/plugins/toolbar/prism-toolbar.css",
37+
"node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css"
3738
],
3839
"scripts": [
3940
"node_modules/jquery/dist/jquery.js",
@@ -58,7 +59,8 @@
5859
"node_modules/prismjs/components/prism-bash.min.js",
5960
"node_modules/prismjs/plugins/toolbar/prism-toolbar.min.js",
6061
"node_modules/clipboard/dist/clipboard.min.js",
61-
"node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
62+
"node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js",
63+
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
6264
],
6365
"vendorChunk": true,
6466
"extractLicenses": false,
@@ -123,7 +125,8 @@
123125
"node_modules/datatables.net-buttons/js/buttons.print.js",
124126
"node_modules/datatables.net-colreorder/js/dataTables.colReorder.js",
125127
"node_modules/datatables.net-responsive/js/dataTables.responsive.js",
126-
"node_modules/datatables.net-select/js/dataTables.select.js"
128+
"node_modules/datatables.net-select/js/dataTables.select.js",
129+
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
127130
],
128131
"styles": [
129132
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
@@ -132,7 +135,8 @@
132135
"node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
133136
"node_modules/datatables.net-select-dt/css/select.dataTables.css",
134137
"node_modules/materialize-css/dist/css/materialize.css",
135-
"src/styles.css"
138+
"src/styles.css",
139+
"node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css"
136140
],
137141
"assets": [
138142
"src/assets",

‎demo/package-lock.json

Lines changed: 34 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@
3131
"datatables.net-colreorder": "^1.5.5",
3232
"datatables.net-colreorder-dt": "^1.5.5",
3333
"datatables.net-dt": "^1.11.3",
34+
"datatables.net-fixedcolumns": "^4.3.0",
35+
"datatables.net-fixedcolumns-bs4": "^4.3.0",
3436
"datatables.net-responsive": "^2.2.9",
3537
"datatables.net-responsive-dt": "^2.2.9",
3638
"datatables.net-scroller": "^2.0.5",

‎demo/src/app/app.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,9 @@ <h3>
110110
<li>
111111
<a class="waves-effect waves-blue" routerLink="/extensions/select">Select extension</a>
112112
</li>
113+
<li>
114+
<a class="waves-effect waves-blue" routerLink="/extensions/fixed-columns">Fixed Columns extension</a>
115+
</li>
113116
</ul>
114117
</div>
115118
</li>

‎demo/src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { RouterLinkComponent } from './advanced/router-link.component';
3232
// Using extension examples
3333
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
3434
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
35+
import { FixedColumnsExtensionComponent } from './extensions/fixed-columns-extension.component';
3536
import { ResponsiveExtensionComponent } from './extensions/responsive-extension.component';
3637
import { SelectExtensionComponent } from './extensions/select-extension.component';
3738
import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
@@ -73,6 +74,7 @@ import { NewServerSideComponent } from './basic/new-server-side/new-server-side.
7374

7475
ButtonsExtensionComponent,
7576
ColreorderExtensionComponent,
77+
FixedColumnsExtensionComponent,
7678
ResponsiveExtensionComponent,
7779
SelectExtensionComponent,
7880
UsingNgPipeComponent,

‎demo/src/app/app.routing.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { UsingNgTemplateRefComponent } from './advanced/using-ng-template-ref.co
3030
import { MoreHelpComponent } from './more-help/more-help.component';
3131
import { WithAjaxCallbackComponent } from './basic/with-ajax-callback/with-ajax-callback.component';
3232
import { NewServerSideComponent } from './basic/new-server-side/new-server-side.component';
33+
import { FixedColumnsExtensionComponent } from './extensions/fixed-columns-extension.component';
3334

3435
const routes: Routes = [
3536
{
@@ -129,6 +130,10 @@ const routes: Routes = [
129130
path: 'extensions/colreorder',
130131
component: ColreorderExtensionComponent
131132
},
133+
{
134+
path: 'extensions/fixed-columns',
135+
component: FixedColumnsExtensionComponent
136+
},
132137
{
133138
path: 'extensions/responsive',
134139
component: ResponsiveExtensionComponent

‎demo/src/app/extensions/fixed-columns-extension.component.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<ng-template #preview>
2+
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
3+
</ng-template>
4+
<app-base-demo [pageTitle]="pageTitle" [mdIntro]="mdIntro" [mdInstall]="mdInstall" [mdHTML]="mdHTML" [mdTS]="mdTS"
5+
[template]="preview">
6+
</app-base-demo>

‎demo/src/app/extensions/fixed-columns-extension.component.ts

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-fixed-columns-extension',
5+
templateUrl: 'fixed-columns-extension.component.html'
6+
})
7+
export class FixedColumnsExtensionComponent implements OnInit {
8+
9+
pageTitle = 'DataTables Fixed Columns extension';
10+
mdIntro = 'assets/docs/extensions/fixedcolumns/intro.md';
11+
mdInstall = 'assets/docs/extensions/fixedcolumns/installation.md';
12+
mdHTML = 'assets/docs/extensions/fixedcolumns/source-html.md';
13+
mdTS = 'assets/docs/extensions/fixedcolumns/source-ts.md';
14+
15+
// Must be declared as "any", not as "DataTables.Settings"
16+
dtOptions: any = {};
17+
18+
ngOnInit(): void {
19+
this.dtOptions = {
20+
ajax: 'data/data.json',
21+
columns: [{
22+
title: 'ID',
23+
data: 'id'
24+
}, {
25+
title: 'First name',
26+
data: 'firstName'
27+
}, {
28+
title: 'Last name',
29+
data: 'lastName'
30+
},
31+
{
32+
title: 'Last name',
33+
data: 'lastName'
34+
},
35+
{
36+
title: 'Last name',
37+
data: 'lastName'
38+
},
39+
{
40+
title: 'Last name',
41+
data: 'lastName'
42+
},
43+
{
44+
title: 'Last name',
45+
data: 'lastName'
46+
},
47+
{
48+
title: 'Last name',
49+
data: 'lastName'
50+
},
51+
{
52+
title: 'Last name',
53+
data: 'lastName'
54+
},
55+
{
56+
title: 'Last name',
57+
data: 'lastName'
58+
},
59+
{
60+
title: 'Last name',
61+
data: 'lastName'
62+
}, {
63+
title: 'Last name',
64+
data: 'lastName'
65+
},
66+
{
67+
title: 'Last name',
68+
data: 'lastName'
69+
}, {
70+
title: 'Last name',
71+
data: 'lastName'
72+
},
73+
{
74+
title: 'Last name',
75+
data: 'lastName'
76+
}, {
77+
title: 'Last name',
78+
data: 'lastName'
79+
},
80+
{
81+
title: 'Last name',
82+
data: 'lastName'
83+
}, {
84+
title: 'Last name',
85+
data: 'lastName'
86+
}
87+
88+
],
89+
// Make sure that scrollX is set to true for this to work!
90+
scrollX: true,
91+
fixedColumns: {
92+
left: 3,
93+
right: 0
94+
},
95+
};
96+
}
97+
}

‎demo/src/assets/docs/extensions/fixedcolumns/installation.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
##### NPM
2+
3+
You need to install its dependencies:
4+
5+
```bash
6+
# JS file
7+
npm install datatables.net-fixedcolumns --save
8+
# CSS file
9+
npm install datatables.net-fixedcolumns-bs4 --save
10+
```
11+
12+
##### angular.json
13+
14+
Add the dependencies in the scripts and styles attributes:
15+
16+
```json
17+
{
18+
"projects": {
19+
"your-app-name": {
20+
"architect": {
21+
"build": {
22+
"options": {
23+
"styles": [
24+
...
25+
"node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css"
26+
],
27+
"scripts": [
28+
...
29+
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
30+
],
31+
...
32+
}
33+
```

‎demo/src/assets/docs/extensions/fixedcolumns/intro.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
You can use the [Fixed Columns Extension](https://datatables.net/extensions/fixedcolumns/) with angular-datatables.<br>
2+
This extension comes handy when you have a large number of columns and want to freeze
3+
certain columns on either side while scrolling along X axis.

‎demo/src/assets/docs/extensions/fixedcolumns/source-html.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
3+
```

0 commit comments

Comments
 (0)