@instructure/ui-table 9.6.1-snapshot-2 → 9.7.2

package/CHANGELOG.md

@@ -3,7 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.6.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.6.0...v9.6.1-snapshot-2) (2024-09-06)
+## [9.7.2](https://github.com/instructure/instructure-ui/compare/v9.7.0...v9.7.2) (2024-10-10)
+
+
+### Bug Fixes
+
+* **ui-table:** non standrd Row children props ([700e462](https://github.com/instructure/instructure-ui/commit/700e462cc8de0cfb68f0ed8a442dcd23961e4b77))
+
+
+
+
+
+## [9.7.1](https://github.com/instructure/instructure-ui/compare/v9.7.0...v9.7.1) (2024-10-10)
+
+
+### Bug Fixes
+
+* **ui-table:** non standrd Row children props ([700e462](https://github.com/instructure/instructure-ui/commit/700e462cc8de0cfb68f0ed8a442dcd23961e4b77))
+
+
+
+
+
+# [9.7.0](https://github.com/instructure/instructure-ui/compare/v9.6.0...v9.7.0) (2024-09-23)
 
 **Note:** Version bump only for package @instructure/ui-table
 

package/es/Table/Body/index.js

@@ -24,7 +24,7 @@ var _dec, _class, _Body;
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react';
+import { Component, Children, isValidElement } from 'react';
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { withStyle, jsx } from '@instructure/emotion';
@@ -58,12 +58,17 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       as: isStacked ? 'div' : 'tbody',
       css: styles === null || styles === void 0 ? void 0 : styles.body,
       role: isStacked ? 'rowgroup' : void 0
-    }), Children.map(children, child => safeCloneElement(child, {
-      key: child.props.name,
-      hover,
-      isStacked,
-      headers
-    })));
+    }), Children.map(children, child => {
+      if ( /*#__PURE__*/isValidElement(child)) {
+        return safeCloneElement(child, {
+          key: child.props.name,
+          isStacked,
+          hover,
+          headers
+        });
+      }
+      return child;
+    }));
   }
 }, _Body.displayName = "Body", _Body.componentId = 'Table.Body', _Body.allowedProps = allowedProps, _Body.propTypes = propTypes, _Body.defaultProps = {
   children: null

package/es/Table/Row/index.js

@@ -25,13 +25,14 @@ var _dec, _class, _Row;
 
 /** @jsx jsx */
 import { Component, Children } from 'react';
-import { omitProps, safeCloneElement } from '@instructure/ui-react-utils';
+import { omitProps, safeCloneElement, matchComponentTypes } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
+import { Cell } from '../Cell';
+import { RowHeader } from '../RowHeader';
 import { allowedProps, propTypes } from './props';
-
 /**
 ---
 parent: Table
@@ -58,11 +59,20 @@ let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       css: styles === null || styles === void 0 ? void 0 : styles.row,
       role: isStacked ? 'row' : void 0
     }), Children.toArray(children).filter(Boolean).map((child, index) => {
-      return safeCloneElement(child, {
-        key: child.props.name,
-        isStacked,
-        header: headers && headers[index]
-      });
+      if (matchComponentTypes(child, [RowHeader])) {
+        return safeCloneElement(child, {
+          key: index,
+          isStacked
+        });
+      }
+      if (matchComponentTypes(child, [Cell])) {
+        return safeCloneElement(child, {
+          key: index,
+          isStacked,
+          header: headers && headers[index]
+        });
+      }
+      return child;
     }));
   }
 }, _Row.displayName = "Row", _Row.componentId = 'Table.Row', _Row.allowedProps = allowedProps, _Row.propTypes = propTypes, _Row.defaultProps = {

package/es/Table/__new-tests__/Table.test.js

@@ -1,4 +1,4 @@
-var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _Table$Body2;
+var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _span, _Table$Row, _span2, _span3, _Table$Row2, _Table$Body2;
 /*
  * The MIT License (MIT)
  *
@@ -127,6 +127,15 @@ describe('<Table />', async () => {
     expect(stackedTable).toBeInTheDocument();
     expect(stackedTable).not.toHaveTextContent('Foo');
   });
+  it('does not crash for invalid children', async () => {
+    render( /*#__PURE__*/React.createElement(Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, /*#__PURE__*/React.createElement(Table.Head, null, _span || (_span = /*#__PURE__*/React.createElement("span", null, "test")), "test2", _Table$Row || (_Table$Row = /*#__PURE__*/React.createElement(Table.Row, null, "test3", /*#__PURE__*/React.createElement("span", null, "test"), /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"))), "test4", _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null, "test"))), "test5", /*#__PURE__*/React.createElement(Table.Body, null, "test", _span3 || (_span3 = /*#__PURE__*/React.createElement("span", null, "test")), _Table$Row2 || (_Table$Row2 = /*#__PURE__*/React.createElement(Table.Row, null, "test", /*#__PURE__*/React.createElement("span", null, "test"), /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"), "test", /*#__PURE__*/React.createElement("span", null, "test"))))));
+    const table = screen.getByRole('table');
+    expect(table).toBeInTheDocument();
+    expect(table).toHaveTextContent('Foo');
+  });
   describe('when table is sortable', async () => {
     const renderSortableTable = (props, handlers = {}, layout = 'auto') => render( /*#__PURE__*/React.createElement(Table, {
       caption: "Sortable table",

package/es/Table/index.js

@@ -25,7 +25,7 @@ var _dec, _class, _Table;
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react';
+import { Component, Children, isValidElement } from 'react';
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils';
 import { View } from '@instructure/ui-view';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -66,15 +66,16 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
   getHeaders() {
-    const children = this.props.children;
-    const _ref = Children.toArray(children),
-      _ref2 = _slicedToArray(_ref, 1),
-      head = _ref2[0];
-    const _Children$toArray = Children.toArray(head.props.children),
+    const _Children$toArray = Children.toArray(this.props.children),
       _Children$toArray2 = _slicedToArray(_Children$toArray, 1),
-      row = _Children$toArray2[0];
-    if (!row) return void 0;
-    return Children.map(row.props.children, colHeader => {
+      headChild = _Children$toArray2[0];
+    if (!headChild || ! /*#__PURE__*/isValidElement(headChild)) return void 0;
+    const _Children$toArray3 = Children.toArray(headChild.props.children),
+      _Children$toArray4 = _slicedToArray(_Children$toArray3, 1),
+      firstRow = _Children$toArray4[0];
+    if (!firstRow || ! /*#__PURE__*/isValidElement(firstRow)) return void 0;
+    return Children.map(firstRow.props.children, colHeader => {
+      if (! /*#__PURE__*/isValidElement(colHeader)) return void 0;
       return colHeader.props.children;
     });
   }
@@ -96,12 +97,15 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       role: isStacked ? 'table' : void 0,
       "aria-label": isStacked ? caption : void 0
     }), !isStacked && jsx("caption", null, jsx(ScreenReaderContent, null, caption)), Children.map(children, child => {
-      return safeCloneElement(child, {
-        key: child.props.name,
-        isStacked,
-        hover,
-        headers
-      });
+      if ( /*#__PURE__*/isValidElement(child)) {
+        return safeCloneElement(child, {
+          key: child.props.name,
+          isStacked,
+          hover,
+          headers
+        });
+      }
+      return child;
     }));
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = allowedProps, _Table.propTypes = propTypes, _Table.defaultProps = {

package/lib/Table/Body/index.js

@@ -64,12 +64,17 @@ let Body = exports.Body = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       as: isStacked ? 'div' : 'tbody',
       css: styles === null || styles === void 0 ? void 0 : styles.body,
       role: isStacked ? 'rowgroup' : void 0
-    }), _react.Children.map(children, child => (0, _safeCloneElement.safeCloneElement)(child, {
-      key: child.props.name,
-      hover,
-      isStacked,
-      headers
-    })));
+    }), _react.Children.map(children, child => {
+      if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          key: child.props.name,
+          isStacked,
+          hover,
+          headers
+        });
+      }
+      return child;
+    }));
   }
 }, _Body.displayName = "Body", _Body.componentId = 'Table.Body', _Body.allowedProps = _props.allowedProps, _Body.propTypes = _props.propTypes, _Body.defaultProps = {
   children: null

package/lib/Table/Row/index.js

@@ -8,10 +8,13 @@ exports.default = exports.Row = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _View = require("@instructure/ui-view/lib/View");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
+var _Cell = require("../Cell");
+var _RowHeader = require("../RowHeader");
 var _props = require("./props");
 var _dec, _class, _Row;
 /*
@@ -64,11 +67,20 @@ let Row = exports.Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       css: styles === null || styles === void 0 ? void 0 : styles.row,
       role: isStacked ? 'row' : void 0
     }), _react.Children.toArray(children).filter(Boolean).map((child, index) => {
-      return (0, _safeCloneElement.safeCloneElement)(child, {
-        key: child.props.name,
-        isStacked,
-        header: headers && headers[index]
-      });
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_RowHeader.RowHeader])) {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          key: index,
+          isStacked
+        });
+      }
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Cell.Cell])) {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          key: index,
+          isStacked,
+          header: headers && headers[index]
+        });
+      }
+      return child;
     }));
   }
 }, _Row.displayName = "Row", _Row.componentId = 'Table.Row', _Row.allowedProps = _props.allowedProps, _Row.propTypes = _props.propTypes, _Row.defaultProps = {

package/lib/Table/__new-tests__/Table.test.js

@@ -8,7 +8,7 @@ var _userEvent = require("@testing-library/user-event");
 require("@testing-library/jest-dom");
 var _index = require("../index");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
-var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _Table$Body2;
+var _Table$Head, _Table$Body, _Table, _Table2, _Table3, _span, _Table$Row, _span2, _span3, _Table$Row2, _Table$Body2;
 /*
  * The MIT License (MIT)
  *
@@ -129,6 +129,15 @@ describe('<Table />', async () => {
     expect(stackedTable).toBeInTheDocument();
     expect(stackedTable).not.toHaveTextContent('Foo');
   });
+  it('does not crash for invalid children', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
+      caption: "Test table",
+      layout: "stacked"
+    }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, _span || (_span = /*#__PURE__*/_react.default.createElement("span", null, "test")), "test2", _Table$Row || (_Table$Row = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test3", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"))), "test4", _span2 || (_span2 = /*#__PURE__*/_react.default.createElement("span", null, "test"))), "test5", /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, "test", _span3 || (_span3 = /*#__PURE__*/_react.default.createElement("span", null, "test")), _Table$Row2 || (_Table$Row2 = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"), "test", /*#__PURE__*/_react.default.createElement("span", null, "test"))))));
+    const table = _react2.screen.getByRole('table');
+    expect(table).toBeInTheDocument();
+    expect(table).toHaveTextContent('Foo');
+  });
   describe('when table is sortable', async () => {
     const renderSortableTable = (props, handlers = {}, layout = 'auto') => (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Sortable table",

package/lib/Table/index.js

@@ -72,15 +72,16 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
   getHeaders() {
-    const children = this.props.children;
-    const _ref = _react.Children.toArray(children),
-      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-      head = _ref2[0];
-    const _Children$toArray = _react.Children.toArray(head.props.children),
+    const _Children$toArray = _react.Children.toArray(this.props.children),
       _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 1),
-      row = _Children$toArray2[0];
-    if (!row) return void 0;
-    return _react.Children.map(row.props.children, colHeader => {
+      headChild = _Children$toArray2[0];
+    if (!headChild || ! /*#__PURE__*/(0, _react.isValidElement)(headChild)) return void 0;
+    const _Children$toArray3 = _react.Children.toArray(headChild.props.children),
+      _Children$toArray4 = (0, _slicedToArray2.default)(_Children$toArray3, 1),
+      firstRow = _Children$toArray4[0];
+    if (!firstRow || ! /*#__PURE__*/(0, _react.isValidElement)(firstRow)) return void 0;
+    return _react.Children.map(firstRow.props.children, colHeader => {
+      if (! /*#__PURE__*/(0, _react.isValidElement)(colHeader)) return void 0;
       return colHeader.props.children;
     });
   }
@@ -102,12 +103,15 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       role: isStacked ? 'table' : void 0,
       "aria-label": isStacked ? caption : void 0
     }), !isStacked && (0, _emotion.jsx)("caption", null, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, caption)), _react.Children.map(children, child => {
-      return (0, _safeCloneElement.safeCloneElement)(child, {
-        key: child.props.name,
-        isStacked,
-        hover,
-        headers
-      });
+      if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
+          key: child.props.name,
+          isStacked,
+          hover,
+          headers
+        });
+      }
+      return child;
     }));
   }
 }, _Table.displayName = "Table", _Table.componentId = 'Table', _Table.allowedProps = _props.allowedProps, _Table.propTypes = _props.propTypes, _Table.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "9.6.1-snapshot-2",
+  "version": "9.7.2",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.6.1-snapshot-2",
-    "@instructure/ui-babel-preset": "9.6.1-snapshot-2",
-    "@instructure/ui-color-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-test-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-themes": "9.6.1-snapshot-2",
+    "@instructure/ui-axe-check": "9.7.2",
+    "@instructure/ui-babel-preset": "9.7.2",
+    "@instructure/ui-color-utils": "9.7.2",
+    "@instructure/ui-test-utils": "9.7.2",
+    "@instructure/ui-themes": "9.7.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -35,17 +35,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.6.1-snapshot-2",
-    "@instructure/emotion": "9.6.1-snapshot-2",
-    "@instructure/shared-types": "9.6.1-snapshot-2",
-    "@instructure/ui-a11y-content": "9.6.1-snapshot-2",
-    "@instructure/ui-icons": "9.6.1-snapshot-2",
-    "@instructure/ui-prop-types": "9.6.1-snapshot-2",
-    "@instructure/ui-react-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-simple-select": "9.6.1-snapshot-2",
-    "@instructure/ui-testable": "9.6.1-snapshot-2",
-    "@instructure/ui-utils": "9.6.1-snapshot-2",
-    "@instructure/ui-view": "9.6.1-snapshot-2",
+    "@instructure/console": "9.7.2",
+    "@instructure/emotion": "9.7.2",
+    "@instructure/shared-types": "9.7.2",
+    "@instructure/ui-a11y-content": "9.7.2",
+    "@instructure/ui-icons": "9.7.2",
+    "@instructure/ui-prop-types": "9.7.2",
+    "@instructure/ui-react-utils": "9.7.2",
+    "@instructure/ui-simple-select": "9.7.2",
+    "@instructure/ui-testable": "9.7.2",
+    "@instructure/ui-utils": "9.7.2",
+    "@instructure/ui-view": "9.7.2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Table/Body/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react'
+import { Component, Children, isValidElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -70,14 +70,17 @@ class Body extends Component<TableBodyProps> {
         css={styles?.body}
         role={isStacked ? 'rowgroup' : undefined}
       >
-        {Children.map(children as RowChild[], (child) =>
-          safeCloneElement(child, {
-            key: child.props.name,
-            hover,
-            isStacked,
-            headers
-          })
-        )}
+        {Children.map(children as RowChild[], (child) => {
+          if (isValidElement(child)) {
+            return safeCloneElement(child, {
+              key: child.props.name,
+              isStacked,
+              hover,
+              headers
+            })
+          }
+          return child
+        })}
       </View>
     )
   }

package/src/Table/Row/index.tsx

@@ -25,7 +25,11 @@
 /** @jsx jsx */
 import { Component, Children } from 'react'
 
-import { omitProps, safeCloneElement } from '@instructure/ui-react-utils'
+import {
+  omitProps,
+  safeCloneElement,
+  matchComponentTypes
+} from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
 
 import { withStyle, jsx } from '@instructure/emotion'
@@ -33,8 +37,12 @@ import { withStyle, jsx } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
+import { Cell } from '../Cell'
+import { RowHeader } from '../RowHeader'
+
 import type { TableRowProps } from './props'
 import { allowedProps, propTypes } from './props'
+import type { RowHeaderChild, CellChild } from '../props'
 
 /**
 ---
@@ -73,12 +81,22 @@ class Row extends Component<TableRowProps> {
       >
         {Children.toArray(children)
           .filter(Boolean)
-          .map((child: any, index) => {
-            return safeCloneElement(child, {
-              key: child.props.name,
-              isStacked,
-              header: headers && headers[index]
-            })
+          .map((child, index) => {
+            if (matchComponentTypes<RowHeaderChild>(child, [RowHeader])) {
+              return safeCloneElement(child, {
+                key: index,
+                isStacked
+              })
+            }
+            if (matchComponentTypes<CellChild>(child, [Cell])) {
+              return safeCloneElement(child, {
+                key: index,
+                isStacked,
+                header: headers && headers[index]
+              })
+            }
+
+            return child
           })}
       </View>
     )

package/src/Table/__new-tests__/Table.test.tsx

@@ -167,6 +167,42 @@ describe('<Table />', async () => {
     expect(stackedTable).not.toHaveTextContent('Foo')
   })
 
+  it('does not crash for invalid children', async () => {
+    render(
+      <Table caption="Test table" layout="stacked">
+        <Table.Head>
+          <span>test</span>
+          test2
+          {/* @ts-ignore error is normal here */}
+          <Table.Row>
+            test3
+            <span>test</span>
+            <Table.Cell>Foo</Table.Cell>
+          </Table.Row>
+          test4
+          <span>test</span>
+        </Table.Head>
+        test5
+        <Table.Body>
+          test
+          <span>test</span>
+          {/* @ts-ignore error is normal here */}
+          <Table.Row>
+            test
+            <span>test</span>
+            <Table.Cell>Foo</Table.Cell>
+            test
+            <span>test</span>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    )
+    const table = screen.getByRole('table')
+
+    expect(table).toBeInTheDocument()
+    expect(table).toHaveTextContent('Foo')
+  })
+
   describe('when table is sortable', async () => {
     const renderSortableTable = (
       props: TableColHeaderProps | null,

package/src/Table/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react'
+import { Component, Children, isValidElement } from 'react'
 
 import { safeCloneElement, omitProps } from '@instructure/ui-react-utils'
 import { View } from '@instructure/ui-view'
@@ -41,13 +41,7 @@ import { ColHeader } from './ColHeader'
 import { RowHeader } from './RowHeader'
 import { Cell } from './Cell'
 
-import type {
-  TableProps,
-  HeadChild,
-  ColHeaderChild,
-  RowHeaderChild,
-  CellChild
-} from './props'
+import type { TableProps } from './props'
 
 import { allowedProps, propTypes } from './props'
 
@@ -97,17 +91,14 @@ class Table extends Component<TableProps> {
   }
 
   getHeaders() {
-    const { children } = this.props
-    const [head] = Children.toArray(children) as HeadChild[]
-    const [row]: any = Children.toArray(head.props.children)
-    if (!row) return undefined
-
-    return Children.map(
-      row.props.children as (ColHeaderChild | RowHeaderChild | CellChild)[],
-      (colHeader) => {
-        return colHeader.props.children
-      }
-    )
+    const [headChild] = Children.toArray(this.props.children)
+    if (!headChild || !isValidElement(headChild)) return undefined
+    const [firstRow] = Children.toArray(headChild.props.children)
+    if (!firstRow || !isValidElement(firstRow)) return undefined
+    return Children.map(firstRow.props.children, (colHeader) => {
+      if (!isValidElement<{ children?: any }>(colHeader)) return undefined
+      return colHeader.props.children
+    })
   }
 
   render() {
@@ -133,13 +124,16 @@ class Table extends Component<TableProps> {
             <ScreenReaderContent>{caption}</ScreenReaderContent>
           </caption>
         )}
-        {Children.map(children, (child: any) => {
-          return safeCloneElement(child, {
-            key: child.props.name,
-            isStacked,
-            hover,
-            headers
-          })
+        {Children.map(children, (child) => {
+          if (isValidElement(child)) {
+            return safeCloneElement(child, {
+              key: child.props.name,
+              isStacked,
+              hover,
+              headers
+            })
+          }
+          return child
         })}
       </View>
     )