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

Commit 52236f5

Browse files
l-linl-lin
committed
doc(#956): Add Resposive example
1 parent 104239a commit 52236f5

11 files changed

+187
-1
lines changed

‎demo/.angular-cli.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"../node_modules/datatables.net-dt/css/jquery.dataTables.css",
2525
"../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css",
2626
"../node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
27+
"../node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
2728
"../node_modules/datatables.net-select-dt/css/select.dataTables.css",
2829
"../node_modules/materialize-css/dist/css/materialize.css",
2930
"styles.css"
@@ -38,6 +39,7 @@
3839
"../node_modules/datatables.net-buttons/js/buttons.html5.js",
3940
"../node_modules/datatables.net-buttons/js/buttons.print.js",
4041
"../node_modules/datatables.net-colreorder/js/dataTables.colReorder.js",
42+
"../node_modules/datatables.net-responsive/js/dataTables.responsive.js",
4143
"../node_modules/datatables.net-select/js/dataTables.select.js"
4244
],
4345
"environmentSource": "environments/environment.ts",

‎demo/package-lock.json

Lines changed: 5 additions & 0 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 & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
"datatables.net-colreorder": "1.4.1",
3131
"datatables.net-colreorder-dt": "1.4.1",
3232
"datatables.net-dt": "1.10.16",
33-
"datatables.net-responsive": "2.2.0",
33+
"datatables.net-responsive": "^2.2.0",
34+
"datatables.net-responsive-dt": "^2.2.0",
3435
"datatables.net-scroller": "1.4.3",
3536
"datatables.net-select": "1.2.3",
3637
"datatables.net-select-dt": "1.2.3",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ <h3>
6262
<ul>
6363
<li><a routerLink="/extensions/buttons">Buttons extension</a></li>
6464
<li><a routerLink="/extensions/colreorder">ColReorder extension</a></li>
65+
<li><a routerLink="/extensions/responsive">Responsive extension</a></li>
6566
<li><a routerLink="/extensions/select">Select extension</a></li>
6667
</ul>
6768
</div>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ import { ButtonsExtensionConfigurationComponent } from './extensions/buttons-ext
4444
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
4545
import { ColreorderExtensionSnippetComponent } from './extensions/colreorder-extension-snippet.component';
4646
import { ColreorderExtensionConfigurationComponent } from './extensions/colreorder-extension-configuration.component';
47+
import { ResponsiveExtensionComponent } from './extensions/responsive-extension.component';
48+
import { ResponsiveExtensionSnippetComponent } from './extensions/responsive-extension-snippet.component';
49+
import { ResponsiveExtensionConfigurationComponent } from './extensions/responsive-extension-configuration.component';
4750
import { SelectExtensionComponent } from './extensions/select-extension.component';
4851
import { SelectExtensionSnippetComponent } from './extensions/select-extension-snippet.component';
4952
import { SelectExtensionConfigurationComponent } from './extensions/select-extension-configuration.component';
@@ -82,6 +85,9 @@ import { SelectExtensionConfigurationComponent } from './extensions/select-exten
8285
ColreorderExtensionComponent,
8386
ColreorderExtensionSnippetComponent,
8487
ColreorderExtensionConfigurationComponent,
88+
ResponsiveExtensionComponent,
89+
ResponsiveExtensionSnippetComponent,
90+
ResponsiveExtensionConfigurationComponent,
8591
SelectExtensionComponent,
8692
SelectExtensionSnippetComponent,
8793
SelectExtensionConfigurationComponent

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { RowClickEventComponent } from './advanced/row-click-event.component';
1818

1919
import { ButtonsExtensionComponent } from './extensions/buttons-extension.component';
2020
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
21+
import { ResponsiveExtensionComponent } from './extensions/responsive-extension.component';
2122
import { SelectExtensionComponent } from './extensions/select-extension.component';
2223

2324
const routes: Routes = [
@@ -82,6 +83,10 @@ const routes: Routes = [
8283
path: 'extensions/colreorder',
8384
component: ColreorderExtensionComponent
8485
},
86+
{
87+
path: 'extensions/responsive',
88+
component: ResponsiveExtensionComponent
89+
},
8590
{
8691
path: 'extensions/select',
8792
component: SelectExtensionComponent

‎demo/src/app/extensions/responsive-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-responsive-extension-configuration',
5+
template: `
6+
<p class="caption">
7+
You can use the <a href="https://datatables.net/extensions/responsive/">Responsive 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 ResponsiveExtensionConfigurationComponent {
22+
npmInstallSnippet = `
23+
<pre>
24+
<code class="bash highlight"># JS file
25+
npm install datatables.net-responsive --save
26+
# CSS file
27+
npm install datatables.net-responsive-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-responsive-dt/css/responsive.dataTables.css",
39+
],
40+
"scripts": [
41+
...
42+
"../node_modules/datatables.net-responsive/js/dataTables.responsive.js"
43+
],
44+
...
45+
}
46+
]
47+
}</code>
48+
</pre>
49+
`;
50+
}

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-responsive-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 ResponsiveExtensionSnippetComponent {
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-responsive-extension',
29+
templateUrl: 'responsive-extension.component.html'
30+
})
31+
export class ResponsiveExtensionComponent 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: 'ID',
40+
data: 'id'
41+
}, {
42+
title: 'First name',
43+
data: 'firstName'
44+
}, {
45+
title: 'Last name',
46+
data: 'lastName',
47+
class: 'none'
48+
}],
49+
// Use this attribute to enable the responsive extension
50+
responsive: true
51+
};
52+
}
53+
}</code>
54+
</pre>
55+
`;
56+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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 Responsive 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-responsive-extension-configuration></app-responsive-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-responsive-extension-snippet></app-responsive-extension-snippet>
27+
</div>
28+
</div>
29+
</div>
30+
</div>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-responsive-extension',
5+
templateUrl: 'responsive-extension.component.html'
6+
})
7+
export class ResponsiveExtensionComponent 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: 'ID',
16+
data: 'id'
17+
}, {
18+
title: 'First name',
19+
data: 'firstName'
20+
}, {
21+
title: 'Last name',
22+
data: 'lastName',
23+
class: 'none'
24+
}],
25+
// Use this attribute to enable the responsive extension
26+
responsive: true
27+
};
28+
}
29+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export class SelectExtensionComponent implements OnInit {
2121
title: 'Last name',
2222
data: 'lastName'
2323
}],
24+
// Use this attribute to enable the select extension
2425
select: true
2526
};
2627
}

0 commit comments

Comments
 (0)