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 |