Component overview
The Data Table component is used to present tabular data in a two-dimensional table comprised of rows and columns of cells containing data. It is not designed to be used as a content formatting tool.
- Data Tables may only include tabular data: The Data Table component is not approved to format content. It must include tabular data.
- Data Tables may be used on multiple page schemas: The Data Table component may be used on Section Fronts, Section Detail, Profile Detail and Degree Detail pages.
- Data Tables may use a .txt or .tsv file: The Data Table works with either .txt or .tsv files.
- It's important to note .txt files allow for users to edit data directly within the Asset Manager. You have to upload a new version of .tsv files if there are data changes.
- If your Data Table contains links or special characters such as accent marks on names, you will need to use a .tsv file to maintain proper formatting.
- Data Tables must be responsive: In Table Settings, be sure to select the "Responsive" class to ensure the Data Table component is responsive on all devices.
- Data Tables must have a caption: For accessibility and user experience, your Data Table component must have a caption describing the content included in the table.
- Consider table format and presentation: Be sure the rows and columns in a Data Table are formatted in a manner that is easy for the user to navigate and understand.
- Turn on sorting or searching for large tables: Use the sort and/or filter option in the Data Table settings to allow users to filter, search or sort information in large tables.
- Format row and cell headers: Row and cell headers must be formatted correctly as cell and row type, "header."
- Choose a mobile breakpoint: Because tables present differently on mobile devices, be sure to select an appropriate cell breakpoint for small or medium devices.
- Pay attention to schema type for formatting: A Section Front provides more room for a table to display, while a Section Detail has less room because of the left-rail navigation. Be mindful about the number of columns you include in your data table.
- Data Tables must include a caption: All Data Table components must include a caption that describes the content included in the table.
- Data Tables must be responsive: In Table Settings, be sure to select the "Responsive" class to ensure the Data Table component is responsive on all devices.
TABLE: UNIT NAME - Purpose
- Example: TABLE: COMMENCEMENT- Spring Graduates
Example Data Table components
Example #1
Data Table, with header and no sort or search options
Summer Freshman Start classes
Review the list of available Summer Freshman Start classes before enrolling.
| Course | Course Title | Course Fulfills |
|---|---|---|
| ANTH 101 | Introduction to Cultural Anthropology | Soc Sci, CO6 |
| ANTH 102** | Introduction to Physical Anthropology | CO4L |
| ART 100 | Visual Foundations | CO7 |
| AST 110** | Stellar Astronomy | NS B, CO4L |
| ATMS 117** | Meteorology | NS B, CO4L |
| CHS 101 | Introduction to Community Health Sciences | N/A |
| CHS 102 | Foundations of Personal Health and Wellness | N/A |
| COM 101 | Oral Communication | N/A |
| ECON 102** | Principles of Microeconomics | Soc Sci, CO6 |
| ENG 98 | Preparatory Composition | N/A |
| ENG 100J** | Composition Studio | N/A |
| ENG 101** | Composition I | N/A |
| ENG 102** | Composition II | Core Writing, CO1, CO3 |
| ENV 101** | Introduction to Environmental Science | CO4, CO9 |
| IS 101 | Introduction to Information Systems | N/A |
| JOUR 108** | All Things Media: Design | N/A |
| MATH 95 | Elementary Algebra | N/A |
| MATH 96** | Intermediate Algebra | N/A |
| MATH 120** | Fundamentals of College Mathematics | Math, CO2 |
| MATH 120E** | Fundamentals of College Mathematics - Expanded | Math, CO2 |
| MATH 126** | Precalculus I | Math, CO2 |
| MATH 126E** | Precalculus I - Expanded | Math, CO2 |
| MATH 127** | Precalculus II | Math, CO2 |
| MATH 176** | Introductory Calculus for Business and Social Sciences | Math, CO2 |
| MUS 121 | Music Appreciation | Fine Arts, CO7 |
| PEX 176 | General Physical Fitness | N/A |
| PSY 101 | General Psychology | Soc Sci, CO6 |
| SOC 101 | Principles of Sociology | CO6 |
| STAT 152** | Introduction to Statistics | Math, CO2 |
| SW 101 | Introduction to Social Work | N/A |
Example #2
Data Table, with header, sort and search options
Summer Freshman Start classes
Review the list of available Summer Freshman Start classes before enrolling.
| Course | Course Title | Course Fulfills |
|---|---|---|
| ANTH 101 | Introduction to Cultural Anthropology | Soc Sci, CO6 |
| ANTH 102** | Introduction to Physical Anthropology | CO4L |
| ART 100 | Visual Foundations | CO7 |
| AST 110** | Stellar Astronomy | NS B, CO4L |
| ATMS 117** | Meteorology | NS B, CO4L |
| CHS 101 | Introduction to Community Health Sciences | N/A |
| CHS 102 | Foundations of Personal Health and Wellness | N/A |
| COM 101 | Oral Communication | N/A |
| ECON 102** | Principles of Microeconomics | Soc Sci, CO6 |
| ENG 98 | Preparatory Composition | N/A |
| ENG 100J** | Composition Studio | N/A |
| ENG 101** | Composition I | N/A |
| ENG 102** | Composition II | Core Writing, CO1, CO3 |
| ENV 101** | Introduction to Environmental Science | CO4, CO9 |
| IS 101 | Introduction to Information Systems | N/A |
| JOUR 108** | All Things Media: Design | N/A |
| MATH 95 | Elementary Algebra | N/A |
| MATH 96** | Intermediate Algebra | N/A |
| MATH 120** | Fundamentals of College Mathematics | Math, CO2 |
| MATH 120E** | Fundamentals of College Mathematics - Expanded | Math, CO2 |
| MATH 126** | Precalculus I | Math, CO2 |
| MATH 126E** | Precalculus I - Expanded | Math, CO2 |
| MATH 127** | Precalculus II | Math, CO2 |
| MATH 176** | Introductory Calculus for Business and Social Sciences | Math, CO2 |
| MUS 121 | Music Appreciation | Fine Arts, CO7 |
| PEX 176 | General Physical Fitness | N/A |
| PSY 101 | General Psychology | Soc Sci, CO6 |
| SOC 101 | Principles of Sociology | CO6 |
| STAT 152** | Introduction to Statistics | Math, CO2 |
| SW 101 | Introduction to Social Work | N/A |