fix children check and custom propType checker

platform/ui/src/components/TableHead/TableHead.jsx

@@ -11,9 +11,11 @@ const TableHead = ({ children, className, style }) => {
       )}
       style={style}
     >
-      {React.cloneElement(children, {
+      {React.isValidElement(children)
-        isTableHead: true,
+        ? React.cloneElement(children, {
-      })}
+            isTableHead: true,
+          })
+        : children}
     </div>
   );
 };
@@ -24,7 +26,26 @@ TableHead.defaultProps = {
 };
 
 TableHead.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: function(props, propName, componentName) {
+    const elements = React.Children.toArray(props.children);
+    const isString = elements.some(child => typeof child === 'string');
+
+    if (isString) {
+      return new Error(
+        `Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid element instead of a string.`
+      );
+    }
+
+    const isInvalidElement = elements.some(
+      child => !React.isValidElement(child)
+    );
+
+    if (isInvalidElement) {
+      return new Error(
+        `Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid node element.`
+      );
+    }
+  },
   className: PropTypes.string,
   style: PropTypes.object,
 };

platform/ui/src/components/TableRow/TableRow.jsx

@@ -5,9 +5,11 @@ import classnames from 'classnames';
 const TableRow = ({ children, className, isTableHead, style }) => {
   return (
     <div className={classnames('w-full flex', className)} style={style}>
-      {React.Children.map(children, child =>
+      {React.isValidElement(children)
-        React.cloneElement(child, { isTableHead })
+        ? React.Children.map(children, child =>
-      )}
+            React.cloneElement(child, { isTableHead })
+          )
+        : children}
     </div>
   );
 };
@@ -20,7 +22,26 @@ TableRow.defaultProps = {
 
 TableRow.propTypes = {
   isTableHead: PropTypes.bool,
-  children: PropTypes.node.isRequired,
+  children: function(props, propName, componentName) {
+    const elements = React.Children.toArray(props.children);
+    const isString = elements.some(child => typeof child === 'string');
+
+    if (isString) {
+      return new Error(
+        `Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid element instead of a string.`
+      );
+    }
+
+    const isInvalidElement = elements.some(
+      child => !React.isValidElement(child)
+    );
+
+    if (isInvalidElement) {
+      return new Error(
+        `Failed prop type: Invalid prop ${propName} supplied to ${componentName}, expected a valid node element.`
+      );
+    }
+  },
   className: PropTypes.string,
   style: PropTypes.object,
 };