Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • The difference between repeating groups and tables
  • Using the table element
  • Static rows/columns
  • Repeating rows/columns
  • Selecting and managing the table element
  • General properties
  • Managing rows
  • Managing columns
  • Adding/removing columns
  • Managing cells
  • Working with elements
  • Navigating the pseudo-groups
  • Responsive behavior
  • Total width and height
  • Column width
  • Row height
  • Container layout
  • Other ways to learn

Was this helpful?

  1. User manual
  2. Design
  3. Elements
  4. Containers

Table elements

This section covers the table element, used to display lists of things such as records from the database in a table-like structure of rows and columns

Last updated 5 months ago

Was this helpful?

The Table element requires:

  • that you are using

  • that the page is set to use the

To show a list of things, you can also use the repeating group element. You can read more about the repeating group element and how it's different from a table element in the article below:

Article: Article section:

The table element is a used to show a list of things, such as records from the database, by repeating the content of the group one time for each entry, similar to Repeating Groups. The two elements differ in some basic ways, and as the name suggests, the table element has specific properties that make it well suited to creating neat tables.

Let’s first have a look at how the repeating group and table elements are different:

The difference between repeating groups and tables

These two element types share many characteristics and are edited in much the same way: Elements that you place inside one cell will be repeated for each record that is specified in the element’s .

For example, if you load a list of the User data type into any of these elements and place a text element that references the Current Cell’s User’s email address, then each row will show the email address of that entry in the database.

The table element offers a few additional features that make tables even easier to set up and maintain:

  • You can prevent one or more static rows at the top of the table from being affected by the element’s data source. This is useful for creating column headers.

  • Static rows can be made sticky, meaning that they will remain at the top as you scroll through the records below

  • You can add and delete rows and columns, making it easier to make changes to the overall table structure as needed

  • Rows and columns can be copy/pasted

  • Tables have columns that keep content perfectly aligned within rows

Repeating groups are your best choice when you want to set up flexible displays of list information, like simple lists, card designs, or masonry grids. Table elements are faster to work with when you want to set up classic table structures with rows/columns and labels.

Using the table element

When you draw a table element on the page, a table will be created with three columns and four rows, with the top row being static.

Static rows/columns

The top row in the automatically generated table is a static row, meaning that it doesn’t rely on the list of data loaded into the rows below. You can have one or more static rows, and the elements placed in them will not be repeated (unlike the repeating rows and a repeating group).

As the table element works with columns in addition to rows, you can easily align the content of the static rows with that of the repeating rows. This makes it easier to design neat tables that consistently resize responsively: For example, you can place column headers in the static rows and they’ll align with the content in the repeating rows automatically.

If you configure the table to have a horizontal orientation instead of a vertical one, the rows and columns will be transposed.

Repeating rows/columns

Repeating rows contain the data specified in the element’s Type of data and Data source fields. Just like in a repeating group, each row will repeat itself (along with its content) with one row per entry in the data source list.

This means you can only ever edit the first repeating row. Then that content will be duplicated to the rows below. You can add as many columns as you need, and each of them can contain their own elements.

If you configure the table to have a horizontal orientation instead of a vertical one, the rows and columns will be transposed.

Selecting and managing the table element

The table element has an orientation property, which allows you to switch the axis of the rows and columns. By default, the table orientation is vertical. When the orientation is configured to horizontal, the information below is inverted, meaning that the rows and columns are transposed.

The table element behaves a bit differently from other Bubble elements, as it allows you to select pseudo-elements that each have their own properties. When you hover over the table element, column and row handles appear to help you make the correct selection. The element itself and the pseudo-elements can be selected individually.

General properties

You can select the whole table element by clicking the icon in the top-left corner. This opens up the property editor for the full element, where you select the type of data you want to load, the data source for the list, as well as the general settings for styling, responsive behavior, and conditions.

The table element also allows you to select multiple rows and columns to apply specific properties to more than one at a time. To select multiple rows or columns, press and hold the Shift key while clicking on the rows/columns you want to include in your selection.

Managing rows

You can select and manage both static and repeating rows. Each static row that you add can be selected individually, but you can only select the first repeating row.

The easiest way to select a row is to click the numbered row handle. Bubble also displays your rows and columns as pseudo-elements in the element tree.

When a row is selected, you can set its:

  • Background style

  • Opacity

  • Height controls (Min width / Max width / Fit height to content)

  • Page load visibility

  • Conditions

Adding/removing rows

You can add and remove rows as needed to your table. Static and repeating rows behave a bit differently in this regard:

Static rows

To add a static row, right-click any static row or the top repeating row and select Add row above/below. To delete one, right-click that row and select Delete from the floating menu.

Repeating rows

Repeating rows are not added individually. Instead, they’re controlled with the properties specified in the top-most repeating row.

  1. Select the top repeating row by clicking the row handle. The row is marked with a ∞ symbol.

    1. If the Set fixed number of repeating rows box is checked, you can specify the number of rows you want to display using the Row count setting.

    2. If the Set fixed number of repeating rows box is unchecked, Bubble will load as many rows as there are entries in the list of the data source.

Managing columns

To select a column, click its column handle (A, B, etc). From there, you can adjust the column’s properties:

  • Page visibility

  • Responsive behavior

  • Conditions

Adding/removing columns

You can add columns in two different ways:

  • Right-click any column and select Add column to left/right.

  • Hover your mouse over the separator between two columns, and you’ll see a floating + symbol. Clicking it will add a column on the right side.

You can also remove columns in two ways:

  • Rick-click any column and select Delete.

  • Hover any column handle and click the X symbol hovering over the table.

Note: You cannot delete the last column.

Managing cells

Each cell has its own properties and can be assigned conditions. To select a cell, click on the cell; the property editor will display that cell’s settings.

Working with elements

Like other Bubble container elements, table elements let you place elements in a parent-child relationship. That said, as we explored earlier, table elements are slightly different from the rest of Bubble’s containers in that they include pseudo-child containers for the rows, columns, and cells that you create.

Navigating the pseudo-groups

The easiest way to navigate through the different cells in your table’s static and repeating rows is to click them directly. The pseudo-groups can also be explored using the element tree on the left-hand side of the editor. They are displayed in the hierarchy of parent and child containers, with the top parent being the table element itself. You will find all your static rows just below the table element, and your repeating rows will appear after that.

Keep in mind that you can make any edits you want to the static rows, whereas with repeating rows, you can only edit the first one; the content within that row will be duplicated for all rows below.

Responsive behavior

When working with responsive behavior for the table element, it helps to think of the parent element (the table itself) and each row and column as separate containers that can have their own responsive settings.

Total width and height

The total width and height of the entire table container is set on the parent element (the table element itself). In turn, the width and height of the container control the maximum width and height of the table’s individual rows and columns, unless the table container is set to fit width/height to content, with no maximum value.

Column width

The column width is set at an individual column level. Select the column by clicking its handle or selecting it in the element tree, and then make any needed changes in the property editor. The width of the column will be the same for all rows, including both static and repeating rows.

Row height

The row height is set at an individual row level. For repeating rows, the height properties are set on the first (top) row.

Container layout

Just like a regular group, each cell can have its own individual container layout (fixed, row, column, and align to parent) that controls the behavior of its child elements. For cells in static rows, you can control each individual cell, while cells in a repeating row are controlled by each individual cell in the first (top) row.

Other ways to learn

Core reference: table element settings

In the core reference section, you'll find all the settings associated with table elements.

Reference:

Table elements
Repeating groups
The difference between repeating groups and tables
The table element lets you easily set up tables with sticky column headers.
Clicking the icon in the upper left corner selects the entire table.
Hovering the mouse cursor over the line that separates two columns (marked in red) allows you to add a column between the two columns.
One way to delete a column is to click the X icon hovering above the column you want to remove.
When you set up a table, its pseudo-groups become visible and selectable in the element tree.