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

Commit 2841c89

Browse files
shanmukhatejashanmukhateja
authored
Merge pull request #1761 from bikos/FixedColumnExtensionAdded
2 parents 861f94b + 8cab599 commit 2841c89

13 files changed

+343
-6
lines changed

‎demo/angular.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@
5858
"node_modules/prismjs/components/prism-bash.min.js",
5959
"node_modules/prismjs/plugins/toolbar/prism-toolbar.min.js",
6060
"node_modules/clipboard/dist/clipboard.min.js",
61-
"node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
61+
"node_modules/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js",
62+
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
6263
],
6364
"vendorChunk": true,
6465
"extractLicenses": false,
@@ -123,7 +124,8 @@
123124
"node_modules/datatables.net-buttons/js/buttons.print.js",
124125
"node_modules/datatables.net-colreorder/js/dataTables.colReorder.js",
125126
"node_modules/datatables.net-responsive/js/dataTables.responsive.js",
126-
"node_modules/datatables.net-select/js/dataTables.select.js"
127+
"node_modules/datatables.net-select/js/dataTables.select.js",
128+
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
127129
],
128130
"styles": [
129131
"node_modules/datatables.net-dt/css/jquery.dataTables.css",

‎demo/package-lock.json

+25-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
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",
3435
"datatables.net-responsive": "^2.2.9",
3536
"datatables.net-responsive-dt": "^2.2.9",
3637
"datatables.net-scroller": "^2.0.5",

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

+3
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

+2
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

+5
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

+6
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

+97
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

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
##### NPM
2+
3+
You need to install its dependencies:
4+
5+
```bash
6+
# JS file
7+
npm install datatables.net-fixedcolumns --save
8+
```
9+
10+
##### angular.json
11+
12+
Add the dependencies in the scripts and styles attributes:
13+
14+
```json
15+
{
16+
"projects": {
17+
"your-app-name": {
18+
"architect": {
19+
"build": {
20+
"options": {
21+
"styles": [
22+
...
23+
],
24+
"scripts": [
25+
...
26+
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js"
27+
],
28+
...
29+
}
30+
```
31+
32+
#### Update CSS
33+
34+
Update your global style ( genreally styles.css ) as
35+
36+
```css
37+
/** Fixed columns css
38+
39+
These classes are injected by fixed columns extensions
40+
and can be tweaked here to match the colors of headers and body
41+
to hide the scrolling element behind the fixed header.
42+
43+
*/
44+
45+
table.dataTable thead tr > .dtfc-fixed-left,
46+
table.dataTable thead tr > .dtfc-fixed-right,
47+
table.dataTable tfoot tr > .dtfc-fixed-left,
48+
table.dataTable tfoot tr > .dtfc-fixed-right {
49+
top: 0;
50+
bottom: 0;
51+
z-index: 3;
52+
background-color: white;
53+
}
54+
55+
table.dataTable tbody tr > .dtfc-fixed-left,
56+
table.dataTable tbody tr > .dtfc-fixed-right {
57+
z-index: 1;
58+
background-color: white;
59+
}
60+
61+
div.dtfc-left-top-blocker,
62+
div.dtfc-right-top-blocker {
63+
background-color: white;
64+
}
65+
```
66+
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.
67+
68+
```bash
69+
npm install datatables.net-fixedcolumns-bs4 --save
70+
```

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

+3
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

+3
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)