@flexis/ui/components/Table/Table.stories.babel.js

Styleless React Components

import React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '../../helpers/stories';
import Table, { TableHead, TableBody, TableFoot, TableRow, TableCell, Order } from './';
export const stylableApi = `
Stylable API
---
- ::head
- ::body
- ::row
- ::cell
	- :head
	- :orderNone
	- :orderAsc
	- :orderDesc
`;
const rowsCount = 10;
const columnsCount = 3;
export default storiesOf('Table', module)
    .addParameters({
    info: stylableApi
})
    .add('with rows', () => (<Table>
				<TableHead>
					<TableRow>
						<TableCell head>
							Email
						</TableCell>
						<TableCell head>
							First name
						</TableCell>
						<TableCell head>
							Last name
						</TableCell>
					</TableRow>
				</TableHead>
				<TableBody>
					{Array.from({ length: rowsCount }).map((_, i) => (<TableRow key={i}>
							<TableCell>
								user{i}@email.com
							</TableCell>
							<TableCell>
								John{i}
							</TableCell>
							<TableCell>
								Smith{i}
							</TableCell>
						</TableRow>))}
				</TableBody>
				<TableFoot>
					<TableRow>
						<TableCell colSpan={columnsCount}>
							Footer
						</TableCell>
					</TableRow>
				</TableFoot>
			</Table>))
    .add('with order', () => (<Table>
				<TableHead>
					<TableRow>
						<TableCell head onOrderChange={action('change')} order={Order.None}>
							Email
						</TableCell>
						<TableCell head onOrderChange={action('change')} order={Order.Asc}>
							First name
						</TableCell>
						<TableCell head onOrderChange={action('change')} order={Order.Desc}>
							Last name
						</TableCell>
					</TableRow>
				</TableHead>
				<TableBody>
					{Array.from({ length: rowsCount }).map((_, i) => (<TableRow key={i}>
							<TableCell>
								user{i}@email.com
							</TableCell>
							<TableCell>
								John{i}
							</TableCell>
							<TableCell>
								Smith{i}
							</TableCell>
						</TableRow>))}
				</TableBody>
			</Table>));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGFibGUuc3Rvcmllcy5qc3giLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9UYWJsZS9UYWJsZS5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNOLE1BQU0sRUFDTixNQUFNLDBCQUEwQixDQUFDO0FBQ2xDLE9BQU8sRUFDTixTQUFTLEVBQ1QsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEtBQUssRUFBRSxFQUNiLFNBQVMsRUFDVCxTQUFTLEVBQ1QsU0FBUyxFQUNULFFBQVEsRUFDUixTQUFTLEVBQ1QsS0FBSyxFQUNMLE1BQU0sSUFBSSxDQUFDO0FBRVosTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHOzs7Ozs7Ozs7OztDQVcxQixDQUFDO0FBRUYsTUFBTSxTQUFTLEdBQUcsRUFBRSxDQUFDO0FBQ3JCLE1BQU0sWUFBWSxHQUFHLENBQUMsQ0FBQztBQUV2QixlQUFlLFNBQVMsQ0FBQyxPQUFPLEVBQUUsTUFBTSxDQUFDO0tBQ3ZDLGFBQWEsQ0FBQztJQUNkLElBQUksRUFBRSxXQUFXO0NBQ2pCLENBQUM7S0FDRCxHQUFHLENBQ0gsV0FBVyxFQUNYLEdBQUcsRUFBRSxDQUFDLENBQ0wsQ0FBQyxLQUFLLENBQ0w7SUFBQSxDQUFDLFNBQVMsQ0FDVDtLQUFBLENBQUMsUUFBUSxDQUNSO01BQUEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUNkOztNQUNELEVBQUUsU0FBUyxDQUNYO01BQUEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUNkOztNQUNELEVBQUUsU0FBUyxDQUNYO01BQUEsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUNkOztNQUNELEVBQUUsU0FBUyxDQUNaO0tBQUEsRUFBRSxRQUFRLENBQ1g7SUFBQSxFQUFFLFNBQVMsQ0FDWDtJQUFBLENBQUMsU0FBUyxDQUNUO0tBQUEsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFD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