[DataTable] - Received `true` for a non-boolean attribute `expandable`

[ar1a]

Hi! I was trying to put a table inside the expanded section in a card, and it would only be hidden when unexpanded if i set expandable to true. Observe: https://codepen.io/anon/pen/pVMVPp

[mlaursen]

Ahh. This is because The DataTable applies all remaining props onto the div or table element inside. The cards were the only components that were expected to have the expandable props used, so they were correctly removed before passing to the dom element. You can get around this error by doing:

+const Table = () => (
+  <DataTable baseId="recipes-table" indeterminate>
+    <TableHeader>
+      <TableRow>
+        <TableColumn grow>Name</TableColumn>
+        <TableColumn>Quantity</TableColumn>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableColumn>Test</TableColumn>
+        <TableColumn>Test</TableColumn>
+      </TableRow>
+    </TableBody>
+  </DataTable>
+);
+
 const Example = () => (
   <Card tableCard>
     <CardTitle title="Example" />
     <CardActions expander />
+    <Table expandable />
-    <DataTable baseId="recipes-table" indeterminate expandable>
-      <TableHeader>
-        <TableRow>
-          <TableColumn grow>Name</TableColumn>
-          <TableColumn>Quantity</TableColumn>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableColumn>Test</TableColumn>
-          <TableColumn>Test</TableColumn>
-        </TableRow>
-      </TableBody>
-    </DataTable>
     <CardActions expandable>
       <Button secondary flat>
         Delete Selected
       </Button>
     </CardActions>
   </Card>

so that the expandable prop isn't passed down to the DataTable component