feat(TableBody): add ability to pass data and render prop to table body

8base · Oct 30, 2018 · a6b8f88 · a6b8f88
1 parent e126561
commit a6b8f88
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/src/atoms/Table/TableBody.js b/src/atoms/Table/TableBody.js
@@ -1,11 +1,14 @@
 // @flow
 import React from 'react';
 
+import { AsyncContent } from '../../molecules/AsyncContent';
 import { Grid } from '../Grid';
 import { createStyledTag, createTheme } from '../../utils';
 
 type TableBodyProps = {
   children?: React$Node,
+  loading?: boolean,
+  data?: any[],
 };
 
 const name = 'tableBody';
@@ -27,9 +30,23 @@ const TableBodyTag = createStyledTag(name, (props: *) => ({
 
 function TableBody({
   children,
+  data,
+  loading,
   ...rest
   }: TableBodyProps) {
-  return <TableBodyTag { ...rest } tagName={ Grid.Layout }>{ children }</TableBodyTag>;
+  return (
+    <TableBodyTag { ...rest } tagName={ Grid.Layout }>
+      <AsyncContent loading={ loading } stretch>
+        {
+          Array.isArray(data) && typeof children === 'function'
+            ?
+            React.Children.toArray(data.map(children))
+            :
+            children
+        }
+      </AsyncContent>
+    </TableBodyTag>
+  );
 }
 
 export { TableBody, theme };