Merge pull request #1798 from visualize-admin/fix/table-height

fix: Table height

Author: bprusinowski

CHANGELOG.md

@@ -11,7 +11,8 @@ You can also check the
 
 # Unreleased
 
-Nothing yet.
+- Fixes
+  - Last table row is no longer cut
 
 # [4.9.2] - 2024-10-04
 

app/charts/table/table-content.tsx

@@ -61,6 +61,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     minHeight: SORTING_ARROW_WIDTH,
     alignItems: "center",
     justifyContent: "flex-start",
+    whiteSpace: "nowrap",
   },
   headerGroupMeasure: {
     justifyContent: "flex-end",

app/charts/table/table-state.tsx

@@ -25,6 +25,7 @@ import {
 } from "@/charts/shared/chart-state";
 import { useSize } from "@/charts/shared/use-size";
 import { BAR_CELL_PADDING, TABLE_HEIGHT } from "@/charts/table/constants";
+import { getTableUIElementsOffset } from "@/charts/table/table";
 import {
   TableStateVariables,
   useTableStateData,
@@ -128,9 +129,17 @@ const useTableState = (
     left: 10,
   };
   const chartWidth = width - margins.left - margins.right; // We probably don't need this
-  const chartHeight = Math.min(TABLE_HEIGHT, chartData.length * rowHeight);
+  const chartHeight = Math.min(
+    TABLE_HEIGHT,
+    // + 1 for the header row
+    (chartData.length + 1) * rowHeight
+  );
 
-  const height = chartHeight + margins.top + margins.bottom;
+  const height =
+    chartHeight +
+    margins.top +
+    margins.bottom +
+    getTableUIElementsOffset({ showSearch: settings.showSearch, width });
   const bounds = {
     width,
     height,

app/charts/table/table.tsx

@@ -62,6 +62,23 @@ const useStyles = makeStyles(() => {
   };
 });
 
+const shouldShowCompactMobileView = (width: number) => {
+  return width < MOBILE_VIEW_THRESHOLD;
+};
+
+/** Use to make sure we don't cut the table off by having other UI elements enabled */
+export const getTableUIElementsOffset = ({
+  showSearch,
+  width,
+}: {
+  showSearch: boolean;
+  width: number;
+}) => {
+  return (
+    (showSearch ? 48 : 0) + (shouldShowCompactMobileView(width) ? 48 : 0) + 4
+  );
+};
+
 export const Table = () => {
   const {
     bounds,
@@ -78,8 +95,7 @@ export const Table = () => {
 
   const [compactMobileViewEnabled, setCompactMobileView] = useState(false);
 
-  const showCompactMobileView =
-    bounds.width < MOBILE_VIEW_THRESHOLD && compactMobileViewEnabled;
+  const showCompactMobileView = shouldShowCompactMobileView(bounds.width);
 
   // Search & filter data
   const [searchTerm, setSearchTerm] = useState("");
@@ -211,7 +227,7 @@ export const Table = () => {
               style: {
                 ...style,
                 flexDirection: "column",
-                width: "max-content",
+                width: "100%",
               },
             })}
           >
@@ -281,6 +297,10 @@ export const Table = () => {
       tableColumnsMeta,
     ]
   );
+  const defaultListHeightOffset = getTableUIElementsOffset({
+    showSearch,
+    width: bounds.width,
+  });
 
   return (
     <>
@@ -311,7 +331,7 @@ export const Table = () => {
         />
       </Box>
 
-      {showCompactMobileView ? (
+      {showCompactMobileView && compactMobileViewEnabled ? (
         /* Compact Mobile View */
         <Box
           sx={{
@@ -327,7 +347,7 @@ export const Table = () => {
             {({ width, height }: { width: number; height: number }) => (
               <VariableSizeList
                 key={rows.length} // Reset when groups are toggled because itemSize remains cached per index
-                height={height}
+                height={height - defaultListHeightOffset}
                 itemCount={rows.length}
                 itemSize={getMobileItemSize}
                 width={width}
@@ -359,7 +379,8 @@ export const Table = () => {
                 {({ height }: { height: number }) => (
                   <FixedSizeList
                     outerElementType={TableContentWrapper}
-                    height={height}
+                    // row height = header row height
+                    height={height - defaultListHeightOffset - rowHeight}
                     itemCount={rows.length}
                     itemSize={rowHeight} // depends on whether a column has bars (40px or 56px)
                     width="100%"