• Public
  • Public/Protected
  • All

Module @react-md/table


Type aliases

CaptionProps: HTMLAttributes<HTMLTableCaptionElement>
SortOrder: "ascending" | "descending" | "none" | "other"
TableCellAttributes: Omit<TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>, "colSpan" | "scope">
TableCellHorizontalAlignment: "left" | "center" | "right"

The horizontal alignment for the content within a cell.

Note: Table default behavior is to align to the left.

TableCellVerticalAlignment: "top" | "middle" | "bottom"

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.

TableContainerProps: HTMLAttributes<HTMLDivElement>


Caption: ForwardRefExoticComponent<CaptionProps & RefAttributes<HTMLTableCaptionElement>> = ...

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.

Table: ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>> = ...

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.

TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>> = ...

Creates a <tbody> element that also allows for overriding all the child TableCell components with additional styling behavior.

TableCell: ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLTableCellElement>> = ...

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.

TableCellContent: ForwardRefExoticComponent<TableCellContentProps & RefAttributes<HTMLButtonElement>> = ...

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.

TableCheckbox: ForwardRefExoticComponent<TableCheckboxProps & RefAttributes<HTMLTableCellElement>> = ...

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.

TableContainer: ForwardRefExoticComponent<TableContainerProps & RefAttributes<HTMLDivElement>> = ...

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.

TableFooter: ForwardRefExoticComponent<TableFooterProps & RefAttributes<HTMLTableSectionElement>> = ...

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.

TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableSectionElement>> = ...

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.

TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>> = ...

Creates a <tr> element with some general styles that are inherited from the base table configuration.

Generated using TypeDoc