Available since 1.0.0
Last updated 1.2.0
A table is a set of tabular data. Line items can support data, images and actions.
Table with no borders
fd-table--no-borders can be applied to render a table with no borders
Table with no stripes
fd-table--striped can be applied to render a table with zebra stripes
Table with checkbox
The checkbox input can be used at the beginning of each row to allow for bulk actions.
It is recommended to add the parameter
area-selected="true to the row that is selected.
Table with semantic row highlithging
Table rows support semantic row lighlithing with the modifiers
When more than three actions exist per row and/or space doesn’t allow for actions,
a contextual menu can be substituted in order to display all actions in one menu.
Table with Sortable Column Headers
Table with Sortable Column Headers - Ascending
Table with Sortable Column Headers - Descinding
Table with Column Headers with context menu
Table with Fix Column Header and context menu
- A column can be fixed by applying the
fd-table_fixed_col css class a desired number for column width (
width: 200px inline style in the example below)
fd-table--fixed wrapper need to be offset(
padding-left:200px) by the same amount as defined for column width.
fd-table--fixed-wrapper need to have a defined with as well to enable horizontal scrolling.
100% width on
fd-table--fixed-wrapper will not render horizontal scrolling as the wrapper container will stretch to accommodate any overflow column width.