Data-driven tables
Breaking down content into clearly labeled groups, and giving the user the ability to reorganise the order of these lists helps to create a more personal experience.
Basic table
Create a SDX styled table by wrapping a <table> with a wrapper <div> and add the class table to it.
Next, the component has to be initialized.
Responsive table
Create responsive tables by wrapping any <table> in table--responsive to make them scroll horizontally when the container size smaller than the table.
Next, the component has to be initialized.
Table styles
Table with highlighted header and status
Next, the component has to be initialized.
Table with no spacing
Next, the component has to be initialized.
Display tables
Display tables are used to house small quantities of data, with the inclusion of radio buttons that allow users to select various elements, contributing to a sum total at the bottom of the table.
Table with arbitrary content
Tables with arbitrary content helps to easily build tables for a variety of use cases. They use images in headings to visually show what the column within the table relates to.