mirror of
https://github.com/Kong/insomnia
synced 2024-11-08 14:49:53 +00:00
4f39486eb7
* Migrating dimensions, latest SVG, stubbing sidebar * Revert "Migrating dimensions, latest SVG, stubbing sidebar" This reverts commit5014a68f52. * Revert "Revert "Migrating dimensions, latest SVG, stubbing sidebar"" This reverts commit28c130c8d8. * Post merge bootstrap & build * Linting * Updating Story Heirarchy * Migrating legacy tooltip component * Reverting spacing integration into core dimensions * Cleaning up comments, tweaking CSS var usage * Removing static height * Cleaning up static CSS values, re-organizing sliding panel, fixing search icon * adding flow def for autobind in new SB instance * PR feedback, removing new vars/updating markup * Fixing lint > flow error on type
90 lines
2.2 KiB
JavaScript
90 lines
2.2 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
import { Table, TableBody, TableData, TableHead, TableHeader, TableRow } from './table';
|
|
|
|
export default { title: '1st Party | Table' };
|
|
|
|
export const _default = () => (
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>Col 1</TableHeader>
|
|
<TableHeader>Col 2</TableHeader>
|
|
<TableHeader>Col 3</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{[1, 2, 3].map(i => (
|
|
<TableRow key={i}>
|
|
<TableData>Column 1</TableData>
|
|
<TableData>Column 2</TableData>
|
|
<TableData>Column 3</TableData>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
|
|
export const striped = () => (
|
|
<Table striped>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>Col 1</TableHeader>
|
|
<TableHeader>Col 2</TableHeader>
|
|
<TableHeader>Col 3</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{[1, 2, 3].map(i => (
|
|
<TableRow key={i}>
|
|
<TableData>Column 1</TableData>
|
|
<TableData>Column 2</TableData>
|
|
<TableData>Column 3</TableData>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
|
|
export const stripedAndOutlined = () => (
|
|
<Table striped outlined>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>Col 1</TableHeader>
|
|
<TableHeader>Col 2</TableHeader>
|
|
<TableHeader>Col 3</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{[1, 2, 3].map(i => (
|
|
<TableRow key={i}>
|
|
<TableData>Column 1</TableData>
|
|
<TableData>Column 2</TableData>
|
|
<TableData>Column 3</TableData>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
|
|
export const compactAndOutlined = () => (
|
|
<Table outlined compact>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>Col 1</TableHeader>
|
|
<TableHeader>Col 2</TableHeader>
|
|
<TableHeader>Col 3</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{[1, 2, 3].map(i => (
|
|
<TableRow key={i}>
|
|
<TableData>Column 1</TableData>
|
|
<TableData>Column 2</TableData>
|
|
<TableData>Column 3</TableData>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
);
|