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

Commit 8cab599

Browse files
author
bikrant
committed
updated documentation for styles.
1 parent cb6ec6f commit 8cab599

File tree

1 file changed

+40
-3
lines changed

1 file changed

+40
-3
lines changed

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

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ You need to install its dependencies:
55
```bash
66
# JS file
77
npm install datatables.net-fixedcolumns --save
8-
# CSS file
9-
npm install datatables.net-fixedcolumns-bs4 --save
108
```
119

1210
##### angular.json
@@ -22,7 +20,6 @@ Add the dependencies in the scripts and styles attributes:
2220
"options": {
2321
"styles": [
2422
...
25-
"node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css"
2623
],
2724
"scripts": [
2825
...
@@ -31,3 +28,43 @@ Add the dependencies in the scripts and styles attributes:
3128
...
3229
}
3330
```
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+
```

0 commit comments

Comments
 (0)