docs(DataTable): add playground story

carbon-design-system · Sep 15, 2020 · 56f098e · 56f098e
1 parent ab8da5f
commit 56f098e
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/packages/react/src/components/DataTable/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js
@@ -9,6 +9,7 @@ import './stories/datatable-story.scss';
 
 import { action } from '@storybook/addon-actions';
 import React from 'react';
+import { withKnobs, boolean, select } from '@storybook/addon-knobs';
 import Button from '../Button';
 import Checkbox from '../Checkbox';
 import OverflowMenu from '../OverflowMenu';
@@ -31,6 +32,16 @@ import {
 import mdx from './DataTable.mdx';
 import { headers, rows } from './stories/shared';
 
+const props = () => ({
+  useZebraStyles: boolean('Zebra row styles (useZebraStyles)', false),
+  size: select(
+    'Row height (size)',
+    { compact: 'compact', short: 'short', tall: 'tall', none: null },
+    null
+  ),
+  stickyHeader: boolean('Sticky header (experimental)', false),
+});
+
 export default {
   title: 'DataTable',
   component: DataTable,
@@ -43,6 +54,7 @@ export default {
     TableBody,
     TableCell,
   },
+  decorators: [withKnobs],
   parameters: {
     docs: {
       page: mdx,
@@ -51,7 +63,7 @@ export default {
 };
 
 export const Usage = () => (
-  <DataTable rows={rows} headers={headers}>
+  <DataTable rows={rows} headers={headers} {...props()}>
     {({
       rows,
       headers,
@@ -140,7 +152,7 @@ export const BasicTable = () => {
 };
 
 export const WithOverflowMenu = () => (
-  <DataTable rows={rows} headers={headers}>
+  <DataTable rows={rows} headers={headers} {...props()}>
     {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
       <TableContainer title="DataTable" description="With overflow menu">
         <Table {...getTableProps()}>
@@ -177,7 +189,7 @@ export const WithOverflowMenu = () => (
 );
 
 export const WithToolbar = () => (
-  <DataTable rows={rows} headers={headers}>
+  <DataTable rows={rows} headers={headers} {...props()}>
     {({
       rows,
       headers,
@@ -302,7 +314,7 @@ export const WithCheckmarkColumns = () => {
   ];
 
   return (
-    <DataTable rows={rows} headers={headers}>
+    <DataTable rows={rows} headers={headers} {...props()}>
       {({
         rows,
         headers,
@@ -356,3 +368,5 @@ export const WithCheckmarkColumns = () => {
     </DataTable>
   );
 };
+
+export const Playground = () => require('./stories/default').default(props());