Skip to content

Commit 5394d2a

Browse files
iSOLveITiSOLveIT
committed
Refactor GridJS integration: simplify download button labels, add pagination limit selector, and enhance language settings
1 parent 3aee609 commit 5394d2a

2 files changed

Lines changed: 102 additions & 29 deletions

File tree

‎sphinx_needs/css/common/needstable.css‎

Lines changed: 42 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ div.needstable_wrapper {
2323

2424
table.docutils.docutils td, table.docutils.docutils th {
2525
background: var(--sn-color-datatable-body-bg);
26-
border: 1px solid var(--sn-color-table-border);
26+
border: 0.05rem solid color-mix(in srgb, var(--sn-color-table-border) 40%, transparent);
2727
color: var(--sn-color-datatable-label);
2828
}
2929

3030
table.docutils.docutils th {
31-
border-bottom: 1px solid var(--sn-color-datatable-btn-border);
31+
border-bottom: 0.05rem solid color-mix(in srgb, var(--sn-color-datatable-btn-border) 40%, transparent);
3232
}
3333
/* GridJS styles for to override the default GridJS styles
3434
to match the Sphinx Needs theme and to ensure a consistent look and feel
@@ -40,13 +40,14 @@ div.gridjs-container {
4040
}
4141

4242
div.gridjs-wrapper {
43+
border: none;
4344
border-radius: 0px;
44-
box-shadow: none;
45+
box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--sn-color-datatable-btn-border) 10%, transparent),0 1px 2px 0 color-mix(in srgb, var(--sn-color-datatable-btn-border) 26%, transparent);
4546
}
4647

4748
div.gridjs-footer {
4849
background-color: var(--sn-color-datatable-body-bg);
49-
border: 1px solid var(--sn-color-datatable-btn-border);
50+
border: none;
5051
box-shadow: none;
5152
padding: 12px;
5253
border-top-width: 0px;
@@ -57,25 +58,51 @@ div.gridjs-footer {
5758
float: left;
5859
}
5960

60-
div.gridjs-download-btns {
61+
div.gridjs-pagination-limit-div {
62+
display: inline-block;
63+
margin-left: 6px;
64+
}
65+
66+
div.gridjs-pagination-limit-div select.gridjs-pagination-limit {
67+
margin: 0 6px;
68+
padding: 2px;
69+
}
70+
71+
div.gridjs-download-btns, div.gridjs-pagination-limit-div {
6172
float: right;
6273
}
6374

64-
div.gridjs-download-btns button {
65-
border-radius: 6px;
75+
div.gridjs-download-btns button, select.gridjs-pagination-limit {
76+
background-color: var(--sn-color-datatable-body-bg);
77+
color: var(--sn-color-datatable-label);
78+
border: 0.05rem solid color-mix(in srgb, var(--sn-color-datatable-btn-border) 30%, transparent);
79+
padding: 4px;
80+
border-radius: 3px;
6681
outline: 0;
6782
-webkit-user-select: none;
6883
-moz-user-select: none;
6984
user-select: none;
7085
cursor: pointer;
71-
margin-left: 10px;
86+
margin-left: 6px;
87+
}
88+
89+
div.gridjs-download-btns button::before{
90+
content: '';
91+
display: inline-block;
92+
width: 14px;
93+
height: 14px;
94+
background-size: contain;
95+
background-repeat: no-repeat;
96+
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iI2EyYTJhMiI+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMyAxNi41djIuMjVBMi4yNSAyLjI1IDAgMCAwIDUuMjUgMjFoMTMuNUEyLjI1IDIuMjUgMCAwIDAgMjEgMTguNzVWMTYuNU0xNi41IDEyIDEyIDE2LjVtMCAwTDcuNSAxMm00LjUgNC41VjMiIC8+PC9zdmc+');
97+
margin-right: 2px;
7298
}
7399

74100
/* .gridjs-wrapper */
75101
.gridjs-wrapper.scrolled .gridjs-th-fixed {
76-
background-color: #4f4f4f54;
102+
background-color: #a2a2a2;
103+
color: #1c1c1c;
77104
z-index: 999;
78-
outline: 1px solid var(--sn-color-table-border);
105+
outline: 0.05rem solid color-mix(in srgb, var(--sn-color-table-border) 70%, transparent);
79106
}
80107

81108
table thead.gridjs-thead th.gridjs-th {
@@ -106,9 +133,8 @@ table tbody.gridjs-tbody td.gridjs-td {
106133
.gridjs-pagination .gridjs-pages button {
107134
background-color: var(--sn-color-datatable-body-bg);
108135
color: var(--sn-color-datatable-label);
109-
border: 1px solid var(--sn-color-datatable-btn-border);
136+
border: none;
110137
padding: 8px;
111-
border-right: none
112138
}
113139

114140
.gridjs-pagination .gridjs-pages button:hover {
@@ -131,13 +157,13 @@ table tbody.gridjs-tbody td.gridjs-td {
131157
}
132158

133159
.gridjs-pagination .gridjs-pages button:last-child {
134-
border: 1px solid var(--sn-color-datatable-btn-border);
160+
border: none;
135161
}
136162

137163
/* Other GridJS style override */
138-
input.gridjs-input, div.gridjs-download-btns button {
164+
input.gridjs-input {
139165
background-color: var(--sn-color-datatable-body-bg);
140166
color: var(--sn-color-datatable-label);
141-
border: 1px solid var(--sn-color-datatable-btn-border);
142-
padding: 8px;
167+
border: 0.05rem solid color-mix(in srgb, var(--sn-color-datatable-btn-border) 40%, transparent);
168+
padding: 4px;
143169
}

‎sphinx_needs/libs/html/gridjs_loader.js‎

Lines changed: 60 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,8 @@ function addDownloadButtons(tableId, headers, rows) {
142142

143143
csvDownloadBtns.id = `${tableId}-download-csv`;
144144
pdfDownloadBtns.id = `${tableId}-download-pdf`;
145-
csvDownloadBtns.textContent = "Download CSV";
146-
pdfDownloadBtns.textContent = "Download PDF";
145+
csvDownloadBtns.textContent = "CSV";
146+
pdfDownloadBtns.textContent = "PDF";
147147
downloadBtns.appendChild(csvDownloadBtns);
148148
downloadBtns.appendChild(pdfDownloadBtns);
149149
downloadBtns.id = `${tableId}-download-btns`;
@@ -167,6 +167,49 @@ function addDownloadButtons(tableId, headers, rows) {
167167
}
168168
}
169169

170+
function addPaginationLimitSelector(gridInstance, tableId, headers, rows, selected_option = 10) {
171+
const paginationLimitDiv = document.createElement('div');
172+
paginationLimitDiv.className = 'gridjs-pagination-limit-div';
173+
const paginationLimitSelector = document.createElement('select');
174+
paginationLimitSelector.id = `${tableId}-pagination-limit`;
175+
paginationLimitSelector.className = 'gridjs-pagination-limit';
176+
177+
const option_selected = selected_option;
178+
179+
const options = [10, 25, 50, "all"];
180+
options.forEach(limit => {
181+
if (rows.length >= limit || limit === "all") {
182+
const option = document.createElement('option');
183+
option.value = limit;
184+
option.textContent = limit === "all"? "All" : limit;
185+
option.selected = (limit === option_selected);
186+
paginationLimitSelector.appendChild(option);
187+
}
188+
});
189+
190+
paginationLimitSelector.addEventListener('change', (event) => {
191+
const selectedValue = event.target.value;
192+
const newLimit = selectedValue === "all" ? rows.length : parseInt(selectedValue, 10);
193+
if (gridInstance) {
194+
gridInstance.updateConfig({
195+
pagination: {
196+
limit: newLimit
197+
}
198+
}).forceRender();
199+
applyCustomFunctions(gridInstance, tableId, headers, rows, selectedValue);
200+
}
201+
});
202+
203+
paginationLimitDiv.appendChild(document.createTextNode('Show'));
204+
paginationLimitDiv.appendChild(paginationLimitSelector);
205+
paginationLimitDiv.appendChild(document.createTextNode('rows'));
206+
207+
const gridJSHeadDiv = document.querySelector(`#gridjs-wrapper-${tableId} .gridjs-head`);
208+
if (gridJSHeadDiv) {
209+
gridJSHeadDiv.appendChild(paginationLimitDiv);
210+
}
211+
}
212+
170213
function addGridJSWrapperScrollListener() {
171214
document.querySelectorAll('.gridjs-wrapper').forEach(wrapper => {
172215
wrapper.addEventListener('scroll', () => {
@@ -179,17 +222,25 @@ function addGridJSWrapperScrollListener() {
179222
});
180223
}
181224

225+
function applyCustomFunctions(gridInstance, tableId, headers, rows, selected_option = 10) {
226+
setTimeout(() => {
227+
addPaginationLimitSelector(gridInstance, tableId, headers, rows, selected_option);
228+
addDownloadButtons(tableId, headers, rows);
229+
addGridJSWrapperScrollListener();
230+
}, 100);
231+
}
232+
182233
async function initializeGridJS() {
183234
await loadGridJSandJSPDF();
184235

185236
const languageSettings = {
186237
search: {
187-
'placeholder': '🔍 Search...'
238+
'placeholder': 'Search...'
188239
},
189240
pagination: {
190-
previous: '⬅️ Previous',
191-
next: '➡️ Next',
192-
showing: '📺 Displaying',
241+
previous: 'Prev',
242+
next: 'Next',
243+
showing: 'Displaying',
193244
results: 'rows'
194245
},
195246
loading: 'Loading...',
@@ -243,13 +294,9 @@ async function initializeGridJS() {
243294

244295
gridInstance.render(wrapper);
245296

246-
setTimeout(() => {
247-
addDownloadButtons(tableId, headers, rows);
248-
addGridJSWrapperScrollListener();
249-
}, 100);
250-
251-
// Remove the original table
252-
table.remove();
297+
applyCustomFunctions(gridInstance, tableId, headers, rows);
298+
// Hide the original table
299+
table.style.display = 'none';
253300
});
254301
}
255302

0 commit comments

Comments
 (0)