Display structured data in a customizable, card-based grid layout.

The Table with Cards element in Naologic is designed to present data entries as individual cards, arranged in a grid. This format allows users to view and interact with information efficiently, with options to customize each card's layout and content.

Installing the Table with Cards

1. Navigate to the Desired Project
   From the Builder Overview, locate and select the project where you want to add the Table with Cards feature.

2. Access the Individual App Canvas
   Within the selected project, hover over the desired app and click Access App Flow to open the app where you want to add the feature.

3. Open Add Elements
   Click the “+” button on the left side of the app canvas to open the Add Elements menu.

4. Search for Table with Cards
   Use the search bar to find Table with Cards.

5. Drag and Drop to Install
   Drag and drop the Table with Cards onto the app canvas screen to add it to your project.

Setting Up the Table with Cards

After adding the Table with Cards to your project, you can configure it to display the data correctly by following these steps:

1. Table Settings
   Fields to note:

   • Data Document Name: Select the Data Document that the table will connect to for retrieving data. This defines the source of the data that will be displayed on the cards.
   • Data Relationship: If you have created any views within the Data Document, you can select them here.
   • Table Image Data Connection: To display images on the cards, you need to add a field (e.g., Cover Photo) as a String in your Data Structures. This field will be used to link images for each card, ensuring visual elements are displayed correctly.

2. Headers, Rows, and Columns
   Fields to note:

   • Table Header Buttons: These buttons appear at the top of the table and are not linked to individual entries. They are typically used for actions like creating a new entry. You can customize the buttons to perform specific tasks relevant to your data management needs.
   • Actions for Individual Table Entries: These are the options available when you hover over a card entry. Common actions include Edit, View, and Delete. Configure these actions to allow users to interact directly with the data entries displayed on the cards.
   • Table Rows: Select which data fields will be displayed on each card. For example, you might choose to show Name, Contact Information, or other key details. This helps ensure that the most relevant information is visible at a glance.
   • Filters: Set up filters to help users sort and narrow down the data. You can configure both simple and advanced filters to make it easier to locate specific entries.

The Table with Cards feature enables a structured, visual way to present data, making it easier for users to interact with and understand key information. By configuring the settings, customizing card content, and adding useful filters, you can tailor the table to suit your specific data display needs.