#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"
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
"right" | "left" | "center"
alignY
"top" | "bottom" | "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
"right" | "left" | "center"
alignY
"top" | "bottom" | "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
"right" | "left" | "center"
alignY
"top" | "bottom" | "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
"right" | "left" | "center"
alignY
"top" | "bottom" | "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
"right" | "left" | "center"
alignY
"top" | "bottom" | "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
"right" | "left" | "center"
alignY
"top" | "bottom" | "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 |
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 |