TableTile Documentation

Overview

The TableTile component is a versatile and powerful addition to the Vantage analytics and data platform. It is designed to display data in a tabular format, making it easy for users to visualize and analyze datasets. The TableTile enhances the user experience by allowing for both customizable styling and interaction, enabling users to monitor key metrics or datasets effectively.

Settings

The TableTile component supports various configuration settings that allow users to customize its appearance and behavior. Below is an exhaustive breakdown of each setting:

Dimensions

1. Height

   • Input Type: Numeric
   • Description: Specifies the height of the table tile in arbitrary units. Adjusting this value will influence the vertical space the tile occupies on the dashboard.
   • Default Value: No default value is provided, and it must be set to render the component effectively.

2. Width

   • Input Type: Numeric
   • Description: Specifies the width of the table tile in arbitrary units. Changing this value affects the horizontal space allocated for the table.
   • Default Value: No default value is provided, and it must be set in conjunction with the height for proper display.

Table Data

3. Headers

   • Input Type: Array of Strings
   • Description: Defines the header names for each column in the table. These strings will be displayed at the top of the table and serve as labels for the corresponding columns. Altering this array expands or reduces the number of columns and affects the structure of the table.
   • Default Value: An empty array ([]), meaning the table will have no headers until this is defined.

4. Rows

   • Input Type: Array of Arrays
   • Description: Contains the data for the rows in the table. Each sub-array represents a single row, and each item within that sub-array corresponds to a cell in the table. Modifying this data will directly impact the information displayed in the table.
   • Default Value: An empty array ([]), meaning no rows will be rendered unless this value is populated.

Tile Properties

5. Title

   • Input Type: String
   • Description: The primary title for the TableTile. This text is prominently displayed at the top of the tile, giving users a clear indication of what data the table is showing. Changing this value can help redefine the context of the displayed data.
   • Default Value: No default value, leading to an absence of title text if not specified.

6. Subtitle

   • Input Type: String
   • Description: A secondary text that provides additional context or information about the table. The subtitle appears beneath the title, adding clarity to the displayed data. If the subtitle is not provided, it will simply not render.
   • Default Value: No default value.

7. FooterText

   • Input Type: String
   • Description: Text that appears at the bottom of the TableTile. It can be used for captions, notes, or source acknowledgments. Adjusting this value can help convey important final thoughts or context regarding the table data.
   • Default Value: No default value.

8. FooterColor

   • Input Type: String (CSS Color)
   • Description: Specifies the color of the footer text. Changing this value affects the visual style of the footer, allowing for customization that aligns with branding or usability requirements.
   • Default Value: No default value; the default rendering style will apply if not specified.

How It Works

The TableTile component utilizes the Tile component as a wrapper to create a structured and visually appealing presentation for tables. The headers and rows are dynamically populated from the provided props, allowing for flexible data representation. The component also includes styles for hover effects and scrollbar aesthetics, ensuring functionality and visual feedback.

• headers populate the table's header row, allowing for customization of what each column represents.
• rows populate the table body, enabling dynamic data presentation in a structured format.
• The overflow-y-auto class provides a scrollable area for the table in case of large datasets, enhancing usability.

Use Cases & Examples

Use Case 1: Sales Dashboard Monitoring

A sales team may need to monitor product sales over a month, displayed in a summarized table format that includes product names, units sold, and total revenue.

Use Case 2: Financial Report Summaries

An accounting department can use the TableTile to present monthly financial summaries that include various metrics like revenue, expenses, and profit margins in tabular form.

Example Configuration

To solve the first use case of Sales Dashboard Monitoring, the TableTile could be configured as follows:

{
  "config": {
    "height": 300,
    "width": 600,
    "headers": ["Product Name", "Units Sold", "Total Revenue"],
    "rows": [
      ["Product A", 150, "$3,000"],
      ["Product B", 200, "$4,000"],
      ["Product C", 75, "$1,500"]
    ]
  },
  "title": "Monthly Product Sales",
  "subtitle": "Sales performance for October",
  "footerText": "Data Source: Sales Database",
  "footerColor": "#000000"
}

In this configuration, the table will render with specified height and width, display relevant metrics for each product, and offer clarity with titles and footers, providing a comprehensive view of sales performance.