Simple Table

This comprehensive guide will cover everything about Simple Table in Mokkup.

When to Use?

A simple table is a structured form of data presentation that lays out information in rows and columns. It is particularly effective for organizing data in a straightforward manner and enabling easy comparison and analysis.

A simple table finds its usefulness in various scenarios:

• Clarity in Data Representation: An ideal choice to present data in a clear and concise format that is easy to understand.
• Comparative Analysis: When comparing different data points, a simple table allows for quick visual assessment of values across rows and columns.
• Tabular Data Display: Utilize a simple table to effectively present raw data without the need for complex visualizations.
• Efficient Data Lookup: For rapid data retrieval based on specific criteria, a simple table's structured layout is highly practical.
• Direct Information Retrieval: When users need to access specific data elements without interpretive graphics, a simple table offers direct access to the needed information.

How to Create?

Creating a New Project:

• Click on ‘Create new’ from the home page
• Setup the project by filling in the name and choosing the frame size
• Drag & Drop the simple table on to the canvas or click on it to add from the left menu
• Resize it on the canvas and place in the desired location
• Edit it from the customize element menu which opens on element selection

Using a Mokkup Template

• Choose a template from the template library and click ‘Use Template’
• Select the table that needs to be changed
• Resize it on the canvas and place in the desired location
• Edit it from the customize element menu which opens on element selection

Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu.

How to Customize?

Mokkup allows various customization options for all elements. These customization options are present in the menu on the left side.  

Data

The data in a table can be edited directly on the canvas. Simply click on the cell and edit the data.

1. Edit Table

• This is the default tab that opens when an element is selected. All element customizations can be done on this tab. Each sub-section will be explained below.

2. Matrix

No. of rows:

•  Edit the number of rows by clicking on the arrows. Values cannot be manually input here.

No. of columns:

• Edit the number of columns by clicking on the arrows. Values cannot be manually input here.

Customize

This is the default tab that opens when an element is selected. All element customizations can be done in this tab. Each sub-section will be explained below.

1. Details

Edit the basic table details here

Title

• Change the title of the table (and its text theme) here. Toggle off if not needed.

Row Banding

• Toggle on/off to add a background color to every alternative row.

 2. Stylize Columns

This section allows to customize the style of each column in the table.

• Click on any column to open the ‘Style’ popup or click on the ‘Settings icon that appears on hover
• Choose the style which suits the business requirements
• Use the ‘6 dots’ on the left side of the column name to reorder columns
• Click the ‘trash’ icon that appears on hover to delete any column

3. Add Ons

Contains additional elements that can be added to the table.

Buttons

• Switch on or off to add or remove buttons from the table. 
• Add multiple buttons by clicking ‘Add Button’. 
• Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
• Edit the button's content by clicking on the Title 1’ text in this menu. 
• Delete any button by clicking the ‘trash’ icon near the name of the button.

Dropdowns

• Toggle on or off to add or remove dropdowns in the table
• Adjust their alignment to either the left, center, or right of the element using ‘Alignment’
• Add dropdowns by clicking the ‘+’ icon
• Reorder them by clicking the ‘Settings’ icon
• Delete them by clicking the ‘Trash’ icon
• The title can be edited in the ‘Edit Text’ field, and values can be added by entering values in the ‘Add Values’ field

Tip: Some add-ons cannot be used together in an element. For example: Turning on the Buttons switch will automatically switch off Dropdowns, and vice versa.

4.  Theme & Customizations

Click the 'Theme & Customization' icon in the floating toolbar on top of the element (or open it by scrolling down the left side menu) to style this table on its own, without changing the rest of the dashboard.

• Element Color Theme

Pre-fills this table's title, header row, row text, and row banding from the project's Primary, Secondary, and Tertiary palette. Then lets you edit any swatch or hex code to override the colors for this table alone. There's no theme gallery at this level; changes apply immediately, and 'Reset to Default' brings it back in line with the project theme. See Mokkup Themes for more.

• Element Text Theme

Style the table's Title, header row text, and regular row text (Hierarchy and Simple table layouts are styled separately), and, when toggled on, the text inside any Buttons or Dropdowns add-ons. For each item, set Font, Size, Style (Bold/Italic/Underline), Alignment, and Color, or click 'Reset to Default' to revert it. Dropdowns and other add-ons with a white background also get their own Background Color option, since a white field doesn't always suit a dark or colored Text Theme. See Text Themes for the full list.

• Element Effects Theme

Rounded Corners, Padding (set independently for the inner spacing's Left/Top/Right/Bottom sides, plus an overall outer padding), Element Color, Drop Shadow, and Stroke. See Effects Theme for details.

• Not available on this element:

• The Buttons add-on doesn't have a background color option yet. If you're using Dropdowns instead, that background color option does work today.

Note: Whichever change you make most recently is the one that sticks. For example, if you customize an element's effects and then apply a new project-level Effects Theme, the project theme overrides that element's custom styling, and the reverse holds true too.

This was a complete guide to using and editing a simple table on Mokkup. For further questions, please ask our chatbot or contact support.