Makes table resizable

apache · Nov 30, 2022 · 87d4041 · 87d4041
1 parent fda2b66
commit 87d4041
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 27 deletions.
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
@@ -22,6 +22,7 @@ import React, {
   useMemo,
   useCallback,
   useRef,
+  ReactElement,
 } from 'react';
 import { useSelector } from 'react-redux';
 import {
@@ -34,6 +35,7 @@ import {
   JsonObject,
   GenericDataType,
 } from '@superset-ui/core';
+import { useResizeDetector } from 'react-resize-detector';
 import Loading from 'src/components/Loading';
 import BooleanCell from 'src/components/Table/cell-renderers/BooleanCell';
 import NullCell from 'src/components/Table/cell-renderers/NullCell';
@@ -62,6 +64,23 @@ interface DataType {
   [key: string]: any;
 }
 
+// Must be outside of the main component due to problems in
+// react-resize-detector with conditional rendering
+// https://github.com/maslianok/react-resize-detector/issues/178
+function Resizable({ children }: { children: ReactElement }) {
+  const { ref, height } = useResizeDetector();
+  return (
+    <div ref={ref} css={{ flex: 1 }}>
+      {React.cloneElement(children, { height })}
+    </div>
+  );
+}
+
+enum TimeFormatting {
+  Original,
+  Formatted,
+}
+
 export default function DrillDetailPane({
   formData,
   initialFilters,
@@ -113,11 +132,16 @@ export default function DrillDetailPane({
               headerTitle={column}
               groupTitle={t('Formatting')}
               groupOptions={[
-                { label: t('Original value'), value: 'original' },
-                { label: t('Formatted value'), value: 'formatted' },
+                { label: t('Original value'), value: TimeFormatting.Original },
+                {
+                  label: t('Formatted value'),
+                  value: TimeFormatting.Formatted,
+                },
               ]}
               value={
-                timeFormatting[column] === 'original' ? 'original' : 'formatted'
+                timeFormatting[column] === TimeFormatting.Original
+                  ? TimeFormatting.Original
+                  : TimeFormatting.Formatted
               }
               onChange={value =>
                 setTimeFormatting(state => ({ ...state, [column]: value }))
@@ -135,7 +159,7 @@ export default function DrillDetailPane({
           }
           if (
             resultsPage?.colTypes[index] === GenericDataType.TEMPORAL &&
-            timeFormatting[column] !== 'original' &&
+            timeFormatting[column] !== TimeFormatting.Original &&
             (typeof value === 'number' || value instanceof Date)
           ) {
             return <TimeCell value={value} />;
@@ -269,21 +293,22 @@ export default function DrillDetailPane({
   } else {
     // Render table if at least one page has successfully loaded
     tableContent = (
-      <Table
-        data={data}
-        columns={mappedColumns}
-        size={TableSize.SMALL}
-        defaultPageSize={PAGE_SIZE}
-        recordCount={resultsPage?.total}
-        usePagination
-        loading={isLoading}
-        onChange={(pagination: TablePaginationConfig) =>
-          setPageIndex(pagination.current ? pagination.current - 1 : 0)
-        }
-        height={470}
-        resizable
-        virtualize
-      />
+      <Resizable>
+        <Table
+          data={data}
+          columns={mappedColumns}
+          size={TableSize.SMALL}
+          defaultPageSize={PAGE_SIZE}
+          recordCount={resultsPage?.total}
+          usePagination
+          loading={isLoading}
+          onChange={(pagination: TablePaginationConfig) =>
+            setPageIndex(pagination.current ? pagination.current - 1 : 0)
+          }
+          resizable
+          virtualize
+        />
+      </Resizable>
     );
   }
 

diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx
@@ -82,6 +82,7 @@ export default function TableControls({
         display: flex;
         justify-content: space-between;
         padding: ${theme.gridUnit / 2}px 0;
+        margin-bottom: ${theme.gridUnit * 2}px;
       `}
     >
       <div

diff --git a/superset-frontend/src/components/Table/VirtualTable.tsx b/superset-frontend/src/components/Table/VirtualTable.tsx
@@ -24,7 +24,7 @@ import { VariableSizeGrid as Grid } from 'react-window';
 import { StyledComponent } from '@emotion/styled';
 import { useTheme, styled } from '@superset-ui/core';
 import { TablePaginationConfig } from 'antd/lib/table';
-import { TableProps, TableSize, HEIGHT_OFFSET, ETableAction } from './index';
+import { TableProps, TableSize, ETableAction } from './index';
 
 const StyledCell: StyledComponent<any> = styled('div')<any>(
   ({ theme, height }) => `
@@ -176,7 +176,7 @@ const VirtualTable = (props: TableProps) => {
           const { width = DEFAULT_COL_WIDTH } = mergedColumns[index];
           return width as number;
         }}
-        height={height ? height - HEIGHT_OFFSET : (scroll!.y as number)}
+        height={height || (scroll!.y as number)}
         rowCount={rawData.length}
         rowHeight={() => cellSize}
         width={tableWidth}

diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
@@ -26,8 +26,8 @@ import Popover from 'src/components/Popover';
 export interface HeaderWithRadioGroupProps {
   headerTitle: string;
   groupTitle: string;
-  groupOptions: { label: string; value: string }[];
-  value?: string;
+  groupOptions: { label: string; value: string | number }[];
+  value?: string | number;
   onChange: (value: string) => void;
 }
 

diff --git a/superset-frontend/src/components/Table/index.tsx b/superset-frontend/src/components/Table/index.tsx
@@ -200,14 +200,15 @@ export enum TableSize {
 }
 
 const defaultRowSelection: React.Key[] = [];
-// This accounts for the tables header and pagination if user gives table instance a height. this is a temp solution
-export const HEIGHT_OFFSET = 108;
+
+const PAGINATION_HEIGHT = 40;
+const HEADER_HEIGHT = 68;
 
 const StyledTable: StyledComponent<any> = styled(AntTable)<any>(
   ({ theme, height }) => `
     .ant-table-body {
       overflow: auto;
-      height: ${height ? `${height - HEIGHT_OFFSET}px` : undefined};
+      height: ${height ? `${height}px` : undefined};
     }
 
     th.ant-table-cell {
@@ -405,6 +406,16 @@ export function Table(props: TableProps) {
     paginationSettings.total = recordCount;
   }
 
+  let bodyHeight = height;
+  if (bodyHeight) {
+    bodyHeight -= HEADER_HEIGHT;
+    const hasPagination =
+      usePagination && recordCount && recordCount > pageSize;
+    if (hasPagination) {
+      bodyHeight -= PAGINATION_HEIGHT;
+    }
+  }
+
   const sharedProps = {
     loading: { spinning: loading ?? false, indicator: <Loading /> },
     hasData: hideData ? false : data,
@@ -416,7 +427,7 @@ export function Table(props: TableProps) {
     showSorterTooltip: false,
     onChange,
     theme,
-    height,
+    height: bodyHeight,
   };
 
   return (