#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 |
#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 |
#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 |
#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 |
#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 |
#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 |
#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 |
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 |
#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 "right" | "left" | "center"
alignY "top" | "bottom" | "center"
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 95 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 "right" | "left" | "center"
alignY "top" | "bottom" | "center"
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 95 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 "right" | "left" | "center"
alignY "top" | "bottom" | "center"
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 95 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 "right" | "left" | "center"
alignY "top" | "bottom" | "center"
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 95 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 "right" | "left" | "center"
alignY "top" | "bottom" | "center"
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 95 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 "right" | "left" | "center"
alignY "top" | "bottom" | "center"
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 95 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 "right" | "left" | "center"
alignY "top" | "bottom" | "center"
variant string
colorMode string
disabled boolean
overrides
{
useCSSVariables?: boolean;
altitudes?: AltitudesThemeConfig;
borders?: BordersThemeConfig;
borderRadii?: BorderRadiiThemeConfig;
... 95 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 |
Table.Head.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
Table.HeadCell.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
Table.Body.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
Table.Row.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
Table.Cell.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
Table.Foot.styles.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
Table.styles.responsive.base| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |
Table.styles.responsive.headCellText| Name | Quantity | Price |
|---|---|---|
| Nike | 3 | $9.00 |
| Adidas | 4 | $12.00 |
| North Face | 5 | $15.00 |
| Total | $36.00 |