tables

Description

The Roseworx Table Core Component has many different style variations and optional enhancing features such as sticky headers and overflow misting.

Description

Typical HTML tables usually have the issue of not being smoothly responsive. Roseworx tables tackles this by keeping the table at a readable width and height, but when the table is scrollable, it adds a misting to the side/bottom (depending on overflow direction) to allow the user to visually see that the table can be scrolled. In addition to this, when a user does scroll on the table, it will make the table headers stuck to the scroll direction so users can still see what heading a table item comes under when scrolling.

Usage

• Copy the html code and personalise it to your use case.
• table functionality comes with the core files when you import rwx from 'roseworx' so you dont need to do anything extra. Any element with the rwx-table attribute and that follows the correct html structure will automatically have functionality implemented.
• To customise the appearance of the table change these SCSS Variables.

Modifier Classes

Optionally add any of the following modifier classes to the rwx-table element.

• slanted
• vertical
• vertical-line
• highlightable
• full-grid
• dual-headings
• colored

By default, all table data will be equal widths. Optionally adjust this by adding one of the following modifiers classes to the span(s) that need to be bigger.

• x2
• x3

Configuration Options

Optionally add any of these data attributes to the rwx-table element to configure it a certain way.

Useful info

By default, the first span in every .rwx-table-data becomes a header. If .vertical class is present on the .rwx-table element, all spans in the first .rwx-table-data will be used a a header. If a .dual-headings class is present on .rwx-table then both will be used.