🛠️ Refactor Sphinx-Needs DataTables integration to use GridJS

docs/_static/_css/shared.css

@@ -123,7 +123,7 @@ svg.sn-flow-chart {
 }
 
 table.needs-grid-example {
-    border: 1px solid var(--color-table-border);
+    border: 1px solid var(--sn-color-table-border);
 }
 
 :root {

docs/_static/_css/sphinx_rtd_theme.css

@@ -10,9 +10,3 @@ div.wy-table-responsive {
     overflow-x: auto !important;
 }
 
-/* a lot of components, like paragraphs and header, do not have a top margin
-so the datatable does not have a gap to the subsequent element
-*/
-div.dataTables_wrapper {
-    margin-bottom: 2em;
-}

requirements-dev.lock

@@ -0,0 +1,86 @@
+# generated by rye
+# use `rye lock` or `rye sync` to update this lockfile
+#
+# last locked with the following flags:
+#   pre: false
+#   features: []
+#   all-features: false
+#   with-sources: false
+#   generate-hashes: false
+#   universal: false
+
+-e file:.
+alabaster==0.7.16
+    # via sphinx
+attrs==25.3.0
+    # via jsonschema
+    # via referencing
+babel==2.17.0
+    # via sphinx
+certifi==2025.4.26
+    # via requests
+charset-normalizer==3.4.2
+    # via requests
+docutils==0.21.2
+    # via sphinx
+idna==3.10
+    # via requests
+imagesize==1.4.1
+    # via sphinx
+importlib-metadata==8.7.0
+    # via sphinx
+jinja2==3.1.6
+    # via sphinx
+jsonschema==4.24.0
+    # via sphinx-needs
+jsonschema-specifications==2025.4.1
+    # via jsonschema
+markupsafe==3.0.2
+    # via jinja2
+packaging==25.0
+    # via sphinx
+pygments==2.19.1
+    # via sphinx
+referencing==0.36.2
+    # via jsonschema
+    # via jsonschema-specifications
+requests==2.32.4
+    # via requests-file
+    # via sphinx
+    # via sphinx-needs
+requests-file==2.1.0
+    # via sphinx-needs
+rpds-py==0.25.1
+    # via jsonschema
+    # via referencing
+snowballstemmer==3.0.1
+    # via sphinx
+sphinx==7.4.7
+    # via sphinx-data-viewer
+    # via sphinx-needs
+    # via sphinxcontrib-jquery
+sphinx-data-viewer==0.1.5
+    # via sphinx-needs
+sphinxcontrib-applehelp==2.0.0
+    # via sphinx
+sphinxcontrib-devhelp==2.0.0
+    # via sphinx
+sphinxcontrib-htmlhelp==2.1.0
+    # via sphinx
+sphinxcontrib-jquery==4.1
+    # via sphinx-needs
+sphinxcontrib-jsmath==1.0.1
+    # via sphinx
+sphinxcontrib-qthelp==2.0.0
+    # via sphinx
+sphinxcontrib-serializinghtml==2.0.0
+    # via sphinx
+tomli==2.2.1
+    # via sphinx
+    # via sphinx-needs
+typing-extensions==4.14.0
+    # via referencing
+urllib3==2.4.0
+    # via requests
+zipp==3.23.0
+    # via importlib-metadata

requirements.lock

@@ -0,0 +1,86 @@
+# generated by rye
+# use `rye lock` or `rye sync` to update this lockfile
+#
+# last locked with the following flags:
+#   pre: false
+#   features: []
+#   all-features: false
+#   with-sources: false
+#   generate-hashes: false
+#   universal: false
+
+-e file:.
+alabaster==0.7.16
+    # via sphinx
+attrs==25.3.0
+    # via jsonschema
+    # via referencing
+babel==2.17.0
+    # via sphinx
+certifi==2025.4.26
+    # via requests
+charset-normalizer==3.4.2
+    # via requests
+docutils==0.21.2
+    # via sphinx
+idna==3.10
+    # via requests
+imagesize==1.4.1
+    # via sphinx
+importlib-metadata==8.7.0
+    # via sphinx
+jinja2==3.1.6
+    # via sphinx
+jsonschema==4.24.0
+    # via sphinx-needs
+jsonschema-specifications==2025.4.1
+    # via jsonschema
+markupsafe==3.0.2
+    # via jinja2
+packaging==25.0
+    # via sphinx
+pygments==2.19.1
+    # via sphinx
+referencing==0.36.2
+    # via jsonschema
+    # via jsonschema-specifications
+requests==2.32.4
+    # via requests-file
+    # via sphinx
+    # via sphinx-needs
+requests-file==2.1.0
+    # via sphinx-needs
+rpds-py==0.25.1
+    # via jsonschema
+    # via referencing
+snowballstemmer==3.0.1
+    # via sphinx
+sphinx==7.4.7
+    # via sphinx-data-viewer
+    # via sphinx-needs
+    # via sphinxcontrib-jquery
+sphinx-data-viewer==0.1.5
+    # via sphinx-needs
+sphinxcontrib-applehelp==2.0.0
+    # via sphinx
+sphinxcontrib-devhelp==2.0.0
+    # via sphinx
+sphinxcontrib-htmlhelp==2.1.0
+    # via sphinx
+sphinxcontrib-jquery==4.1
+    # via sphinx-needs
+sphinxcontrib-jsmath==1.0.1
+    # via sphinx
+sphinxcontrib-qthelp==2.0.0
+    # via sphinx
+sphinxcontrib-serializinghtml==2.0.0
+    # via sphinx
+tomli==2.2.1
+    # via sphinx
+    # via sphinx-needs
+typing-extensions==4.14.0
+    # via referencing
+urllib3==2.4.0
+    # via requests
+zipp==3.23.0
+    # via importlib-metadata

sphinx_needs/css/common/needstable.css

@@ -21,86 +21,149 @@ div.needstable_wrapper {
     padding: 0;
 }
 
-/* These are "overrides" for CSS added by the bundled https://datatables.net JS package */
+table.docutils.docutils td, table.docutils.docutils th {
+    background: var(--sn-color-datatable-body-bg);
+    border: 0.05rem solid color-mix(in srgb, var(--sn-color-table-border) 40%, transparent);
+    color: var(--sn-color-datatable-label);
+}
 
-table.dataTable {
-    border-collapse: collapse;
+table.docutils.docutils th {
+    border-bottom: 0.05rem solid color-mix(in srgb, var(--sn-color-datatable-btn-border) 40%, transparent);
+}
+/* GridJS styles for to override the default GridJS styles
+to match the Sphinx Needs theme and to ensure a consistent look and feel
+with the rest of the Sphinx Needs documentation.
+
+The 3 sections of a GridJS container .gridjs-head, .gridjs-wrapper and .gridjs-footer */
+div.gridjs-container {
+    color: var(--sn-color-datatable-label);
+}
+
+div.gridjs-wrapper {
     border: none;
+    border-radius: 0px;
+    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);
 }
 
-table.dataTable tbody tr {
+div.gridjs-footer {
     background-color: var(--sn-color-datatable-body-bg);
+    border: none;
+    box-shadow: none;
+    padding: 12px;
+    border-top-width: 0px;
 }
 
-div.dataTables_length {
-    margin-bottom: 10px;
+/* .gridjs-head */
+.gridjs-search {
+    float: left;
 }
 
-div.dataTables_wrapper {
-    overflow-x: auto;
-    padding: 0px 5px;
-    /*Space needed for table borders */
+div.gridjs-pagination-limit-div {
+    display: inline-block;
+    margin-left: 6px;
 }
 
-.dataTables_wrapper .dataTables_paginate .paginate_button {
-    padding: 0.15em 0.75em;
-    background: none;
+div.gridjs-pagination-limit-div select.gridjs-pagination-limit {
+    margin: 0 6px;
+    padding: 2px;
 }
 
-.dataTables_wrapper .dataTables_paginate .paginate_button.current,
-.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
-    background: none;
+div.gridjs-download-btns, div.gridjs-pagination-limit-div {
+    float: right;
 }
 
-div.dataTables_length select {
-    background: none;
+div.gridjs-download-btns button, select.gridjs-pagination-limit {
+    background-color: var(--sn-color-datatable-body-bg);
     color: var(--sn-color-datatable-label);
-    border: 1px solid var(--sn-color-datatable-btn-border);
-    border-radius: 2px;
+    border: 0.05rem solid color-mix(in srgb, var(--sn-color-datatable-btn-border) 30%, transparent);
+    padding: 4px;
+    border-radius: 3px;
+    outline: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
     cursor: pointer;
+    margin-left: 6px;
+}
+
+div.gridjs-download-btns button::before{
+    content: '';
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iI2EyYTJhMiI+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMyAxNi41djIuMjVBMi4yNSAyLjI1IDAgMCAwIDUuMjUgMjFoMTMuNUEyLjI1IDIuMjUgMCAwIDAgMjEgMTguNzVWMTYuNU0xNi41IDEyIDEyIDE2LjVtMCAwTDcuNSAxMm00LjUgNC41VjMiIC8+PC9zdmc+');
+    margin-right: 2px;
+}
+
+/* .gridjs-wrapper */
+.gridjs-wrapper.scrolled .gridjs-th-fixed {
+    background-color: #a2a2a2;
+    color: #1c1c1c;
+    z-index: 999;
+    outline: 0.05rem solid color-mix(in srgb, var(--sn-color-table-border) 70%, transparent);
+}
+
+table thead.gridjs-thead th.gridjs-th {
+    padding: 8px;
+}
+
+th.gridjs-th .gridjs-th-content {
+    text-overflow: initial;
+    white-space: normal;
+    word-wrap: break-word;
 }
 
-div.dt-buttons {
-    margin-left: 0.5em;
+button.gridjs-sort-neutral, button.gridjs-sort-asc, button.gridjs-sort-desc{
+    filter: brightness(0) saturate(100%) invert(40%) sepia(10%) saturate(366%) hue-rotate(182deg) brightness(94%) contrast(89%);
+}
+tbody.gridjs-tbody {
+    background-color: var(--sn-color-datatable-body-bg);
 }
 
-div.dt-buttons button {
-    padding: 0.1em 1em;
-    border: 1px solid var(--sn-color-datatable-btn-border);
-    border-radius: 2px;
-    font-size: 0.88em;
-    line-height: inherit;
+table tbody.gridjs-tbody td.gridjs-td {
+    padding: 8px;
+}
+/* .gridjs-footer */
+.gridjs-pagination {
     color: var(--sn-color-datatable-label);
-    white-space: nowrap;
-    overflow: hidden;
-    background-color: inherit;
-    background-image: none;
 }
 
-.dataTables_wrapper .dataTables_filter input {
-    max-width: 100px;
-    border: 1px solid var(--sn-color-datatable-btn-border);
-    margin-bottom: 10px;
-    background-color: transparent;
-    border-radius: 2px;
+.gridjs-pagination .gridjs-pages button {
+    background-color: var(--sn-color-datatable-body-bg);
+    color: var(--sn-color-datatable-label);
+    border: none;
+    padding: 8px;
 }
 
-.dataTables_wrapper.dataTables_wrapper .dataTables_length,
-.dataTables_wrapper.dataTables_wrapper .dataTables_filter,
-.dataTables_wrapper.dataTables_wrapper .dataTables_info,
-.dataTables_wrapper.dataTables_wrapper .dataTables_processing {
+.gridjs-pagination .gridjs-pages button:hover {
+    background-color: var(--sn-color-datatable-body-bg);
     color: var(--sn-color-datatable-label);
+    opacity: 0.7;
 }
 
-.dataTables_wrapper.dataTables_wrapper .dataTables_paginate,
-.dataTables_wrapper.dataTables_wrapper .dataTables_paginate a.paginate_button,
-.dataTables_wrapper.dataTables_wrapper .dataTables_paginate a.paginate_button.current {
-    /* datatables set this as !important, so unfortunately we have to do the same */
-    color: var(--sn-color-datatable-label) !important;
+.gridjs-pagination .gridjs-pages button:disabled, .gridjs-pagination .gridjs-pages button:hover:disabled, .gridjs-pagination .gridjs-pages button[disabled] {
+    background-color: var(--sn-color-datatable-body-bg);
+    filter: saturate(0.25);
+}
+.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
+    background-color: var(--sn-color-datatable-body-bg);
+    color: var(--sn-color-datatable-label);
+    font-weight: bolder;
+}
+.gridjs-pagination .gridjs-pages button.gridjs-spread {
+    background-color: var(--sn-color-datatable-body-bg);
 }
 
-.dataTables_wrapper.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
-    filter: saturate(0.5);
+.gridjs-pagination .gridjs-pages button:last-child {
+    border: none;
 }
 
-/* TODO: Ideally, if there is only one page, then the paginate buttons should be hidden. */
+/* Other GridJS style override */
+input.gridjs-input {
+    background-color: var(--sn-color-datatable-body-bg);
+    color: var(--sn-color-datatable-label);
+    border: 0.05rem solid color-mix(in srgb, var(--sn-color-datatable-btn-border) 40%, transparent);
+    padding: 4px;
+}