Skip to content

Commit

Permalink
feat(table): update styles and add header/footer usage
Browse files Browse the repository at this point in the history
  • Loading branch information
@jigsawye
jigsawye committed Mar 26, 2019
1 parent d939252 commit 1bd695b
Show file tree
Hide file tree
Showing 5 changed files with 494 additions and 1,236 deletions.
195 changes: 114 additions & 81 deletions docs/Table.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ route: /components/table

import { PropsTable, Playground } from 'docz';
import { range } from 'ramda';
import { Table } from 'tailor-ui';
import { Box, Button, Flex, Heading, Table, Space } from 'tailor-ui';

# Table

Expand All @@ -26,93 +26,126 @@ import { Table } from 'tailor-ui';
### Basic Table

<Playground>
<Table>
<Table.Head>
{range(2, 10).map(x => (
<Table.HeadColumn key={x}>{x}</Table.HeadColumn>
))}
</Table.Head>
<Table.Body>
{range(1, 10).map(x => (
<Table.Row key={x}>
{range(2, 10).map(y => (
<Table.Column key={y}>
{y} * {x} = {x * y}
<Box width="100%" height="100%" borderRadius="xl" bg="#eef0f5" p="4">
<Table>
<Table.Head>
<Table.HeadColumn>Name</Table.HeadColumn>
<Table.HeadColumn>Platform</Table.HeadColumn>
<Table.HeadColumn>People</Table.HeadColumn>
<Table.HeadColumn>Ammount</Table.HeadColumn>
<Table.HeadColumn>Action</Table.HeadColumn>
</Table.Head>
<Table.Body>
{range(1, 4).map(value => (
<Table.Row key={value}>
<Table.Column>Name {value}</Table.Column>
<Table.Column>Platform {value}</Table.Column>
<Table.Column>10,000</Table.Column>
<Table.Column>1,000 NTD</Table.Column>
<Table.Column>
<Button type="primary-invert">Action</Button>
</Table.Column>
))}
</Table.Row>
))}
</Table.Body>
</Table>
</Table.Row>
))}
</Table.Body>
</Table>
</Box>
</Playground>

### Custom Table
### Header & Footer

<Playground>
<Table textAlign="center">
<Table.Head>
<Table.HeadColumn colSpan={8}>Time</Table.HeadColumn>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Column />
<Table.Column>Sun</Table.Column>
<Table.Column>Mon</Table.Column>
<Table.Column>Tue</Table.Column>
<Table.Column>Wed</Table.Column>
<Table.Column>Thu</Table.Column>
<Table.Column>Fri</Table.Column>
<Table.Column>Sat</Table.Column>
</Table.Row>
<Table.Row>
<Table.Column>
Morning
<br />
10:00-13:00
</Table.Column>
<Table.Column
rowSpan={3}
borderColor="gray300"
borderLeft="base"
borderRight="base"
>
Day off
</Table.Column>
{range(1, 7).map(key => (
<Table.Column key={key}>
<div>Master {key}</div>
<div>Slave {key}</div>
</Table.Column>
))}
</Table.Row>
<Table.Row>
<Table.Column>
Afternoon
<br />
14:00-18:00
</Table.Column>
{range(1, 7).map(key => (
<Table.Column key={key}>
<div>Master {key}</div>
<div>Slave {key}</div>
</Table.Column>
<Box width="100%" height="100%" borderRadius="xl" bg="#eef0f5" p="4">
<Table
header={
<Space py="24px" px="4">
<Heading.h4>Text Here</Heading.h4>
</Space>
}
footer={
<Space py="24px" px="4">
<Button type="regular">+ Button</Button>
</Space>
}
>
<Table.Head>
<Table.HeadColumn>Name</Table.HeadColumn>
<Table.HeadColumn>Platform</Table.HeadColumn>
<Table.HeadColumn>People</Table.HeadColumn>
<Table.HeadColumn>Ammount</Table.HeadColumn>
<Table.HeadColumn>Action</Table.HeadColumn>
</Table.Head>
<Table.Body>
{range(1, 4).map(value => (
<Table.Row key={value}>
<Table.Column>Name {value}</Table.Column>
<Table.Column>Platform {value}</Table.Column>
<Table.Column>10,000</Table.Column>
<Table.Column>1,000 NTD</Table.Column>
<Table.Column>
<Button type="primary-invert">Action</Button>
</Table.Column>
</Table.Row>
))}
</Table.Row>
<Table.Row>
<Table.Column>
Night
<br />
19:00-22:00
</Table.Column>
{range(1, 7).map(key => (
<Table.Column key={key}>
<div>Master {key}</div>
<div>Slave {key}</div>
</Table.Column>
</Table.Body>
</Table>
</Box>
</Playground>

### Complex Footer

<Playground>
<Box width="100%" height="100%" borderRadius="xl" bg="#eef0f5" p="4">
<Table
footer={
<div>
<Flex
justifyContent="flex-end"
alignItems="center"
height="80px"
px="4"
>
<Space>
<Heading.h3>Text Here</Heading.h3>
<Heading.h3>Text Here</Heading.h3>
</Space>
</Flex>
<Flex
bg="primary"
justifyContent="flex-end"
alignItems="center"
height="80px"
px="4"
>
<Button type="primary-invert" rounded>
Action
</Button>
</Flex>
</div>
}
>
<Table.Head>
<Table.HeadColumn>Name</Table.HeadColumn>
<Table.HeadColumn>Platform</Table.HeadColumn>
<Table.HeadColumn>People</Table.HeadColumn>
<Table.HeadColumn>Ammount</Table.HeadColumn>
<Table.HeadColumn>Action</Table.HeadColumn>
</Table.Head>
<Table.Body>
{range(1, 4).map(value => (
<Table.Row key={value}>
<Table.Column>Name {value}</Table.Column>
<Table.Column>Platform {value}</Table.Column>
<Table.Column>10,000</Table.Column>
<Table.Column>1,000 NTD</Table.Column>
<Table.Column>
<Button type="primary-invert">Action</Button>
</Table.Column>
</Table.Row>
))}
</Table.Row>
</Table.Body>
</Table>
</Table.Body>
</Table>
</Box>
</Playground>

## API
Expand Down
134 changes: 45 additions & 89 deletions packages/tailor-ui/src/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,13 @@
import React, { FunctionComponent, PureComponent } from 'react';
import styled from 'styled-components';
import {
BorderColorProps,
BordersProps,
ColorProps,
SpaceProps,
TextAlignProps,
WidthProps,
borderColor,
borders,
color,
space,
textAlign,
width,
} from 'styled-system';

import tag from '../utils/CleanTag';

type HeadColumnProps = WidthProps & SpaceProps & BordersProps & ColorProps;

const HeadColumn = styled(tag.th)<HeadColumnProps>`
padding: ${p => p.theme.paddings.xs} ${p => p.theme.paddings.sm};
border-color: ${p => p.theme.colors.gray300};
font-weight: 500;
${width};
${space};
${borders};
${color};
`;

type ColumnProps = SpaceProps & BordersProps & BorderColorProps & ColorProps;

const Column = styled(tag.td)<ColumnProps>`
padding: ${p => p.theme.paddings.xs} ${p => p.theme.paddings.sm};
${space};
${borders};
${borderColor};
${color};
`;

Column.defaultProps = {
borderColor: 'gray300',
};

type RowProps = ColorProps;

const Row = styled(tag.tr)<RowProps>`
border-bottom: ${p => p.theme.borders.base} ${p => p.theme.colors.gray300};
import React, { FunctionComponent, ReactNode } from 'react';

${color};
`;
import {
Column,
HeadColumn,
Row,
StyledTable,
StyledTableProps,
TableWrapper,
} from './styles';

const Head: FunctionComponent = ({ children }) => (
<thead>
Expand All @@ -61,46 +17,46 @@ const Head: FunctionComponent = ({ children }) => (

const Body: FunctionComponent = ({ children }) => <tbody>{children}</tbody>;

type StyledTableProps = TextAlignProps & WidthProps;

const StyledTable = styled(tag.table)<StyledTableProps>`
overflow: hidden;
border-spacing: 0;
border-collapse: collapse;
border-style: hidden;
border-top-left-radius: ${p => p.theme.radii.base};
border-top-right-radius: ${p => p.theme.radii.base};
box-shadow: 0 0 0 1px ${p => p.theme.colors.gray300};
font-size: ${p => p.theme.fontSizes.sm};
export type TableProps = StyledTableProps & {
header?: ReactNode;
footer?: ReactNode;
};

& > thead {
border-bottom: ${p => p.theme.borders.base} ${p => p.theme.colors.gray300};
background-color: ${p => p.theme.colors.gray100};
const Table: FunctionComponent<TableProps> & {
Head: typeof Head;
HeadColumn: typeof HeadColumn;
Body: typeof Body;
Row: typeof Row;
Column: typeof Column;
} = ({ header, footer, ...props }) => {
const table = <StyledTable {...props} />;

if (header || footer) {
return (
<TableWrapper
hasHeader={Boolean(header)}
hasFooter={Boolean(footer)}
width={props.width}
>
{header}
{table}
{footer}
</TableWrapper>
);
}

${width};
${textAlign};
`;

class Table extends PureComponent<StyledTableProps> {
static Head = Head;

static HeadColumn = HeadColumn;

static Body = Body;

static Row = Row;

static Column = Column;
return table;
};

static defaultProps = {
width: '100%',
textAlign: 'left',
};
Table.Head = Head;
Table.HeadColumn = HeadColumn;
Table.Body = Body;
Table.Row = Row;
Table.Column = Column;

render() {
return <StyledTable {...this.props} />;
}
}
Table.defaultProps = {
width: '100%',
textAlign: 'center',
};

export default Table;
Loading

0 comments on commit 1bd695b

Please sign in to comment.