Component: Responsive Table

USAGE AREA: Center Flex Components

This is a table that responds best to the users' viewing experience.  Utilizing the traditional table within the body copy area can be challenging to use at times, so we've provided an option that will conform to the user's device, whether it be on a desktop or a mobile device.

To start, click on the expand arrow located at the bottom right corner of the Responsive Table field:

In the 'Select One' field, select how many columns you want your table to have.

The most ideal setup will contain 4 columns.  Should you need more columns, please consider reconfiguring your data either by reducing the amount of content or splitting it between 2 or more tables.

After selecting the amount of columns, expand the Column Headers sub-field and click the 'Add New' button to add the corresponding about of ColumnHeader fields (according to the Number Of Columns you selected above).

To add rows to your table, expand the Rows field and click on the 'Create' button to create a row component.  You will be met with the Create New Component dialog box, where you will once again click 'Create'.

The system creates your "Row Cells" field, where you can begin to enter your value(s). You will click the 'Add New' button within the Row Cells field to add more cells to that row.  The number of "Cells" you need will correlate with the number of Columns you selected above.

For example, if you elected to have 3 columns, then you will need to have 3 cells for that singular row.

PLEASE NOTE: The 'Cell' fields can accommodate regular/plain text at the moment.  It can also accept HTML coding for more advanced content (ie. hyperlinking text).

To add another row to your table, you will click the 'Add New' button at the top of the Rows field, and repeat the steps to add additional cells to your row:

Once you've completed the build of your table, it should look something like this:

Potential Desktop View:

Potential Mobile View: