Table#

Import#

import { Table } from 'bumbag'

Usage#

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Editable example

Dividers#

You can add dividers to the rows of your table with the hasDividers prop.

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Editable example

Striped#

You can stripe your rows with the isStriped prop.

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Editable example

Hoverable#

Make the rows of your table hoverable with the isHoverable prop.

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Editable example

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.

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Editable example

Shadowed#

The shadowed variant renders a table with a lifted altitude.

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Editable example

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.

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Editable example

You can change the responsive breakpoints using the responsiveBreakpoint prop.

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Editable example

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
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Table.Head.styles.base
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Table.HeadCell.styles.base
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Table.Body.styles.base
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Table.Row.styles.base
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Table.Cell.styles.base
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Table.Foot.styles.base
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Table.styles.responsive.base
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
Table.styles.responsive.headCellText
NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$15.00
Total$36.00
On this page
Copyright © 2021 Jake Moxey