fix(AnalyticalTable): Don't crash when no columns provided

SAP · Oct 2, 2019 · bed976b · bed976b
1 parent 0fd00db
commit bed976b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 19 deletions.
diff --git a/packages/main/package.json b/packages/main/package.json
@@ -22,7 +22,7 @@
     "@ui5/webcomponents": "1.0.0-rc.2",
     "@ui5/webcomponents-react-base": "0.6.0-rc.9",
     "lodash.debounce": "^4.0.8",
-    "react-table": "7.0.0-beta.0",
+    "react-table": "7.0.0-beta.5",
     "react-toastify": "^5.0.1",
     "react-window": "^1.8.5",
     "resize-observer-polyfill": "^1.5.1"

diff --git a/packages/main/src/components/AnalyticalTable/hooks/utils.ts b/packages/main/src/components/AnalyticalTable/hooks/utils.ts
@@ -4,7 +4,15 @@ export const makeTemplateColumns = (columns, resizedColumns) => {
       if (resizedColumns[column.id]) {
         return `${resizedColumns[column.id]}px`;
       }
-      return `minmax(${column.minWidth}px, ${column.width || '1fr'})`;
+
+      let columnWidth = column.width;
+      if (typeof columnWidth === 'number') {
+        columnWidth = `${columnWidth}px`;
+      }
+      if (!columnWidth) {
+        columnWidth = '1fr';
+      }
+      return `minmax(${column.minWidth}px, ${columnWidth})`;
     })
     .join(' ');
 };
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -83,16 +83,18 @@ export interface TableProps extends CommonProps {
 }
 
 const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'AnalyticalTable' });
+const defaultFilterMethod = (filter, row) => {
+  return new RegExp(filter.value, 'gi').test(String(row[filter.id]));
+};
 
 const defaultColumn = {
   Filter: DefaultFilterComponent,
   canResize: true,
   minWidth: 30,
+  width: '1fr',
   vAlign: VerticalAlign.Middle,
   Aggregated: () => null,
-  defaultFilter: (filter, row) => {
-    return new RegExp(filter.value, 'gi').test(String(row[filter.id]));
-  }
+  defaultFilter: defaultFilterMethod
 };
 
 const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<HTMLDivElement>) => {
@@ -169,15 +171,21 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
       {typeof renderExtension === 'function' && <div>{renderExtension()}</div>}
       <div className={tableContainerClasses.valueOf()}>
         <div {...getTableProps()}>
-          {headerGroups.map((headerGroup) => (
-            <header {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column, index) => (
-                <ColumnHeader {...column.getHeaderProps()} isLastColumn={index === columns.length - 1}>
-                  {column.render('Header')}
-                </ColumnHeader>
-              ))}
-            </header>
-          ))}
+          {headerGroups.map((headerGroup) => {
+            let props = {};
+            if (headerGroup.getHeaderGroupProps) {
+              props = headerGroup.getHeaderGroupProps();
+            }
+            return (
+              <header {...props}>
+                {headerGroup.headers.map((column, index) => (
+                  <ColumnHeader {...column.getHeaderProps()} isLastColumn={index === columns.length - 1}>
+                    {column.render('Header')}
+                  </ColumnHeader>
+                ))}
+              </header>
+            );
+          })}
           <VirtualTableBody
             {...props}
             tableBodyClasses={tableBodyClasses}

diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
@@ -99,7 +99,7 @@ export const VirtualTableBody = (props) => {
         </div>
       );
     },
-    [classes, columns, rows, prepareRow]
+    [classes, columns, rows, prepareRow, rowContainerStyling]
   );
 
   useEffect(() => {

diff --git a/yarn.lock b/yarn.lock
@@ -13958,10 +13958,10 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-table@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.0.tgz#2ba60ce9faa8286c2c8ebe668efdd14308129ccf"
-  integrity sha512-ddPDtsGMAq1m4Mh/pIn1uUaGAUikS52YMAfOhduKQkz+3UuQVqcUU44C6e8/9S7GZrMB+Vp1MwqmHJwR5ciW/g==
+react-table@7.0.0-beta.5:
+  version "7.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.5.tgz#c0cbb9c38fba392afb46f2338152d03b949ddc3d"
+  integrity sha512-76kNCY5a8DS6RiUpx+qrN6LuzyW/TaEKu820GO5jBzZqZXkF1OxYGQSS3VSnu/EtdDY04dSuZO38KGPHSwpvyA==
 
 react-test-renderer@^16.0.0-0:
   version "16.8.6"
-Original file line number
+Diff line change
@@ Expand Up / @@ -99,7 +99,7 @@ export const VirtualTableBody = (props) => { @@
             </div>
           );
         },
-        [classes, columns, rows, prepareRow]
+        [classes, columns, rows, prepareRow, rowContainerStyling]
       );
       useEffect(() => {
@@ Expand Down @@