--- title: "Table" description: "The Table Component can be used to display Information in a Tabular Format." path: https://www.eonshowroom.eon.com/en/content-elements/table.html lastModified: 2025-09-18T13:36:34.098Z --- # Table # Table | Category | 2016 | 2017 | 2018 | | --- | --- | --- | --- | | Philadelphia became the first city we know of to introduce squirrels ¹ | 43.930 | 24.080 | 11.600 | | The squirrels that we all [inline link](https://www.google.com) take for granted A cream-colored giant squirrel (Ratufa affinis) photographed at **Omaha's Henry Doorly Zoo and Aquarium** in Nebraska | 10.100 | 32.000 | 10.020 | | *Squirrels* were put into parks where they were fed and sheltered ² | 29.100 | 16.100 | 12.290 | | Eastern grey squirrels were captured from forested areas³ | 32.120 | 24.100 | 10.290 | ¹ This is some random footnote as an example (31st of December, 2019: 10.571 Mio €) ² Another footenote to show that more than one can be added (see: www.eon.com: 31st of December, 2020) ³ Another footenote to show that more than one can be added (see: www.eon.com: 31st of December, 2020) [How to Configure](#how-to) ### Description The Table Component can be used to display Information in a Tabular Format. - Features different Highlight Options - Stackable on Mobile Viewports [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-table-renderer--interactive) ### Inspirations | Category | 2016 | 2017 | 2018 | | --- | --- | --- | --- | | Philadelphia became the first city we know of to introduce squirrels ¹ | 43.930 | 24.080 | 11.600 | | The squirrels that we all [inline link](https://www.google.com) take for granted A cream-colored giant squirrel (Ratufa affinis) photographed at Omaha's Henry Doorly Zoo and Aquarium in Nebraska | 10.100 | 32.000 | 10.020 | | Squirrels were put into parks where they were fed and sheltered ² | 29.100 | 16.100 | 12.290 | | Eastern grey squirrels were captured from forested areas | 32.120 | 24.100 | 10.290 | ¹ This is some random footnote as an example (31st of December, 2019: 10.571 Mio €) ² Another footenote to show that more than one can be added (see: www.eon.com: 31st of December, 2020) not Stack on Mobile Viewports | Category | 2016 | 2017 | 2018 | | --- | --- | --- | --- | | Philadelphia became the first city we know of to introduce squirrels ¹ | 43.930 | 24.080 | 11.600 | | The squirrels that we all [inline link](https://www.google.com) take for granted A cream-colored giant squirrel (Ratufa affinis) photographed at Omaha's Henry Doorly Zoo and Aquarium in Nebraska | 10.100 | 32.000 | 10.020 | | Squirrels were put into parks where they were fed and sheltered ² | 29.100 | 16.100 | 12.290 | | Eastern grey squirrels were captured from forested areas | 32.120 | 24.100 | 10.290 | ¹ This is some random footnote as an example (31st of December, 2019: 10.571 Mio €) ² Another footenote to show that more than one can be added (see: www.eon.com: 31st of December, 2020) ### Usage Rules & Features ##### Features - Stack on Mobile Viewports (Optional) - Highlighting of Last Column / Row ##### Properties - Multiple Footnotes can be configured - Style of Text in Table can be configured with Rich Text Features ##### Design - Normal or Large Size is available for Table - First Row is always set as Header Row - Highlighting of last Row can be used to Design it as Table Footer ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | only Edge Cases | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | only Edge Cases | ### DO's - 12 Column Grid should only be used in Edge Cases. - Use Highlighting of first / last Row or last Column for important Information - Use large Size for less Content and small Size for much Content ### DONT's - Don't use it in small Grids like 2, 3 or 4 Column Grid - Do not Publish before checking it on mobile Viewport to decide wether to stack the Table Columns on mobile or to have the normal Table with scrolling ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/table_content%3A3-4?fmt=webp) ### Configure Style of Text in Table In the Text Field of the Editor Dialog for Table Component, Editor can enter the Table. The Text in the Table can be configured by marking it and choosing the appropriate Styles that are wished, like: - Bold - Italic - Subscript - Superscript - Alignments (left / center / right) - Listings (ordered / unordered) - Inline Link Also an ID must be configured for the Table. Beside that, Editor can add a Table Caption and highlight the last Column, as well as the last Row. Clicking on the last Icon in the List above the Text Field opens Option for changing the Table itself. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/table_edit%3A3-4?fmt=webp) ### Change table Using the Table Symbol (see Screenshot above) the Table can be edited in the appearing Dialog with: 1. Insert Column left of the Column 2. Insert Column on right of the Column 3. Delete the Column 4. Insert a Row above the Row 5. Insert a Row below the Row 6. Delete the Row 7. Merge the Cell with the next Cell on the right side 8. Merge the Cell with the next Cell under it 9. Merge Cells 10. Split Cells horizontally 11. Split Cells vertically 12. Select the entire Row 13. Select the entire Column 14. Open Cell and Table Properties #### Keep in Mind It is possible to change the Cell and Table Properties, but it is **not recommanded**. ### Cell & Table Properties Clicking on the Table Sign (Symbol No. 13 on the Screenshot above) Editor can change the Cell and Table Properties. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/table_cell-properties%3A3-4?fmt=webp) For setting**Cell Properties**, Editor can: - set the Width and Height by default in Pixel, but adding "%", like "40%", creates Relative Values - set the Alignment horizontally (left, center, or right), and vertically (top, middle, bottom, or baseline) - choose a Cell Type between Data or Header If Header is chosen, Editor can type in an ID for it, switch on a "Hidden Header" to hide it, and set a "Scope" (Options are "Scope", "Row", or "Column") If Data is chosen, Editor can give it an Header Text. Based on Mobile Behavior the first Row will be set as Header automatically per Design even it is not set here. Only for "Do not stack on Mobile" the first Row is not set as Header automatically. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/table_table-properties%3A3-4?fmt=webp) For setting **Table Properties**, Editor can: - set the Width and Height by default in Pixel, but adding "%", like "40%", creates Relative Values - set the "Cell padding" and "Cell spacing" - set a "Border" - give it a "Caption" ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/table_styling%3A1-1?fmt=webp) ### Configure Table Style Furthermore, it is possible to choose the Table Size between normal and large Size. Moreover, by default Tables are stacked on Mobile Viewports. But it is possible to do not stack it by selecting corresponding Checkbox. For "Do not stack on Mobile" the first Row is not set as Header automatically. By choosing a Color Scheme, only the last Column will change Color if it is highlighted. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/table_footnotes%3A4-3?fmt=webp) ### Add Footnotes Footnotes can be added in Footnotes Tab by clicking on "Add" Button and entering Footnote Text. All Footnotes are numbered in the Order they are listed.