Table Design

This area allows you to edit the table’s name and description, Table Styling, and Feature Customization

Please follow the steps below to visit the Table Design page:

• Go to your Shopify Admin.
• Open the app in your store and navigate to the Dashboard page.
• Click the Edit button under the Actions column next to the table you want to modify.
• The Table Manipulation page will open.
• Click on the second tab labeled “Table Design”.
• You will see all the available features for table design, and you can make changes as per your preferences.

Table name

This field lets you name your table.

Description

This option allows you to modify the table’s name and description. You will also see the last modified date.

Title/Description Settings

• Show table title: When enabled, the table name will be displayed.
• Table title font size: This setting defines the font size for the title of the table, making it easier to identify and understand the purpose of the data displayed.
• Table title font color: This controls the color of the title text.
• Show table description: When enabled, the table description will be displayed.
• Use data tables: Enables advanced data table features like search, pagination, and sorting.

Header & Footer Settings

• Table head row: When enabled, the first row of the table will be used as the header.
• Table footer row: When enabled, the last row of the table will be used as the footer.

• Allow column sorting: Enables users to sort columns by clicking on the headers.
• Drag and drop column: Allows rearranging columns via drag-and-drop (only works if head row is active).
• Header Background color: This setting defines the background color of the table header. A distinct color can help the header stand out and enhance the overall visual organization of the table.
• Header font color: You can set the color of the header text.
• Header font size: This option allows you to specify the font size for the header text in the table, making it more prominent and easier to read.

Search Feature

This option Allows users to search through table content.

Search feature: Enables the search functionality for the table.

• Search full width: When this option is enabled, customers can search across the full width of the table.
• Show column search: Enabling this option allows you to see a search bar for each column individually.

Text Fields

• Search title: This option allows you to customize the text displayed as the title or label for the search field in the table. It helps users understand the purpose of the search function.
• Search placeholder text: The Search Placeholder option refers to the text displayed within the search input field before the user types anything.
• No records text: This setting defines the message shown when there are no records available in the table. Customizing this text can provide users with helpful information or encouragement to try different search criteria.
• Loading records text: This option allows you to set the text displayed while the table is loading data. It informs users that the system is retrieving information, enhancing the user experience by managing expectations.

Pagination Feature

Enable this option to set pagination for displaying data in the table.

Example: If you set the pagination to 10, customers will see only 10 rows per page; to view additional rows, they will need to click the next button.

• Pagination per page: When you enable this option, customers can set the number of entries displayed per page.
• Pagination font size: This option allows you to set the font size for the pagination text. Adjusting this can improve readability and ensure consistency with other text elements.
• Pagination font color: This setting lets you choose the color of the font used for pagination controls (like “Next” and “Previous” buttons) within the table. A contrasting color can improve visibility and user interaction.
• Pagination background color: YThis setting lets you select the background color for the pagination area, which can be used to distinguish it from the rest of the table and improve aesthetic appeal.
• Pagination length change: When you enable this option, customers can set the number of entries displayed per page.

General Feature Section

These options control table layout, style, and basic interactivity.

• Table Information: Displays a summary below the table (e.g., “Showing 1 to 10 of 50 entries”).
• Row hover highlight: When you hover your cursor over a row, its background color will change.
• Vertical scroll height & fix header: Enables scrolling with a fixed header for large tables.
• Alternating row colors: Adds zebra-striping for rows (better readability).
• Horizontal scroll: When you enable this option, customers can scroll the table horizontally to view more columns.

Styling Settings

• Table background color: You can change the table background color.
• Table border color:This setting lets you choose the color of the borders that separate the cells in the table. A well-defined border can improve clarity and organization.
• Table border style: This option allows you to select the style of the table borders (e.g., solid, dashed, dotted). The border style can affect the table’s visual appeal and overall design.
• Cell padding: You can add space inside each cell.

Font and Alignment

• Table data font family: You can change the font style.
• Table data font size: You can change the font size of the table data.
• Word spacing of table data:This setting controls the spacing between words in the table data. Adjusting word spacing can improve readability and the overall appearance of the text within the table.
• Table data font color: You can change the font color of the table data.
• Table data alignment: This option allows you to specify how the text within the table cells is aligned (e.g., left, center, right). Proper alignment can enhance readability and visual organization.

Custom CSS and Custom Commands

Use this option to add CSS code for additional table styling.

Additional parameters from the DataTables documentation can be added to the JavaScript call.