Table Grid

The Table Grid component is used for various objectives such as presenting text information or numerical data in an organized way using a variety of styles and formats. 

Examples

Column 1 (Header) Column 2 Column 3
Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem ipsum dolor sit ame
  • Lorem ipsum dolor sit ame
  1. Test 1
  2. Test 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
Column 1 (Header) Column 2 Column 3

Column 4

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem ipsum dolor sit ame
  • Lorem ipsum dolor sit ame
  1. Test 1
  2. Test 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor

Use Cases

AUTHORING, REQUIREMENTS AND SPECIFICATIONS

TABLE DATA

Authoring in tool bar similar to Microsoft Excel

TABLE USAGE
  • Usage: Overall format of table
    • Width: Default is 100% of component, manually adjust for how wide table should display
    • Height: Default is blank, unknown results
    • Caption: Creates title above table, do not recommend using
    • Border: Default is 1, thickens lines surrounding each cell
    • Cell Padding: Default is 1, creates more space within each cell
    • Cell Spacing: Default is 0, creates space between the cells  

 

CELL PROPERTIES
  • Usage: Stylize individual cells
    • Width: Default left aligns cells, manually adjust percentage for cells to be evenly wide
    • Height: Default adjusts based on how many lines of text are in each row, manually adjust percentage has unknown results
    • Header Attribute: Unknown results, do not recommend using
    • Horizontal Align: Content of cell left aligns by default, choose from dropdown to adjust to center or right alignment
    • Vertical Align: Content of cell middle aligns by default, choose from dropdown menu to adjust to top, bottom, or baseline  
    • Style: Options for preset extra light gray, light gray, yellow, or blue background with no border, gray border, and white border options, default is no background with gray border
    • Cell Type: Default is data, which is paragraph font, header is the second option, which is larger, centered, bolded font

 

TABLE THEME

Dropdown Menu- No Theme is the default, Comparable Theme has unknown results

 

AUTHORING NOTES

  • Translatable Fields: Yes
  • Mobile: The row becomes vertically stacked (From top down: row 1 column 1, row 1 column 2, row 1 column 3)
    • The upper left corner disappears when the table grid collapses