Fix compact x wrapping

Author: Marius Conjeaud

src/chart/table/TableActionsHelper.ts

@@ -15,17 +15,17 @@ export const getCheckboxes = (actionsRules, rows, getGlobalParameter) => {
     // If the parameter is an array (to be expected), iterate over it to find the rows to check.
     if (Array.isArray(values)) {
       values.forEach((value) => {
-        rows.forEach((row, index) => {
+        rows.forEach((row) => {
           if (row[fieldName] == value) {
-            selection.push(index);
+            selection.push(row.id);
           }
         });
       });
     } else {
       // Else (special case), still check the row if it's a single value parameter.
-      rows.forEach((row, index) => {
+      rows.forEach((row) => {
         if (row[fieldName] == values) {
-          selection.push(index);
+          selection.push(row.id);
         }
       });
     }
@@ -35,7 +35,8 @@ export const getCheckboxes = (actionsRules, rows, getGlobalParameter) => {
 
 export const updateCheckBoxes = (actionsRules, rows, selection, setGlobalParameter) => {
   if (hasCheckboxes(actionsRules)) {
-    const selectedRows = rows.filter((_, i) => selection.includes(i));
+    const selectedRows = rows.filter((row) => selection.includes(row.id));
+    console.log(selectedRows);
     let rules = actionsRules.filter((rule) => rule.condition && rule.condition == 'rowCheck');
     rules.forEach((rule) => {
       const parameterValues = selectedRows.map((row) => row[rule.value]).filter((v) => v !== undefined);

src/chart/table/TableChart.tsx

@@ -24,8 +24,6 @@ import Button from '@mui/material/Button';
 import { extensionEnabled } from '../../utils/ReportUtils';
 import { getCheckboxes, hasCheckboxes, updateCheckBoxes } from './TableActionsHelper';
 
-const TABLE_HEADER_HEIGHT = 32;
-const TABLE_FOOTER_HEIGHT = 62;
 const TABLE_ROW_HEIGHT = 52;
 const HIDDEN_COLUMN_PREFIX = '__';
 const theme = createTheme({
@@ -209,10 +207,13 @@ export const NeoTableChart = (props: ChartProps) => {
       });
 
   const pageNames = getPageNumbersAndNamesList();
+  const customStyles = { '&.MuiDataGrid-root .MuiDataGrid-footerContainer > div': { marginTop: '0px' } };
+
   const commonGridProps = {
     key: 'tableKey',
     columnHeaderHeight: 32,
-    density: compact ? 'compact' : 'standard',
+    rowHeight: tableRowHeight,
+    autoPageSize: true,
     rows: rows,
     columns: columns,
     columnVisibilityModel: columnVisibilityModel,
@@ -230,7 +231,6 @@ export const NeoTableChart = (props: ChartProps) => {
     checkboxSelection: hasCheckboxes(actionsRules),
     rowSelectionModel: getCheckboxes(actionsRules, rows, props.getGlobalParameter),
     onRowSelectionModelChange: (selection) => updateCheckBoxes(actionsRules, rows, selection, props.setGlobalParameter),
-    autoPageSize: true,
     disableRowSelectionOnClick: true,
     components: {
       ColumnSortedDescendingIcon: () => <></>,
@@ -301,15 +301,12 @@ export const NeoTableChart = (props: ChartProps) => {
             {...commonGridProps}
             getRowHeight={() => 'auto'}
             sx={{
-              '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '3px' },
-              '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell:has(button)': { py: '0px' },
-              '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
-              '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' },
+              ...customStyles,
               '&.MuiDataGrid-root .MuiDataGrid-cell': { wordBreak: 'break-word' },
             }}
           />
         ) : (
-          <DataGrid {...commonGridProps} rowHeight={tableRowHeight} />
+          <DataGrid {...commonGridProps} sx={customStyles} />
         )}
       </div>
     </ThemeProvider>

src/index.pcss

@@ -74,6 +74,11 @@
     @apply n-ml-token-3;
   }
 
+  /* DataGrid overrides */
+  .MuiDataGrid-footerContainer > div {
+    @apply n-mt-0;
+  }
+
   /* Make bullet list points in Markdown card view */
   .card-view ul {
     @apply n-list-disc n-ml-token-7;