From 778a41b9ef37db6969dd3588f4505da8ab1aa732 Mon Sep 17 00:00:00 2001
From: rbisson <remi.bisson@inrae.fr>
Date: Tue, 7 Jan 2025 16:14:24 +0100
Subject: [PATCH 1/2] [ResultsTableMUI] added styling on column headers and
rows
---
package.json | 1 +
src/pages/results/ResultsTableMUI.js | 64 ++++++++++++++++++++++------
2 files changed, 51 insertions(+), 14 deletions(-)
diff --git a/package.json b/package.json
index 893d7db..ee45802 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"@microlink/react-json-view": "^1.23.1",
"@mui/icons-material": "^5.15.21",
"@mui/material": "^5.15.21",
+ "@mui/styles": "^6.3.1",
"downloadjs": "^1.4.7",
"i18next": "^23.11.5",
"i18next-http-backend": "^2.5.2",
diff --git a/src/pages/results/ResultsTableMUI.js b/src/pages/results/ResultsTableMUI.js
index 1a7b22b..2e2dc71 100644
--- a/src/pages/results/ResultsTableMUI.js
+++ b/src/pages/results/ResultsTableMUI.js
@@ -2,24 +2,21 @@ import React, { useEffect, useMemo, useState } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import MUIDataTable from 'mui-datatables';
import { createTheme, ThemeProvider } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { fetchPublicFields } from '../../actions/source';
import { fetchUserFieldsDisplaySettings } from '../../actions/user';
import { buildFieldName } from '../../Utils';
+import { useEuiTheme, transparentize, EuiTitle } from '@elastic/eui';
-const getMuiTheme = () =>
- createTheme({
- components: {
- MuiTableRow: {
- styleOverrides: {
- root: {
- '&:hover': {
- cursor: 'pointer',
- },
- },
- },
- },
+const useStyles = makeStyles(() => ({
+ centeredHeader: {
+ '& span': {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
},
- });
+ },
+}));
const ResultsTableMUI = ({
searchResults,
@@ -30,6 +27,8 @@ const ResultsTableMUI = ({
setResourceFlyoutDataFromId,
}) => {
const { t } = useTranslation('results');
+ const { euiTheme } = useEuiTheme();
+ const classes = useStyles();
const [publicFields, setPublicFields] = useState([]);
const [userFieldsIds, setUserFieldsIds] = useState([]);
const [isLoading, setIsLoading] = useState(true);
@@ -64,12 +63,24 @@ const ResultsTableMUI = ({
options: { display: 'excluded' },
},
];
- publicFields.forEach((publicField) => {
+ publicFields.forEach((publicField, index) => {
dataColumns.push({
name: publicField.field_name,
label: buildFieldName(publicField.field_name),
options: {
display: userFieldsIds.includes(publicField.id),
+ // Apply styling on columns headers
+ setCellHeaderProps: () => ({
+ className: classes.centeredHeader,
+ }),
+ customHeadLabelRender: (columnMeta) => {
+ return (
+ <EuiTitle size={'xxs'}>
+ <p>{columnMeta.label}</p>
+ </EuiTitle>
+ );
+ },
+ // Truncate text to avoid oversize rows
customBodyRenderLite: (dataIndex, rowIndex) => {
let value = rows[rowIndex][publicField.field_name];
if (value && value.length >= 150) {
@@ -77,6 +88,7 @@ const ResultsTableMUI = ({
}
return value;
},
+ // Apply a max width on table cells
setCellProps: () => ({
style: {
maxWidth: '350px',
@@ -193,6 +205,30 @@ const ResultsTableMUI = ({
},
};
+ const getMuiTheme = () =>
+ createTheme({
+ components: {
+ MUIDataTableBodyRow: {
+ styleOverrides: {
+ root: {
+ '&:nth-of-type(odd)': {
+ backgroundColor: transparentize(euiTheme.colors.lightShade, 0.5),
+ },
+ },
+ },
+ },
+ MuiTableRow: {
+ styleOverrides: {
+ root: {
+ '&:hover': {
+ cursor: 'pointer',
+ },
+ },
+ },
+ },
+ },
+ });
+
const tableOptions = {
print: false,
download: false,
--
GitLab
From 3a3b9defc46fa98daf8e27e838769ce548d7a575 Mon Sep 17 00:00:00 2001
From: rbisson <remi.bisson@inrae.fr>
Date: Tue, 7 Jan 2025 16:15:13 +0100
Subject: [PATCH 2/2] [ResultsTableMUI] added comments
---
src/pages/results/ResultsTableMUI.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/pages/results/ResultsTableMUI.js b/src/pages/results/ResultsTableMUI.js
index 2e2dc71..0fd0c86 100644
--- a/src/pages/results/ResultsTableMUI.js
+++ b/src/pages/results/ResultsTableMUI.js
@@ -63,7 +63,7 @@ const ResultsTableMUI = ({
options: { display: 'excluded' },
},
];
- publicFields.forEach((publicField, index) => {
+ publicFields.forEach((publicField) => {
dataColumns.push({
name: publicField.field_name,
label: buildFieldName(publicField.field_name),
@@ -73,6 +73,7 @@ const ResultsTableMUI = ({
setCellHeaderProps: () => ({
className: classes.centeredHeader,
}),
+ // Apply styling on columns headers text
customHeadLabelRender: (columnMeta) => {
return (
<EuiTitle size={'xxs'}>
--
GitLab