cs-icon.svg

Table App Installation Guide

Contentstack’s Table app enables you to add a table as a custom field in your content type, allowing Content Managers to input data in a tabular format within entries. The Table app lets you add table headings in rows and subsequent data in columns. You can perform various operations such as sorting, inserting, and deleting rows and columns.

Note: The number of rows and columns in a table depends on the size of the JSON data to be stored. Currently, only 10 KB of JSON data can be stored via the Custom Field. For more details, refer to our Custom Field Limitation documentation.

Voraussetzungen

Let's follow this step-by-step guide to install and configure the Table app within your stack.

Schritte zur Ausführung

  1. Install and Configure the Table app in Marketplace
  2. Use the Table app within your Entry

Install and Configure the Table App in Marketplace

Um die App zu installieren, melden Sie sich bei Ihrem Contentstack-Konto an und befolgen Sie die folgenden Schritte:

  1. From the left-hand side primary navigation, click the Marketplace icon.1-Marktplatz-Symbol
  2. Klicken Sie im linken Bereich auf Apps .
  3. Im Marketplace können Sie alle verfügbaren Apps sehen. Bewegen Sie den Mauszeiger über das Tisch App und klicken Sie Installieren.
    Install_App_from_MP.png
  4. In the pop-up window, select the stack where you want to install the Table app, accept the Nutzungsbedingungen, und klicken Sie auf Installieren Taste.
    Install_App.png
  5. Auf der UI- Standorte tab, you can see the predefined app location. The only available UI location for the Table app is the Benutzerdefiniert Feld. If you disable this UI location, you will not be able to save the configuration as it requires at least one UI location to be enabled.
    Configuration_Screen.png

    Zusätzliche Ressource: Weitere Informationen zu UI-Speicherorten finden Sie im Leitfaden „Installierte Apps“ .

  6. Click Open Stack to start using the Table application.

Use the Table App within your Entry

To use the Table app within an entry of your stack, follow the steps given below:

  1. Los zu Ihrem Stapel, klicken Sie im linken Navigationsbereich auf das Symbol „Inhalt “ und dann auf die Schaltfläche „+ Neu Inhalt “ .
  2. Erstellen einen Inhaltstyp indem Sie relevante Details hinzufügen, wie unten angezeigt:
    New_Content_Type.png
  3. In the Content Type Builder page, add a Custom field in your content type by clicking the Insert a field link represented by a + sign.
  4. Auf der Custom Field Editor Properties modal:
    1. Enter a Display Name for the field, for example Table.
    2. (Optional) Enter an Instruction Value and Help Text for the field.
    3. Click inside the Select Extension/App field.
    4. Die Auswählen „Erweiterungen“ oder „App“. modal will open. From this modal, select Tisch aus der Liste der Plugins und klicken Sie dann auf Fortfahren.
      Select_App.png

      This adds Table to the custom field.

      Custom_Field_App_Showing.png
  5. Nachdem Sie die App in einem benutzerdefinierten Feld hinzugefügt haben, klicken Sie auf Speichern oder Speichern und Schließen, um Ihre Änderungen zu speichern.
  6. To use the Table app, create an entry for this content type. In the left navigation panel, go to the Entries page and click + New Entry.
  7. In the Select Content Type modal, select the content type that we created above and click the Proceed button.
  8. The entry opens. You will see the custom field with the + Add Table button. Click on it to add the new table.
    Add_Table.png

    You can see the Table in the Custom field on your entry page, as shown below:

    Table_In_Entry.png

    Note: You can use the keyboard shortcuts to perform certain actions such as bold, italics, etc. to highlight a particular table item.

  9. Here's how you can work with the available options:
    1. Click the icon as shown below. If you want to add a header row or a column, you can simply enable the respective toggle. If you want to delete the entire table, click the Delete Table Möglichkeit.
      Header_Row_Column.png
    2. If you want to view the table in full-screen, click the Full Screen icon as shown below:
      Full_Screen_Icon.png
    3. You can then start entering the data in the table. Once you have entered the data in the table, click the icon (as shown below) and select the respective options if you want to add or delete a row or a column.
      Click_to_View_Insert_Options.png
    4. To import or export the table data in a CSV file, click the Import CSV File und Export CSV File Symbole bzw.

      Import_Export.png
    5. You can also search for a particular item in the table by using the Search option.
      Search_Bar.png
    6. Using the drag handle, you can drag and drop the rows to change the sequence.
      Drag_Drop.png
  10. After adding your table, Save and Publish your entry.
War dieser Artikel hilfreich?
^