Skip to content

Commit

Permalink
docs(DataTable): add playground story (#6842)
Browse files Browse the repository at this point in the history
* docs(DataTable): add playground story

* docs(DataTable): remove separate default story

* docs(DataTable): remove initialRows

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
emyarod and kodiakhq[bot] authored Sep 17, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 4673aaf commit b34d1c9
Showing 4 changed files with 56 additions and 122 deletions.
54 changes: 54 additions & 0 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,
@@ -356,3 +368,45 @@ export const WithCheckmarkColumns = () => {
</DataTable>
);
};

export const Playground = () => (
<DataTable
rows={rows}
headers={headers}
{...props()}
render={({
rows,
headers,
getHeaderProps,
getRowProps,
getTableProps,
getTableContainerProps,
}) => (
<TableContainer
title="DataTable"
description="With default options"
{...getTableContainerProps()}>
<Table {...getTableProps()}>
<TableHead>
<TableRow>
{headers.map((header, i) => (
<TableHeader key={i} {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, i) => (
<TableRow key={i} {...getRowProps({ row })}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
/>
);
63 changes: 0 additions & 63 deletions packages/react/src/components/DataTable/stories/default.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ import DataTable, {
TableToolbarSearch,
TableToolbarMenu,
} from '../../../DataTable';
import { batchActionClick, initialRows, headers } from '../shared';
import { batchActionClick, rows, headers } from '../shared';

export default {
title: 'DataTable/Development',
@@ -48,7 +48,7 @@ export const Example = (props) => {

class DynamicRows extends React.Component {
state = {
rows: initialRows,
rows,
headers: headers,
id: 0,
};
57 changes: 0 additions & 57 deletions packages/react/src/components/DataTable/stories/shared.js
Original file line number Diff line number Diff line change
@@ -64,63 +64,6 @@ export const rows = [
},
];

export const initialRows = [
{
id: 'a',
name: 'Load Balancer 3',
protocol: 'HTTP',
port: 3000,
rule: 'Round robin',
attached_groups: 'Kevin’s VM Groups',
status: 'Disabled',
},
{
id: 'b',
name: 'Load Balancer 1',
protocol: 'HTTP',
port: 443,
rule: 'Round robin',
attached_groups: 'Maureen’s VM Groups',
status: 'Starting',
},
{
id: 'c',
name: 'Load Balancer 2',
protocol: 'HTTP',
port: 80,
rule: 'DNS delegation',
attached_groups: 'Andrew’s VM Groups',
status: 'Active',
},
{
id: 'd',
name: 'Load Balancer 6',
protocol: 'HTTP',
port: 3000,
rule: 'Round robin',
attached_groups: 'Marc’s VM Groups',
status: 'Disabled',
},
{
id: 'e',
name: 'Load Balancer 4',
protocol: 'HTTP',
port: 443,
rule: 'Round robin',
attached_groups: 'Mel’s VM Groups',
status: 'Starting',
},
{
id: 'f',
name: 'Load Balancer 5',
protocol: 'HTTP',
port: 80,
rule: 'DNS delegation',
attached_groups: 'Ronja’s VM Groups',
status: 'Active',
},
];

export const headers = [
{
key: 'name',

0 comments on commit b34d1c9

Please sign in to comment.