fix header

Canadian-Geospatial-Platform · Oct 15, 2024 · f233e3d · f233e3d
1 parent 4b92929
commit f233e3d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json
@@ -199,7 +199,6 @@
     "jsonExportBtn": "Télécharger GeoJSON",
     "downloadAsCSV": "Télécharger CSV",
     "filterMap": "Filtrer la carte",
-    "stopFilterMap": "Ne plus filtrer la carte",
     "clearFilters": "Effacer les filtres",
     "rowsSelected": "{rowsSelected} sur {totalRows} ligne(s) sélectionnée(s)",
     "rowsFiltered": "{rowsFiltered} sur {totalRows} ligne(s) filtrée(s)",

diff --git a/packages/geoview-core/src/core/components/data-table/data-table-style.ts b/packages/geoview-core/src/core/components/data-table/data-table-style.ts
@@ -37,6 +37,11 @@ export const getSxClasses = (theme: Theme) =>
         color: theme.palette.geoViewColor.grey.dark[900],
       },
     },
+    tableHead: {
+      '& th:nth-of-type(-n+3)': {
+        justifyContent: 'end',
+      },
+    },
     tableHeadCell: {
       '& .MuiCollapse-wrapperInner': {
         '& .MuiBox-root': {

diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -113,7 +113,7 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
 
     return (
       <Tooltip title={header} placement="top" arrow>
-        <Box component="span" sx={{ whiteSpace: 'nowrap' }}>
+        <Box component="span" sx={{ whiteSpace: 'nowrap', justifyContent: 'end' }}>
           {header}
         </Box>
       </Tooltip>
@@ -421,13 +421,11 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
     enableBottomToolbar: false,
     positionToolbarAlertBanner: 'none', // hide existing row count
     renderTopToolbar: ({ table }) => (
-      <Box display="flex" justifyContent="space-between" p={4}>
+      <Box display="flex" sx={{ justifyContent: 'space-between', borderBottom: '1px solid #9e9e9e' }} p={4}>
         <Box display="flex" sx={{ flexDirection: 'column', justifyContent: 'space-evenly' }}>
           <Box sx={sxClasses.selectedRows}>{datatableSettings[layerPath].toolbarRowSelectedMessageRecord}</Box>
           <Box display="flex">
-            <Box sx={sxClasses.selectedRows}>
-              {datatableSettings[layerPath].mapFilteredRecord ? t('dataTable.stopFilterMap') : t('dataTable.filterMap')}
-            </Box>
+            <Box sx={sxClasses.selectedRows}>{t('dataTable.filterMap')}</Box>
             <FilterMap layerPath={layerPath} isGlobalFilterOn={!!globalFilter?.length} />
           </Box>
         </Box>
@@ -475,6 +473,9 @@ function DataTable({ data, layerPath, tableHeight = '500px' }: DataTableProps):
     muiTableHeadCellProps: {
       sx: () => sxClasses.tableHeadCell,
     },
+    muiTableHeadProps: {
+      sx: () => sxClasses.tableHead,
+    },
     defaultColumn: {
       muiFilterTextFieldProps: {
         sx: () => ({