#Table

#Import

import { Table } from 'bumbag'

#Usage

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

#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

#Striped

You can stripe your rows with the isStriped prop.

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

#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

#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

#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

#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

You can change the responsive breakpoints using the responsiveBreakpoint prop.

NameQuantityPrice
Nike3$9.00
Adidas4$12.00
North Face5$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 "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
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
Copyright © 2020 Jake Moxey