Skip to content

Commit 3aee609

Browse files
iSOLveITiSOLveIT
committed
Enhance GridJS integration with custom scroll listener and improved language settings
1 parent 041ea80 commit 3aee609

File tree

8 files changed

+122
-176
lines changed

8 files changed

+122
-176
lines changed

‎docs/_static/_css/shared.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ svg.sn-flow-chart {
123123
}
124124

125125
table.needs-grid-example {
126-
border: 1px solid var(--color-table-border);
126+
border: 1px solid var(--sn-color-table-border);
127127
}
128128

129129
:root {

‎docs/_static/_css/sphinx_rtd_theme.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,3 @@ div.wy-table-responsive {
1010
overflow-x: auto !important;
1111
}
1212

13-
/* a lot of components, like paragraphs and header, do not have a top margin
14-
so the datatable does not have a gap to the subsequent element
15-
*/
16-
div.dataTables_wrapper {
17-
margin-bottom: 2em;
18-
}

‎sphinx_needs/css/common/needstable.css‎

Lines changed: 89 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -21,86 +21,123 @@ div.needstable_wrapper {
2121
padding: 0;
2222
}
2323

24-
/* These are "overrides" for CSS added by the bundled https://datatables.net JS package */
24+
table.docutils.docutils td, table.docutils.docutils th {
25+
background: var(--sn-color-datatable-body-bg);
26+
border: 1px solid var(--sn-color-table-border);
27+
color: var(--sn-color-datatable-label);
28+
}
2529

26-
table.dataTable {
27-
border-collapse: collapse;
28-
border: none;
30+
table.docutils.docutils th {
31+
border-bottom: 1px solid var(--sn-color-datatable-btn-border);
2932
}
33+
/* GridJS styles for to override the default GridJS styles
34+
to match the Sphinx Needs theme and to ensure a consistent look and feel
35+
with the rest of the Sphinx Needs documentation.
3036
31-
table.dataTable tbody tr {
32-
background-color: var(--sn-color-datatable-body-bg);
37+
The 3 sections of a GridJS container .gridjs-head, .gridjs-wrapper and .gridjs-footer */
38+
div.gridjs-container {
39+
color: var(--sn-color-datatable-label);
3340
}
3441

35-
div.dataTables_length {
36-
margin-bottom: 10px;
42+
div.gridjs-wrapper {
43+
border-radius: 0px;
44+
box-shadow: none;
3745
}
3846

39-
div.dataTables_wrapper {
40-
overflow-x: auto;
41-
padding: 0px 5px;
42-
/*Space needed for table borders */
47+
div.gridjs-footer {
48+
background-color: var(--sn-color-datatable-body-bg);
49+
border: 1px solid var(--sn-color-datatable-btn-border);
50+
box-shadow: none;
51+
padding: 12px;
52+
border-top-width: 0px;
4353
}
4454

45-
.dataTables_wrapper .dataTables_paginate .paginate_button {
46-
padding: 0.15em 0.75em;
47-
background: none;
55+
/* .gridjs-head */
56+
.gridjs-search {
57+
float: left;
4858
}
4959

50-
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
51-
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
52-
background: none;
60+
div.gridjs-download-btns {
61+
float: right;
5362
}
5463

55-
div.dataTables_length select {
56-
background: none;
57-
color: var(--sn-color-datatable-label);
58-
border: 1px solid var(--sn-color-datatable-btn-border);
59-
border-radius: 2px;
64+
div.gridjs-download-btns button {
65+
border-radius: 6px;
66+
outline: 0;
67+
-webkit-user-select: none;
68+
-moz-user-select: none;
69+
user-select: none;
6070
cursor: pointer;
71+
margin-left: 10px;
6172
}
6273

63-
div.dt-buttons {
64-
margin-left: 0.5em;
74+
/* .gridjs-wrapper */
75+
.gridjs-wrapper.scrolled .gridjs-th-fixed {
76+
background-color: #4f4f4f54;
77+
z-index: 999;
78+
outline: 1px solid var(--sn-color-table-border);
6579
}
6680

67-
div.dt-buttons button {
68-
padding: 0.1em 1em;
69-
border: 1px solid var(--sn-color-datatable-btn-border);
70-
border-radius: 2px;
71-
font-size: 0.88em;
72-
line-height: inherit;
81+
table thead.gridjs-thead th.gridjs-th {
82+
padding: 8px;
83+
}
84+
85+
th.gridjs-th .gridjs-th-content {
86+
text-overflow: initial;
87+
white-space: normal;
88+
word-wrap: break-word;
89+
}
90+
91+
button.gridjs-sort-neutral, button.gridjs-sort-asc, button.gridjs-sort-desc{
92+
filter: brightness(0) saturate(100%) invert(40%) sepia(10%) saturate(366%) hue-rotate(182deg) brightness(94%) contrast(89%);
93+
}
94+
tbody.gridjs-tbody {
95+
background-color: var(--sn-color-datatable-body-bg);
96+
}
97+
98+
table tbody.gridjs-tbody td.gridjs-td {
99+
padding: 8px;
100+
}
101+
/* .gridjs-footer */
102+
.gridjs-pagination {
73103
color: var(--sn-color-datatable-label);
74-
white-space: nowrap;
75-
overflow: hidden;
76-
background-color: inherit;
77-
background-image: none;
78104
}
79105

80-
.dataTables_wrapper .dataTables_filter input {
81-
max-width: 100px;
106+
.gridjs-pagination .gridjs-pages button {
107+
background-color: var(--sn-color-datatable-body-bg);
108+
color: var(--sn-color-datatable-label);
82109
border: 1px solid var(--sn-color-datatable-btn-border);
83-
margin-bottom: 10px;
84-
background-color: transparent;
85-
border-radius: 2px;
110+
padding: 8px;
111+
border-right: none
86112
}
87113

88-
.dataTables_wrapper.dataTables_wrapper .dataTables_length,
89-
.dataTables_wrapper.dataTables_wrapper .dataTables_filter,
90-
.dataTables_wrapper.dataTables_wrapper .dataTables_info,
91-
.dataTables_wrapper.dataTables_wrapper .dataTables_processing {
114+
.gridjs-pagination .gridjs-pages button:hover {
115+
background-color: var(--sn-color-datatable-body-bg);
92116
color: var(--sn-color-datatable-label);
117+
opacity: 0.7;
93118
}
94119

95-
.dataTables_wrapper.dataTables_wrapper .dataTables_paginate,
96-
.dataTables_wrapper.dataTables_wrapper .dataTables_paginate a.paginate_button,
97-
.dataTables_wrapper.dataTables_wrapper .dataTables_paginate a.paginate_button.current {
98-
/* datatables set this as !important, so unfortunately we have to do the same */
99-
color: var(--sn-color-datatable-label) !important;
120+
.gridjs-pagination .gridjs-pages button:disabled, .gridjs-pagination .gridjs-pages button:hover:disabled, .gridjs-pagination .gridjs-pages button[disabled] {
121+
background-color: var(--sn-color-datatable-body-bg);
122+
filter: saturate(0.25);
123+
}
124+
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
125+
background-color: var(--sn-color-datatable-body-bg);
126+
color: var(--sn-color-datatable-label);
127+
font-weight: bolder;
128+
}
129+
.gridjs-pagination .gridjs-pages button.gridjs-spread {
130+
background-color: var(--sn-color-datatable-body-bg);
100131
}
101132

102-
.dataTables_wrapper.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
103-
filter: saturate(0.5);
133+
.gridjs-pagination .gridjs-pages button:last-child {
134+
border: 1px solid var(--sn-color-datatable-btn-border);
104135
}
105136

106-
/* TODO: Ideally, if there is only one page, then the paginate buttons should be hidden. */
137+
/* Other GridJS style override */
138+
input.gridjs-input, div.gridjs-download-btns button {
139+
background-color: var(--sn-color-datatable-body-bg);
140+
color: var(--sn-color-datatable-label);
141+
border: 1px solid var(--sn-color-datatable-btn-border);
142+
padding: 8px;
143+
}

‎sphinx_needs/css/themes/blank.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
--sn-color-datatable-body-bg: transparent;
3232
--sn-color-datatable-label: #333;
3333
--sn-color-datatable-btn-border: #999;
34+
--sn-color-table-border: #a3a3a3;
3435

3536
--sn-color-debug-btn-border: #333;
3637
--sn-color-debug-btn-on-text: #f43333;

‎sphinx_needs/css/themes/dark.css‎

Lines changed: 1 addition & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -31,114 +31,11 @@
3131
--sn-color-datatable-body-bg: transparent;
3232
--sn-color-datatable-label: #eee;
3333
--sn-color-datatable-btn-border: #999;
34+
--sn-color-table-border: #a3a3a3;
3435

3536
--sn-color-debug-btn-border: #888;
3637
--sn-color-debug-btn-on-text: #ff3f34;
3738
--sn-color-debug-btn-off-text: #0fbcf9;
3839

3940
--sn-color-forbidden-dead-link: #dc3545;
4041
}
41-
42-
43-
/* DataTable layout*/
44-
/* TODO this should not be part of the theme */
45-
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
46-
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
47-
color: inherit !important;
48-
}
49-
50-
.dataTables_wrapper .dataTables_paginate .paginate_button {
51-
color: inherit !important;
52-
}
53-
54-
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
55-
border: none;
56-
background: inherit;
57-
}
58-
59-
.dataTables_wrapper .dataTables_length,
60-
.dataTables_wrapper .dataTables_filter,
61-
.dataTables_wrapper .dataTables_info,
62-
.dataTables_wrapper .dataTables_processing,
63-
.dataTables_wrapper .dataTables_paginate {
64-
color: inherit;
65-
}
66-
67-
table.dataTable tbody tr {
68-
background-color: inherit;
69-
}
70-
71-
div.dataTables_length select {
72-
color: inherit;
73-
border: none;
74-
}
75-
76-
div.dataTables_length select option {
77-
background: #333;
78-
color: inherit;
79-
border: none;
80-
}
81-
82-
div.dataTables_filter input {
83-
background: inherit;
84-
color: inherit;
85-
border: 1px solid #666;
86-
}
87-
88-
div.dataTables_filter input:focus {
89-
outline: none;
90-
}
91-
92-
table.dataTable thead th, table.dataTable thead td {
93-
border-bottom: inherit;
94-
}
95-
96-
/*DataTables Download Buttons*/
97-
98-
button.dt-button:hover:not(.disabled),
99-
div.dt-button:hover:not(.disabled),
100-
a.dt-button:hover:not(.disabled) {
101-
background-color: inherit;
102-
background-image: none;
103-
border: inherit;
104-
}
105-
106-
/*DataTables Column visibility Select list*/
107-
div.dt-button-collection {
108-
background-color: #333;
109-
}
110-
111-
/* Button active*/
112-
div.dt-button-collection button.dt-button:active:not(.disabled),
113-
div.dt-button-collection button.dt-button.active:not(.disabled),
114-
div.dt-button-collection div.dt-button:active:not(.disabled),
115-
div.dt-button-collection div.dt-button.active:not(.disabled),
116-
div.dt-button-collection a.dt-button:active:not(.disabled),
117-
div.dt-button-collection a.dt-button.active:not(.disabled) {
118-
background: #444 none;
119-
box-shadow: none;
120-
}
121-
122-
/* Button active hover*/
123-
button.dt-button:hover:not(.disabled),
124-
div.dt-button:hover:not(.disabled),
125-
a.dt-button:hover:not(.disabled) {
126-
background: #333 none;
127-
box-shadow: none;
128-
}
129-
130-
/* Button deactivated hover*/
131-
button.dt-button:active:not(.disabled):hover:not(.disabled),
132-
button.dt-button.active:not(.disabled):hover:not(.disabled),
133-
div.dt-button:active:not(.disabled):hover:not(.disabled),
134-
div.dt-button.active:not(.disabled):hover:not(.disabled),
135-
a.dt-button:active:not(.disabled):hover:not(.disabled),
136-
a.dt-button.active:not(.disabled):hover:not(.disabled) {
137-
background: #555 none;
138-
box-shadow: none;
139-
}
140-
141-
/* DataTablesScrollWrapper*/
142-
div.DTS div.dataTables_scrollBody {
143-
background: inherit;
144-
}

‎sphinx_needs/css/themes/modern.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
--sn-color-datatable-body-bg: transparent;
3232
--sn-color-datatable-label: #333;
3333
--sn-color-datatable-btn-border: #999;
34+
--sn-color-table-border: #a3a3a3;
3435

3536
--sn-color-debug-btn-border: #333;
3637
--sn-color-debug-btn-on-text: #f43333;

‎sphinx_needs/libs/html/GridJS/gridjs-theme.min.css‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sphinx_needs/libs/html/gridjs_loader.js‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,6 @@ function addDownloadButtons(tableId, headers, rows) {
148148
downloadBtns.appendChild(pdfDownloadBtns);
149149
downloadBtns.id = `${tableId}-download-btns`;
150150
downloadBtns.className = 'gridjs-download-btns';
151-
downloadBtns.style.float = 'right';
152151

153152
const headerNames = headers.map(header => header.name);
154153
const textRows = rows.map(row =>
@@ -168,8 +167,35 @@ function addDownloadButtons(tableId, headers, rows) {
168167
}
169168
}
170169

170+
function addGridJSWrapperScrollListener() {
171+
document.querySelectorAll('.gridjs-wrapper').forEach(wrapper => {
172+
wrapper.addEventListener('scroll', () => {
173+
if (wrapper.scrollTop > 0 || wrapper.scrollLeft > 0) {
174+
wrapper.classList.add('scrolled');
175+
} else {
176+
wrapper.classList.remove('scrolled');
177+
}
178+
});
179+
});
180+
}
181+
171182
async function initializeGridJS() {
172183
await loadGridJSandJSPDF();
184+
185+
const languageSettings = {
186+
search: {
187+
'placeholder': '🔍 Search...'
188+
},
189+
pagination: {
190+
previous: '⬅️ Previous',
191+
next: '➡️ Next',
192+
showing: '📺 Displaying',
193+
results: 'rows'
194+
},
195+
loading: 'Loading...',
196+
noRecordsFound: 'No matching records found',
197+
error: 'Error occurred while fetching the data. Please refresh page',
198+
};
173199

174200
document.querySelectorAll('table.NEEDS_DATATABLES').forEach(table => {
175201
const tableId = (table.id?.replace(/[^a-zA-Z0-9_-]/g, '_') || `gridjs-table-${Math.random().toString(36).substring(2, 11)}`);
@@ -212,23 +238,14 @@ async function initializeGridJS() {
212238
style: {
213239
table: {width: '100%', height: '500px', display: 'table'},
214240
},
215-
language: {
216-
'search': {
217-
'placeholder': '🔍 Search...'
218-
},
219-
'pagination': {
220-
'previous': '⬅️ Previous',
221-
'next': '➡️ Next',
222-
'showing': '😃 Displaying',
223-
'results': () => 'rows'
224-
}
225-
},
241+
language: languageSettings,
226242
});
227243

228244
gridInstance.render(wrapper);
229245

230246
setTimeout(() => {
231247
addDownloadButtons(tableId, headers, rows);
248+
addGridJSWrapperScrollListener();
232249
}, 100);
233250

234251
// Remove the original table

0 commit comments

Comments
 (0)