Table 的部分包含，主要還是參考 Material UI 的做法。

• Table
• TableHead
• TableBody
• TableFoot
• TableRow
• TableCell

Table

import React from 'react';
import styled from 'styled-jss';

const StyledTable = styled('table')({
    width: '100%',
    ...({ style}) => style
});

const Table = ({ children, ...props}) => {
    return (<StyledTable {...props}>
        {children}
    </StyledTable>)
}

export default Table;

TableHead

import React from 'react';
import styled from 'styled-jss';

const StyledTableHead = styled('thead')(({ theme, style }) => ({
    borderBottom: `1px solid ${theme.colors.grey1}`,
    ...style
}));

const TableHead = ({ children, ...props}) => {
    return (<StyledTableHead {...props}>
        {children}
    </StyledTableHead>)
}

export default TableHead;

TableBody

import React from 'react';
import styled from 'styled-jss';

const StyledTableBody = styled('tbody')({
    width: '100%',
    ...({ style}) => style
});

const TableBody = ({ children, ...props}) => {
    return (<StyledTableBody {...props}>
        {children}
    </StyledTableBody>)
}

export default TableBody;

TableFoot

import React from 'react';
import styled from 'styled-jss';

const StyledTableFoot = styled('tfoot')({
    ...({ style}) => style
});

const TableFoot = ({ children, ...props}) => {
    return (<StyledTableFoot {...props}>
        {children}
    </StyledTableFoot>)
}

export default TableFoot;

TableRow

import React from 'react';
import styled from 'styled-jss';

const StyledTableRow = styled('tr')({
    ...({ style}) => style
});

const TableRow = ({ children, ...props}) => {
    return (<StyledTableRow {...props}>
        {children}
    </StyledTableRow>)
}

export default TableRow;

TableCell

import React from 'react';
import styled from 'styled-jss';

const StyledTableCell = styled('td')(({ theme, style }) => ({
    padding: `${theme.getSpacing(2)}px ${theme.getSpacing(4)}px`,
    ...style,
}));

const TableCell = ({ children, ...props}) => {
    return (<StyledTableCell {...props}>
        {children}
    </StyledTableCell>)
}

export default TableCell;

Usage

import React, { Fragment } from "react";
import theme from "../../lib/theme";
import Card from "../../lib/Card";
import Table from '../../lib/Table';
import TableRow from '../../lib/TableRow';
import TableHead from '../../lib/TableHead';
import TableBody from '../../lib/TableBody';
import TableCell from '../../lib/TableCell';
import TableFoot from '../../lib/TableFoot';
import ThemeProvider from "../../lib/ThemeProvider";

const styles = {
    card: {
        width: '100%',
        maxWidth: '1000px',
        minWidth: '400px'
    }
}

const Provider = (props) => {
    return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
};

const Template = args => {
    return (
        <Provider>
            <Card style={styles.card}>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>Name</TableCell>
                            <TableCell>Age</TableCell>
                            <TableCell>position</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        <TableRow>
                            <TableCell>Jeff</TableCell>
                            <TableCell>55</TableCell>
                            <TableCell>CTO</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>Tomas</TableCell>
                            <TableCell>37</TableCell>
                            <TableCell>Engineer</TableCell>
                        </TableRow>
                        <TableRow>
                            <TableCell>Edmond</TableCell>
                            <TableCell>30</TableCell>
                            <TableCell>Dog</TableCell>
                        </TableRow>
                    </TableBody>
                    <TableFoot>

                    </TableFoot>
                </Table>
            </Card>
        </Provider>
    );
}

export const Default = Template.bind({});

export default {
    component: Table,
    title: "Components/Table",
};

結果如下：