The vertical alignment for the content within a cell.
Note: When this is set to "top" or "bottom", padding-top or
padding-bottom will also be applied due to how styling tables work. This
padding can be configured with the $rmd-table-cell-vertical-padding or
$rmd-table-cell-vertical-alignments variables.
This component is really just a simple wrapper for applying the <caption>
typography styles and probably doesn't have much real use if you don't use
captions.
Creates a <table> element with some default styles and a quick way to
configure the other styles within a table. That being said, styling tables is
awful if you are used to flexbox and this component will not be helping with
layout styles of tables.
The table will not be responsive by default, but you can easily create a
responsive table with overflow by wrapping with the TableContainer
component or just adding overflow: auto to a parent element. Note that
horizontal scrolling is still not one of the best user interactions and it
might be better to render a table in a different manner for mobile devices to
help display all the required data.
Creates a <tbody> element that also allows for overriding all the child
TableCell components with additional styling behavior.
Creates a <th> or <td> cell with sensible styled defaults. You can create
a <th> element by enabling the header prop OR having a TableCell as a
child of the TableHeader component.
Note: If you have a checkbox column in the TableHeader without any labels,
you will need to manually set the header={false} prop for that cell since
it is invalid to have a <th> without any readable content for screen
readers.
This is mostly an internal component since it is automatically used within
the TableCell component but this will conditionally wrap the children
within an UnstyledButton to make a clickable cell. This is really to help
with sort behavior within headers.
This is a simple wrapper for the Checkbox component that allows you to
render a nicely styled Checkbox within a TableCell element. This will
mostly just remove the additional padding applied and default an aria-label
since you normally don't want a checkbox with a label within a table since
it's more for selection.
An extremely "useful" component that should be used with the Table
component if you want to make a responsive table within the page. If you
don't want to use this component, you can just apply overflow: auto to a
parent element of the table.
Creates a <tfoot> element with some basic styles. This component will
disable the hover effect and line wrapping by default, but the hover effect
and line-wrapping can be re-enabled if desired through the hoverable and
disableNoWrap props.
Creates a <thead> element with some basic styles. This component will also
update the table configuration so that all the TableCell children will
automatically become <th> elements instead of the normal <td> as well as
disabling the hover effect and line wrapping. The hover effect and
line-wrapping can be re-enabled if desired through the hoverable and
disableNoWrap props.
Creates a <tr> element with some general styles that are inherited from the
base table configuration.
Generated using TypeDoc
The horizontal alignment for the content within a cell.
Note: Table default behavior is to align to the left.