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

Commit 8804810

Browse files
l-linl-lin
committed
Add colreorder extension example
1 parent 2de2c6e commit 8804810

10 files changed

+199
-5
lines changed

‎demo/.angular-cli.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"styles": [
2424
"../node_modules/datatables.net-dt/css/jquery.dataTables.css",
2525
"../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
26+
"../node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
2627
"../node_modules/materialize-css/dist/css/materialize.css",
2728
"styles.css"
2829
],
@@ -34,7 +35,8 @@
3435
"../node_modules/datatables.net-buttons/js/buttons.colVis.js",
3536
"../node_modules/datatables.net-buttons/js/buttons.flash.js",
3637
"../node_modules/datatables.net-buttons/js/buttons.html5.js",
37-
"../node_modules/datatables.net-buttons/js/buttons.print.js"
38+
"../node_modules/datatables.net-buttons/js/buttons.print.js",
39+
"../node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
3840
],
3941
"environmentSource": "environments/environment.ts",
4042
"environments": {

‎demo/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
"datatables.net": "1.10.13",
2828
"datatables.net-buttons": "2.2.0",
2929
"datatables.net-buttons-dt": "1.3.1",
30+
"datatables.net-colreorder": "1.3.2",
31+
"datatables.net-colreorder-dt": "1.3.2",
3032
"datatables.net-dt": "1.10.13",
3133
"datatables.net-responsive": "2.1.1",
3234
"datatables.net-scroller": "1.4.2",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ <h3>
5858
<li class="bold"><a class="collapsible-header waves-effect waves-teal">Using DT extensions</a>
5959
<div class="collapsible-body">
6060
<ul>
61-
<li><a routerLink="/extensions/buttons-extension">Buttons extension</a></li>
61+
<li><a routerLink="/extensions/buttons">Buttons extension</a></li>
62+
<li><a routerLink="/extensions/colreorder">ColReoreder extension</a></li>
6263
</ul>
6364
</div>
6465
</li>

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ import { RowClickEventSnippetComponent } from './advanced/row-click-event-snippe
3737
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
3838
import { ButtonsExtensionSnippetComponent } from './extensions/buttons-extension-snippet.component';
3939
import { ButtonsExtensionConfigurationComponent } from './extensions/buttons-extension-configuration.component';
40+
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
41+
import { ColreorderExtensionSnippetComponent } from './extensions/colreorder-extension-snippet.component';
42+
import { ColreorderExtensionConfigurationComponent } from './extensions/colreorder-extension-configuration.component';
4043

4144
@NgModule({
4245
declarations: [
@@ -64,7 +67,10 @@ import { ButtonsExtensionConfigurationComponent } from './extensions/buttons-ext
6467

6568
ButtonsExtensionComponent,
6669
ButtonsExtensionSnippetComponent,
67-
ButtonsExtensionConfigurationComponent
70+
ButtonsExtensionConfigurationComponent,
71+
ColreorderExtensionComponent,
72+
ColreorderExtensionSnippetComponent,
73+
ColreorderExtensionConfigurationComponent
6874
],
6975
imports: [
7076
BrowserModule,

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { RerenderComponent } from './advanced/rerender.component';
1515
import { RowClickEventComponent } from './advanced/row-click-event.component';
1616

1717
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
18+
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
1819

1920
const routes: Routes = [
2021
{
@@ -63,8 +64,12 @@ const routes: Routes = [
6364
component: RowClickEventComponent
6465
},
6566
{
66-
path: 'extensions/buttons-extension',
67+
path: 'extensions/buttons',
6768
component: ButtonsExtensionComponent
69+
},
70+
{
71+
path: 'extensions/colreorder',
72+
component: ColreorderExtensionComponent
6873
}
6974
];
7075

‎demo/src/app/extensions/buttons-extension.component.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,12 @@ export class ButtonsExtensionComponent implements OnInit {
2828
'columnsToggle',
2929
'colvis',
3030
'copy',
31-
'print',
31+
{
32+
extend: 'csv',
33+
text: 'CSV export',
34+
fieldSeparator: ';',
35+
exportOption: [1, 2, 3]
36+
},
3237
'excel',
3338
{
3439
text: 'Some button',

‎demo/src/app/extensions/colreorder-extension-configuration.component.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-colreorder-extension-configuration',
5+
template: `
6+
<p class="caption">
7+
You can use the <a href="https://datatables.net/extensions/colreorder/">ColReorder extension</a> with angular-datatables.
8+
</p>
9+
<div class="col s12">
10+
<h4>NPM</h4>
11+
<p>You need to install its dependencies:</p>
12+
<section [innerHTML]="npmInstallSnippet" highlight-js-content=".bash"></section>
13+
</div>
14+
<div class="col s12">
15+
<h4 id="angular-cli">.angular-cli.json</h4>
16+
<p>Add the dependencies in the scripts and styles attributes:</p>
17+
<section [innerHTML]="angularCliJsonSnippet" highlight-js-content=".json"></section>
18+
</div>
19+
`
20+
})
21+
export class ColreorderExtensionConfigurationComponent {
22+
npmInstallSnippet = `
23+
<pre>
24+
<code class="bash highlight"># JS file
25+
npm install datatables.net-colreorder --save
26+
# CSS file
27+
npm install datatables.net-colreorder-dt --save
28+
</pre>`;
29+
30+
angularCliJsonSnippet = `
31+
<pre>
32+
<code class="json highlight">{
33+
"apps": [
34+
{
35+
...
36+
"styles": [
37+
...
38+
"../node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
39+
],
40+
"scripts": [
41+
...
42+
"../node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
43+
],
44+
...
45+
}
46+
]
47+
}</code>
48+
</pre>
49+
`;
50+
}

‎demo/src/app/extensions/colreorder-extension-snippet.component.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-colreorder-extension-snippet',
5+
template: `
6+
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
8+
<section [innerHTML]="htmlSnippet" highlight-js-content=".xml"></section>
9+
</div>
10+
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
12+
<section [innerHTML]="tsSnippet" highlight-js-content=".typescript"></section>
13+
</div>
14+
`
15+
})
16+
export class ColreorderExtensionSnippetComponent {
17+
htmlSnippet = `
18+
<pre>
19+
<code class="xml highlight">&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;</code>
20+
</pre>
21+
`;
22+
23+
tsSnippet = `
24+
<pre>
25+
<code class="typescript highlight">import { Component, OnInit } from '@angular/core';
26+
27+
@Component({
28+
selector: 'app-colreorder-extension',
29+
templateUrl: 'colreorder-extension.component.html'
30+
})
31+
export class ColreorderExtensionComponent implements OnInit {
32+
// Must be declared as "any", not as "DataTables.Settings"
33+
dtOptions: any = {};
34+
35+
ngOnInit(): void {
36+
this.dtOptions = {
37+
ajax: 'data/data.json',
38+
columns: [{
39+
title: 'No move me!',
40+
data: 'id'
41+
}, {
42+
title: 'Try to move me!',
43+
data: 'firstName'
44+
}, {
45+
title: 'You cannot move me! *evil laugh*',
46+
data: 'lastName'
47+
}],
48+
dom: 'Rt',
49+
// Use this attribute to enable colreorder
50+
colReorder: {
51+
order: [1, 0, 2],
52+
fixedColumnsRight: 2
53+
}
54+
};
55+
}
56+
}
57+
</code>
58+
</pre>
59+
`;
60+
}

‎demo/src/app/extensions/colreorder-extension.component.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<div class="section banner">
2+
<div class="container">
3+
<div class="row">
4+
<div class="col s12 m9">
5+
<h1 class="header center-on-small-only">DataTables ColReorder extension</h1>
6+
</div>
7+
</div>
8+
</div>
9+
</div>
10+
<div class="container">
11+
<div class="row">
12+
<div class="col s12 m9 l12">
13+
<div class="section">
14+
<app-colreorder-extension-configuration></app-colreorder-extension-configuration>
15+
<div class="col s12 m9 l12 showcase-tabs">
16+
<ul class="anchor-links">
17+
<li class="col s4"><a class="waves-effect btn" href="#preview">Preview</a></li>
18+
<li class="col s4"><a class="waves-effect btn" href="#html">HTML</a></li>
19+
<li class="col s3"><a class="waves-effect btn" href="#ts">Typescript</a></li>
20+
</ul>
21+
</div>
22+
<div id="preview" class="col s12 m9 l12">
23+
<h4 class="header">Preview</h4>
24+
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
25+
</div>
26+
<app-colreorder-extension-snippet></app-colreorder-extension-snippet>
27+
</div>
28+
29+
</div>
30+
</div>
31+
</div>

‎demo/src/app/extensions/colreorder-extension.component.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-colreorder-extension',
5+
templateUrl: 'colreorder-extension.component.html'
6+
})
7+
export class ColreorderExtensionComponent implements OnInit {
8+
// Must be declared as "any", not as "DataTables.Settings"
9+
dtOptions: any = {};
10+
11+
ngOnInit(): void {
12+
this.dtOptions = {
13+
ajax: 'data/data.json',
14+
columns: [{
15+
title: 'No move me!',
16+
data: 'id'
17+
}, {
18+
title: 'Try to move me!',
19+
data: 'firstName'
20+
}, {
21+
title: 'You cannot move me! *evil laugh*',
22+
data: 'lastName'
23+
}],
24+
dom: 'Rt',
25+
// Use this attribute to enable colreorder
26+
colReorder: {
27+
order: [1, 0, 2],
28+
fixedColumnsRight: 2
29+
}
30+
};
31+
}
32+
}

0 commit comments

Comments
 (0)