Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(DataTable): add playground story
Browse files Browse the repository at this point in the history
emyarod committed Sep 15, 2020
1 parent ab8da5f commit 56f098e
Showing 1 changed file with 18 additions and 4 deletions.
22 changes: 18 additions & 4 deletions packages/react/src/components/DataTable/DataTable-story.js
Original file line number Diff line number Diff line change
@@ -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());

0 comments on commit 56f098e

Please sign in to comment.