#Table
#Import
import { Table } from 'bumbag'
#Usage
| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
<Table><Table.Head><Table.Row><Table.HeadCell>Name</Table.HeadCell><Table.HeadCell textAlign="right">Quantity</Table.HeadCell><Table.HeadCell textAlign="right">Price</Table.HeadCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Nike</Table.Cell><Table.Cell textAlign="right">3</Table.Cell><Table.Cell textAlign="right">$9.00</Table.Cell></Table.Row><Table.Row><Table.Cell>Adidas</Table.Cell><Table.Cell textAlign="right">4</Table.Cell><Table.Cell textAlign="right">$12.00</Table.Cell></Table.Row><Table.Row><Table.Cell>North Face</Table.Cell><Table.Cell textAlign="right">5</Table.Cell><Table.Cell textAlign="right">$15.00</Table.Cell></Table.Row></Table.Body><Table.Foot fontWeight="semibold"><Table.Row><Table.Cell>Total</Table.Cell><Table.Cell /><Table.Cell textAlign="right">$36.00</Table.Cell></Table.Row></Table.Foot></Table>
#Dividers
You can add dividers to the rows of your table with the hasDividers prop.
| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
<Table hasDividers><Table.Head><Table.Row><Table.HeadCell>Name</Table.HeadCell><Table.HeadCell textAlign="right">Quantity</Table.HeadCell><Table.HeadCell textAlign="right">Price</Table.HeadCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Nike</Table.Cell><Table.Cell textAlign="right">3</Table.Cell><Table.Cell textAlign="right">$9.00</Table.Cell></Table.Row><Table.Row><Table.Cell>Adidas</Table.Cell><Table.Cell textAlign="right">4</Table.Cell><Table.Cell textAlign="right">$12.00</Table.Cell></Table.Row><Table.Row><Table.Cell>North Face</Table.Cell><Table.Cell textAlign="right">5</Table.Cell><Table.Cell textAlign="right">$15.00</Table.Cell></Table.Row></Table.Body><Table.Foot fontWeight="semibold"><Table.Row><Table.Cell>Total</Table.Cell><Table.Cell /><Table.Cell textAlign="right">$36.00</Table.Cell></Table.Row></Table.Foot></Table>
#Striped
You can stripe your rows with the isStriped prop.
| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
<Table isStriped><Table.Head><Table.Row><Table.HeadCell>Name</Table.HeadCell><Table.HeadCell textAlign="right">Quantity</Table.HeadCell><Table.HeadCell textAlign="right">Price</Table.HeadCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Nike</Table.Cell><Table.Cell textAlign="right">3</Table.Cell><Table.Cell textAlign="right">$9.00</Table.Cell></Table.Row><Table.Row><Table.Cell>Adidas</Table.Cell><Table.Cell textAlign="right">4</Table.Cell><Table.Cell textAlign="right">$12.00</Table.Cell></Table.Row><Table.Row><Table.Cell>North Face</Table.Cell><Table.Cell textAlign="right">5</Table.Cell><Table.Cell textAlign="right">$15.00</Table.Cell></Table.Row></Table.Body><Table.Foot fontWeight="semibold"><Table.Row><Table.Cell>Total</Table.Cell><Table.Cell /><Table.Cell textAlign="right">$36.00</Table.Cell></Table.Row></Table.Foot></Table>
#Hoverable
Make the rows of your table hoverable with the isHoverable prop.
| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
<Table isHoverable><Table.Head><Table.Row><Table.HeadCell>Name</Table.HeadCell><Table.HeadCell textAlign="right">Quantity</Table.HeadCell><Table.HeadCell textAlign="right">Price</Table.HeadCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Nike</Table.Cell><Table.Cell textAlign="right">3</Table.Cell><Table.Cell textAlign="right">$9.00</Table.Cell></Table.Row><Table.Row><Table.Cell>Adidas</Table.Cell><Table.Cell textAlign="right">4</Table.Cell><Table.Cell textAlign="right">$12.00</Table.Cell></Table.Row><Table.Row><Table.Cell>North Face</Table.Cell><Table.Cell textAlign="right">5</Table.Cell><Table.Cell textAlign="right">$15.00</Table.Cell></Table.Row></Table.Body><Table.Foot fontWeight="semibold"><Table.Row><Table.Cell>Total</Table.Cell><Table.Cell /><Table.Cell textAlign="right">$36.00</Table.Cell></Table.Row></Table.Foot></Table>
#Variants
The <Table> component comes with two default variants: minimal and shadowed.
You can also create your own table variant.
#Minimal
The minimal variant renders a table with minimal styling.
| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
<Table variant="minimal"><Table.Head><Table.Row><Table.HeadCell>Name</Table.HeadCell><Table.HeadCell textAlign="right">Quantity</Table.HeadCell><Table.HeadCell textAlign="right">Price</Table.HeadCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Nike</Table.Cell><Table.Cell textAlign="right">3</Table.Cell><Table.Cell textAlign="right">$9.00</Table.Cell></Table.Row><Table.Row><Table.Cell>Adidas</Table.Cell><Table.Cell textAlign="right">4</Table.Cell><Table.Cell textAlign="right">$12.00</Table.Cell></Table.Row><Table.Row><Table.Cell>North Face</Table.Cell><Table.Cell textAlign="right">5</Table.Cell><Table.Cell textAlign="right">$15.00</Table.Cell></Table.Row></Table.Body><Table.Foot fontWeight="semibold"><Table.Row><Table.Cell>Total</Table.Cell><Table.Cell /><Table.Cell textAlign="right">$36.00</Table.Cell></Table.Row></Table.Foot></Table>
#Shadowed
The shadowed variant renders a table with a lifted altitude.
| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
<Table variant="shadowed"><Table.Head><Table.Row><Table.HeadCell>Name</Table.HeadCell><Table.HeadCell textAlign="right">Quantity</Table.HeadCell><Table.HeadCell textAlign="right">Price</Table.HeadCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Nike</Table.Cell><Table.Cell textAlign="right">3</Table.Cell><Table.Cell textAlign="right">$9.00</Table.Cell></Table.Row><Table.Row><Table.Cell>Adidas</Table.Cell><Table.Cell textAlign="right">4</Table.Cell><Table.Cell textAlign="right">$12.00</Table.Cell></Table.Row><Table.Row><Table.Cell>North Face</Table.Cell><Table.Cell textAlign="right">5</Table.Cell><Table.Cell textAlign="right">$15.00</Table.Cell></Table.Row></Table.Body><Table.Foot fontWeight="semibold"><Table.Row><Table.Cell>Total</Table.Cell><Table.Cell /><Table.Cell textAlign="right">$36.00</Table.Cell></Table.Row></Table.Foot></Table>
#Responsive
When an isResponsive prop is attached to a table. When the table reaches the mobile breakpoint, it will collapse itself to a condensed version.
| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
<Table isResponsive><Table.Head><Table.Row><Table.HeadCell>Name</Table.HeadCell><Table.HeadCell textAlign="right">Quantity</Table.HeadCell><Table.HeadCell textAlign="right">Price</Table.HeadCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Nike</Table.Cell><Table.Cell textAlign="right">3</Table.Cell><Table.Cell textAlign="right">$9.00</Table.Cell></Table.Row><Table.Row><Table.Cell>Adidas</Table.Cell><Table.Cell textAlign="right">4</Table.Cell><Table.Cell textAlign="right">$12.00</Table.Cell></Table.Row><Table.Row><Table.Cell>North Face</Table.Cell><Table.Cell textAlign="right">5</Table.Cell><Table.Cell textAlign="right">$15.00</Table.Cell></Table.Row></Table.Body></Table>
You can change the responsive breakpoints using the responsiveBreakpoint prop.
| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
<Table isResponsive responsiveBreakpoint="tablet"><Table.Head><Table.Row><Table.HeadCell>Name</Table.HeadCell><Table.HeadCell textAlign="right">Quantity</Table.HeadCell><Table.HeadCell textAlign="right">Price</Table.HeadCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Nike</Table.Cell><Table.Cell textAlign="right">3</Table.Cell><Table.Cell textAlign="right">$9.00</Table.Cell></Table.Row><Table.Row><Table.Cell>Adidas</Table.Cell><Table.Cell textAlign="right">4</Table.Cell><Table.Cell textAlign="right">$12.00</Table.Cell></Table.Row><Table.Row><Table.Cell>North Face</Table.Cell><Table.Cell textAlign="right">5</Table.Cell><Table.Cell textAlign="right">$15.00</Table.Cell></Table.Row></Table.Body></Table>
#Props
#Table Props
hasDividers boolean
Indicates if the table should have dividers.
isStriped boolean
Indicates if the table should be striped.
isHoverable boolean
Indicates if the table should be hoverable.
isResponsive boolean
Indicates if the table should be responsive.
responsiveBreakpoint string
Indicates breakpoint at which the table should become responsive.
variant
"default"
| (string & {})
| "shadowed"
| "minimal"Sets the variant of the table.
Inherits Box props
use
string
| (ComponentClass<any, any> & { useProps: any; })
| (FunctionComponent<any> & { useProps: any; })className string
children
string
| number
| boolean
| {}
| ReactElement<any, string
| ((props: any) => ReactElement<any, string
| ...
| (new (props: any) => Component<any, any, any>)>)
| (new (props: any) => Component<...>)>
| ReactNodeArray
| ReactPortal
| ((props: BoxProps) => ReactNode)alignX "left" | "right" | "center"
alignY "bottom" | "top" | "center"
altitude string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 94 more ...;
Template?: TemplateThemeConfig;
}elementRef ((instance: any) => void) | RefObject<any>
themeKey string
#Table.Head Props
Inherits Box props
use
string
| (ComponentClass<any, any> & { useProps: any; })
| (FunctionComponent<any> & { useProps: any; })className string
children
string
| number
| boolean
| {}
| ReactElement<any, string
| ((props: any) => ReactElement<any, string
| ...
| (new (props: any) => Component<any, any, any>)>)
| (new (props: any) => Component<...>)>
| ReactNodeArray
| ReactPortal
| ((props: BoxProps) => ReactNode)alignX "left" | "right" | "center"
alignY "bottom" | "top" | "center"
altitude string
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 94 more ...;
Template?: TemplateThemeConfig;
}elementRef ((instance: any) => void) | RefObject<any>
themeKey string
#Table.HeadCell Props
Inherits Box props
use
string
| (ComponentClass<any, any> & { useProps: any; })
| (FunctionComponent<any> & { useProps: any; })className string
children
string
| number
| boolean
| {}
| ReactElement<any, string
| ((props: any) => ReactElement<any, string
| ...
| (new (props: any) => Component<any, any, any>)>)
| (new (props: any) => Component<...>)>
| ReactNodeArray
| ReactPortal
| ((props: BoxProps) => ReactNode)alignX "left" | "right" | "center"
alignY "bottom" | "top" | "center"
altitude string
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 94 more ...;
Template?: TemplateThemeConfig;
}elementRef ((instance: any) => void) | RefObject<any>
themeKey string
#Table.Body Props
Inherits Box props
use
string
| (ComponentClass<any, any> & { useProps: any; })
| (FunctionComponent<any> & { useProps: any; })className string
children
string
| number
| boolean
| {}
| ReactElement<any, string
| ((props: any) => ReactElement<any, string
| ...
| (new (props: any) => Component<any, any, any>)>)
| (new (props: any) => Component<...>)>
| ReactNodeArray
| ReactPortal
| ((props: BoxProps) => ReactNode)alignX "left" | "right" | "center"
alignY "bottom" | "top" | "center"
altitude string
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 94 more ...;
Template?: TemplateThemeConfig;
}elementRef ((instance: any) => void) | RefObject<any>
themeKey string
#Table.Row Props
Inherits Box props
use
string
| (ComponentClass<any, any> & { useProps: any; })
| (FunctionComponent<any> & { useProps: any; })className string
children
string
| number
| boolean
| {}
| ReactElement<any, string
| ((props: any) => ReactElement<any, string
| ...
| (new (props: any) => Component<any, any, any>)>)
| (new (props: any) => Component<...>)>
| ReactNodeArray
| ReactPortal
| ((props: BoxProps) => ReactNode)alignX "left" | "right" | "center"
alignY "bottom" | "top" | "center"
altitude string
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 94 more ...;
Template?: TemplateThemeConfig;
}elementRef ((instance: any) => void) | RefObject<any>
themeKey string
#Table.Cell Props
Inherits Box props
use
string
| (ComponentClass<any, any> & { useProps: any; })
| (FunctionComponent<any> & { useProps: any; })className string
children
string
| number
| boolean
| {}
| ReactElement<any, string
| ((props: any) => ReactElement<any, string
| ...
| (new (props: any) => Component<any, any, any>)>)
| (new (props: any) => Component<...>)>
| ReactNodeArray
| ReactPortal
| ((props: BoxProps) => ReactNode)alignX "left" | "right" | "center"
alignY "bottom" | "top" | "center"
altitude string
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 94 more ...;
Template?: TemplateThemeConfig;
}elementRef ((instance: any) => void) | RefObject<any>
themeKey string
#Table.Foot Props
Inherits Box props
use
string
| (ComponentClass<any, any> & { useProps: any; })
| (FunctionComponent<any> & { useProps: any; })className string
children
string
| number
| boolean
| {}
| ReactElement<any, string
| ((props: any) => ReactElement<any, string
| ...
| (new (props: any) => Component<any, any, any>)>)
| (new (props: any) => Component<...>)>
| ReactNodeArray
| ReactPortal
| ((props: BoxProps) => ReactNode)alignX "left" | "right" | "center"
alignY "bottom" | "top" | "center"
altitude string
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 94 more ...;
Template?: TemplateThemeConfig;
}elementRef ((instance: any) => void) | RefObject<any>
themeKey string
#Theming
Table.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {styles: {base: {background: "#ffe3a4"}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Table.Head.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {Head: {styles: {base: {background: "#ffe3a4"}}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Table.HeadCell.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {HeadCell: {styles: {base: {background: "#ffe3a4"}}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Table.Body.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {Body: {styles: {base: {background: "#ffe3a4"}}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Table.Row.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {Row: {styles: {base: {background: "#ffe3a4"}}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Table.Cell.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {Cell: {styles: {base: {background: "#ffe3a4"}}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Table.Foot.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {Foot: {styles: {base: {background: "#ffe3a4"}}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Table.styles.responsive.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {styles: {responsive: {base: {background: "#ffe3a4"}}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Table.styles.responsive.headCellText| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
import { ThemeProvider } from 'bumbag';const theme = {Table: {styles: {responsive: {headCellText: {background: "#ffe3a4"}}}}}<ThemeProvider theme={theme}>...</ThemeProvider>
Copyright © 2020 Jake Moxey