Feature/issue 575 advanced tables (#585)

* add tanstack table library as dep

* Update translations.json

* add ArticleCellDataTable components if ArticleFigure is a table, only for markdown cell

* Create DebouncedInput.js

50ms debounce for big tables

* fullwidth datatable

* Update ArticleCellDataTable.css

* basic pagination only if table rows are more than 10

* Update ArticleCellDataTable.js

* Update ArticleCellDataTable.js

* Update ArticleCellDataTable.js

* Update ArticleCellDataTable.js

* better style for tables from code

* add global filtering and ordering

* add new prefix data-table

* fix style

* add redirect to use netlify in deploy

* Update ArticleCellDataTable.css

* fix TypeError: e.cell.figure is null

.gitignore

@@ -8,4 +8,4 @@ node_modules
 .env.development
 .vscode/settings.json
 storybook-static
-_redirects
+# _redirects

_redirects

@@ -0,0 +1,3 @@
+/proxy-githubusercontent/*  https://raw.githubusercontent.com/:splat  200
+/api/*  https://journalofdigitalhistory.org/api/:splat  200
+/*  /index.html  200

package.json

@@ -9,6 +9,7 @@
     "@jonkoops/matomo-tracker-react": "^0.7.0",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^4.29.19",
+    "@tanstack/react-table": "^8.10.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/components/Article/ArticleCell.js

@@ -158,6 +158,7 @@ const ArticleCell = ({
           containerClassName={containerClassNames.join(' ')}
           windowHeight={windowHeight}
           active={active}
+          cellType={type}
         >
           <ArticleCellContent
             onNumClick={onNumClick}

src/components/Article/ArticleCellDataTable.css

@@ -0,0 +1,96 @@
+.ArticleCellDataTable {
+  box-shadow: rgba(50, 50, 93, 0.15) 0px 2px 12px -2px, rgba(0, 0, 0, 0.13) 0px 3px 7px -3px;
+  padding: 0px;
+  border-radius: 4px;
+  border: 1px solid;
+  background-color: rgba(255, 255, 255, 0.65);
+}
+.ArticleCellDataTable > p {
+  padding: var(--spacer-2);
+}
+.ArticleCellDataTable table {
+  border: 0px solid transparent;
+  background-color: transparent;
+  width: 100%;
+}
+.ArticleCellDataTable table tbody {
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+}
+.ArticleCellDataTable__header {
+  position: sticky;
+  top: 100px;
+}
+.ArticleCellDataTable__pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ArticleCellDataTable .input-group {
+  z-index: 0;
+}
+.ArticleCellDataTable__pagination .input-group .input-group-text {
+  background: transparent;
+  border-top-color: inherit;
+  border-bottom-color: inherit;
+  padding: 0 var(--spacer-2) 0 var(--spacer-1);
+}
+
+.ArticleCellDataTable__pagination .input-group .input-group-text label {
+  background: var(--dark);
+  color: white;
+  border-radius: 3px;
+  padding: 0 var(--spacer-2);
+  font-weight: bold;
+}
+
+.ArticleCellDataTable__pagination .form-select {
+  background-color: transparent;
+  border-color: inherit;
+  width: 100px;
+}
+.ArticleCellDataTable__pagination .form-select:focus {
+  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.186);
+}
+.ArticleCellDataTable table th {
+  padding: var(--spacer-2);
+  background-color: transparent;
+  vertical-align: bottom;
+  border: 1px solid rgba(0, 0, 0, 0.186);
+}
+.ArticleCellDataTable table td {
+  border: 1px solid rgba(0, 0, 0, 0.061);
+}
+.ArticleCellDataTable table th:first-child,
+.ArticleCellDataTable table td:first-child,
+.ArticleCellDataTable table td:last-child,
+.ArticleCellDataTable table th:last-child {
+  border-left: 0px solid transparent;
+}
+
+.ArticleCellDataTable table thead {
+  border-bottom: 1px solid;
+  border-top: 1px solid rgba(0, 0, 0, 0.186);
+}
+
+.ArticleCellDataTable table tbody tr:nth-of-type(2n + 1) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.ArticleCellDataTable .ColumnSorting {
+  display: block;
+  width: auto;
+  min-width: 50px;
+  margin-top: var(--spacer-1);
+  opacity: 0.5;
+}
+.ArticleCellDataTable .ColumnSorting:hover,
+.ArticleCellDataTable .ColumnSorting.active {
+  opacity: 1;
+}
+.ArticleCellDataTable .ColumnSorting button {
+  --bs-btn-line-height: 1.15;
+}
+.ArticleCellDataTable .ColumnSorting button.active {
+  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.186);
+}