Skip to content

Commit 757d465

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

File tree

2 files changed

+100
-29
lines changed

2 files changed

+100
-29
lines changed

‎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: 58 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,47 @@ 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 options = [10, 25, 50, "all"];
178+
options.forEach(limit => {
179+
if (rows.length >= limit || limit === "all") {
180+
const option = document.createElement('option');
181+
option.value = limit;
182+
option.textContent = limit === "all" ? "All" : limit;
183+
option.selected = limit === "all" ? (selected_option === "all") : (limit === parseInt(selected_option, 10));
184+
paginationLimitSelector.appendChild(option);
185+
}
186+
});
187+
188+
paginationLimitSelector.addEventListener('change', (event) => {
189+
const selectedValue = event.target.value;
190+
const newLimit = selectedValue === "all" ? rows.length : parseInt(selectedValue, 10);
191+
if (gridInstance) {
192+
gridInstance.updateConfig({
193+
pagination: {
194+
limit: newLimit
195+
}
196+
}).forceRender();
197+
applyCustomFunctions(gridInstance, tableId, headers, rows, selectedValue);
198+
}
199+
});
200+
201+
paginationLimitDiv.appendChild(document.createTextNode('Show'));
202+
paginationLimitDiv.appendChild(paginationLimitSelector);
203+
paginationLimitDiv.appendChild(document.createTextNode('rows'));
204+
205+
const gridJSHeadDiv = document.querySelector(`#gridjs-wrapper-${tableId} .gridjs-head`);
206+
if (gridJSHeadDiv) {
207+
gridJSHeadDiv.appendChild(paginationLimitDiv);
208+
}
209+
}
210+
170211
function addGridJSWrapperScrollListener() {
171212
document.querySelectorAll('.gridjs-wrapper').forEach(wrapper => {
172213
wrapper.addEventListener('scroll', () => {
@@ -179,17 +220,25 @@ function addGridJSWrapperScrollListener() {
179220
});
180221
}
181222

223+
function applyCustomFunctions(gridInstance, tableId, headers, rows, selected_option = 10) {
224+
setTimeout(() => {
225+
addPaginationLimitSelector(gridInstance, tableId, headers, rows, selected_option);
226+
addDownloadButtons(tableId, headers, rows);
227+
addGridJSWrapperScrollListener();
228+
}, 100);
229+
}
230+
182231
async function initializeGridJS() {
183232
await loadGridJSandJSPDF();
184233

185234
const languageSettings = {
186235
search: {
187-
'placeholder': '🔍 Search...'
236+
'placeholder': 'Search...'
188237
},
189238
pagination: {
190-
previous: '⬅️ Previous',
191-
next: '➡️ Next',
192-
showing: '📺 Displaying',
239+
previous: 'Prev',
240+
next: 'Next',
241+
showing: 'Displaying',
193242
results: 'rows'
194243
},
195244
loading: 'Loading...',
@@ -243,13 +292,9 @@ async function initializeGridJS() {
243292

244293
gridInstance.render(wrapper);
245294

246-
setTimeout(() => {
247-
addDownloadButtons(tableId, headers, rows);
248-
addGridJSWrapperScrollListener();
249-
}, 100);
250-
251-
// Remove the original table
252-
table.remove();
295+
applyCustomFunctions(gridInstance, tableId, headers, rows);
296+
// Hide the original table
297+
table.style.display = 'none';
253298
});
254299
}
255300

0 commit comments

Comments
 (0)